can not use another component in innerHTML property binding

Question

I have created a sample with innerHTML binding property. I want to use other component inside my template like below:

export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <hello></hello>
`);
}

hello-component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<button ejs-button>Button</button>`
})
export class HelloComponent  {
  @Input() name: string;
}

Sample - https://stackblitz.com/edit/angular-vdf66x?file=src/app/app.component.ts

Template

#40474410 – Dockery

hi @Indragith, do you have any idea how to implement this in my app. i have tried this but i couldn't achieve – Template

what is the need of using innerhtml here. you are trying to make angular components behave like html elements – Dockery

no i need a template compilation. i have my own template compilation method but today only i see this innerHTML property so that i want to use this instead of my template compilation method – Template

Try defining your angular components(<hello>) as angular elements. Angular elements are custom html elements(web components). It might work – Dockery

can you share any code snippets or any blog to refer – Template