Angular 2 - get child component to load inside parent component(getting created dynamically)

Question

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.

@yurzui..thanks..works for my requirement perfectly..will help in many of my similar situations. Can you post your answer for acceptance. — Ranjan
– Ranjan, Commented Jan 10, 2017 at 9:33

yurzui · Accepted Answer · 2017-01-10 09:38:38Z

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

answered Jan 10, 2017 at 9:38

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ranjan Over a year ago

@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.

yurzui Over a year ago

Please reproduce it on the plunker

Ranjan Over a year ago

here's the updated plunker with the scenario..link, 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.

yurzui Over a year ago

You're destroying dynamically created component every time by calling this.cmpRef.destroy() and this.vcRef.clear(); Compiler isn't supported with AOT.

yurzui Over a year ago

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

|

Collectives™ on Stack Overflow

Angular 2 - get child component to load inside parent component(getting created dynamically)

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related