In Angular is there a way to inject html that contains a component directive into the template of a parent component?

Question

I would like to have html in my database that contains component directives and then use that as part of a component template in Angular.

For an example, if I have:

<div [innerHTML]="injectMe"></div>

in App component template and this in the code for app component:

export class AppComponent  {
  injectMe = "<p>Paragraph</p> <app-injected></app-injected> ";
}

then create a component named injected:

template:

<p> injected works! </p>

code:

@Component({
  selector: 'app-injected',
  templateUrl: './injected.component.html',
  styleUrls: ['./injected.component.css']
})
export class InjectedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

I get a warning in the console that "sanitizing HTML stripped some content". Following that chain, I tried to add a call to mark the string as safe using: this.sanitizer.bypassSecurityTrustHtml

export class AppComponent  {
  injectHtml = "<p>Paragraph</p> <app-injected></app-injected> ";
  injectMe: any;

  constructor(private sanitizer: DomSanitizer){
    this.injectMe = this.sanitizer.bypassSecurityTrustHtml(this.injectHtml);
  }
}

That results in the directive tag being left in the HTML with no console warning about sanitize removing anything, but the component does not seem to be processed by Angular. I saw you can use component factory to create components dynamically, however, I don't think this will help in my case unless I want to manually parse the HTML to check for the components.

I don't think this can be done. In Angular html has to be compiled before you use it on your App. In this case the html will have the `` tag but it won't be processed by Angular. You should go with a different approach like component factory — alexortizl, May 01 '20 at 18:31
@alexortizl thank you for your reply. I was afraid there wasn't a way to do this. I thought I saw it work once initially then I started getting the sanitize warning. So I'll have to manually parse the HTML myself, create components and insert them? I was wondering how to preserve the location in the HTML of the component. Thanks again — Jim Moore, May 01 '20 at 18:48
Back in angularjs, we had `compile` function which made this possible, however this is not the case with angular. Maybe one day :) — Bunyamin Coskuner, May 01 '20 at 21:48
Does this answer your question? [Angular inject component in innerHtml](https://stackoverflow.com/questions/62897153/angular-inject-component-in-innerhtml) — Heretic Monkey, Dec 17 '22 at 21:05

score 0 · Answer 1 · answered May 01 '20 at 21:16

I don't believe this is possible.

There is an interesting SO post here which talks about when the constructor is called in the Angular lifecycle.

The interesting part:

Angular starts bootstrapping the application ...it first creates classes for each component. So it calls MyAppComponent constructor.

i.e. Angular parses the html in the html to work out which typescript components it needs to instantiate. This means that you can't inject html and expecting Angular to include it in the bootstrapping process, because it has already missed the boat.

In Angular is there a way to inject html that contains a component directive into the template of a parent component?

1 Answers1