2

I am trying to dynamically create a header, constructing and passing the header template as 'string' to my dynamic component. My requirement is to call another component inside the header component template string and load it.

Have created a working Plunker here for the scenario.

I get an error in the browser console as: 

Unhandled Promise rejection: Template parse errors:
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.
2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("     <span class="title" style="float: right; margin-right: 10px;">
                                [ERROR ->]<alert></alert>   
                                <img class="notify-circle" src="https://cdn0.iconf"): DynamicComponent@2:32 ; Zone: <root> ; Task: Promise.then ; Value: Object { _nativeError: Error, stack: "" } BaseError@https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:1595:29 [angular]

Question:

How can i get the 'Alert' component recognized inside the header template constructed as a string, using the selector '<alert></alert>'.

The concept may seem bizarre, but the requirement is such.

Ranjan
  • 475
  • 1
  • 5
  • 18
  • @yurzui..thanks..works for my requirement perfectly..will help in many of my similar situations. Can you post your answer for acceptance. – Ranjan Jan 10 '17 at 09:33

1 Answers1

2

You can create special shared module that contains always what you need 

@NgModule({
  declarations: [AlertComponent],
  exports: [AlertComponent]
})
export class SharedDynamicModule {}

and then import it to your DynamicModule

dynamic.ts

@NgModule({
  imports: [ CommonModule, SharedDynamicModule ],
  declarations: [ DynamicComponent ]
})
class DynamicHtmlModule { }

Modified Plunker

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • @yurzui..just had a small curiosity, if future requirement comes to creating the alert component dynamically too, shared module certainly wont work in that scenario(just edited the plunker in the question and saw)..is it even possible to dynamically create alert and header both and render it on layout. – Ranjan Jan 10 '17 at 10:38
  • Please reproduce it on the plunker – yurzui Jan 10 '17 at 10:40
  • here's the updated plunker with the scenario..[link](https://plnkr.co/edit/BJEUCyGM0MRdt2EndmqU?p=preview), have removed the alert component and creating it dynamically inside the *header*, but the catch is without any `selector/viewContainerRef`, how can we call the *alert* inside *header* so that when the header is dynamically loaded it has the *alert* as its created child component. – Ranjan Jan 10 '17 at 12:44
  • You're destroying dynamically created component every time by calling `this.cmpRef.destroy()` and `this.vcRef.clear();` Compiler isn't supported with AOT. – yurzui Jan 10 '17 at 13:02
  • What you're asking in comments looks like some other question. And i think it is very bad architecture of your project if you want to do that. Angular team totally against using Compiler – yurzui Jan 10 '17 at 13:08
  • This will help you http://stackoverflow.com/questions/40922224/angular2-component-into-dynamicaly-created-element/40926110#40926110 – yurzui Jan 10 '17 at 13:47