0

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

Kumaresan Sd
  • 1,399
  • 4
  • 16
  • 34
  • https://stackoverflow.com/questions/40473910/how-to-dynamically-add-innerhtml-with-angular-2-components – Indragith May 24 '19 at 09:05
  • hi @Indragith, do you have any idea how to implement this in my app. i have tried this but i couldn't achieve – Kumaresan Sd May 24 '19 at 09:08
  • what is the need of using innerhtml here. you are trying to make angular components behave like html elements – Indragith May 24 '19 at 09:13
  • 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 – Kumaresan Sd May 24 '19 at 09:15
  • Try defining your angular components() as angular elements. Angular elements are custom html elements(web components). It might work – Indragith May 24 '19 at 09:25
  • can you share any code snippets or any blog to refer – Kumaresan Sd May 24 '19 at 09:31

0 Answers0