Nested Components created on the fly in Angular

Question

I have this plunker example https://embed.plnkr.co/RtZvxv2rPFpLPZGndS0g/ where I have two components created on the fly: ContentComponent and HeaderComponent. I want to reference the HeaderComponent selector in the ContentComponent template like this:

ngOnInit() {
  this.template = "<div>This is the {{ name }}</div><app-header></app-header>";
  this.compileTemplate();
}

Unfortunately this is not working and the compiler complains: app-header is not a known element.

Does anyone have an idea how to solve this problem? Is there another way to obtain the same end result?

You can't add Angular "stuff" like that at runtime - only plain HTML. For what you want you would need to compile a component at runtime. See https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular — Günter Zöchbauer, Nov 22 '17 at 13:15
Thank you @AngularInDepth.com for teaching me how to use dynamic components. It is amazing what you can do with Angular today. https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e — M. Rauca, Nov 22 '17 at 14:38

score 2 · Accepted Answer · answered Nov 22 '17 at 15:02

Angular can't find app-header element because HeaderComponent was neither declared nor imported

To solve it you can create SharedModule that declares and exports HeaderComponent

@NgModule({
    declarations: [ HeaderComponent],
    exports: [HeaderComponent]
})
export class SharedModule { }

and finally simply import it in your dynamic module

@NgModule({
  declarations: [decoratedCmp], 
  imports: [SharedModule] <============ this line
})
class RuntimeContentModule { }

Plunker Example

Nested Components created on the fly in Angular

1 Answers1