ANGUALR2 Dynamic Component Loader

in Angular2, components are the main way we build and specify the elements and logic on the page. and we usually load it in a tag that contains a few conditions that make it load dynamically tagged.

But there are cases where we don't know the DOM structure at compile time. in this case, we have to add components to the needs of any location, so we use dynamiccomponentloader dynamically loaded components. in this case, we will be able to instantiate a component at the specified location, which is connected to a view.

Prior to Beta16, Dynamiccomponentloader had three ways to remove a method after the upgrade

Loadasroot:

Creates an instance of a component and attaches it to the first element, and the component's selection matches the DOM.

Import {Component, Dynamiccomponentloader, Injector, componentref} from ' @Angular/core'; import {commoncomponent} from './common.component'; @Component ({Template: '<divclass="Box"> <button (click) ="form ()">view form</button> <div id="form">welcome..! Here form component'll be loaded.</div> </div>', Styles: ['. box {padding-Top:2rem;} ']}) exportclassLoadasroot {Constructor ( PublicDcl:dynamiccomponentloader, Public_injector:injector) {} form () { This. Dcl.loadasroot (Commoncomponent,"#form", This. _injector). Then (COMPONENTREF:COMPONENTREF)={console.log (componentref); })    }}

loadnexttolocation

Create a component and add it to the current component after next siblings

Loadnexttolocation.ts

Import {Component, Dynamiccomponentloader, Injector, Viewcontainerref, componentref} from ' @Angular/core'; import {Common} from './common'; @Component ({selector:'My-app', providers: [], Template: '<div *ngif="User"> <div> name:{{user.username}}</div> <div> age:{{user.age}}</div> </div> & Lt;div *ngif="!user"> <div><button (click) ="Loadnext ()"> Add Data </button></div> <div> temporarily no data </div> </div>', directives: []}) Exportclassloadnexttolocation { PublicUser:any; Constructor ( PublicDcl:dynamiccomponentloader, Public_injector:injector, Public_elementref:viewcontainerref) {} loadnext () { This. Dcl.loadnexttolocation (Common, This. _elementref). Then (COMPONENTREF:COMPONENTREF)={Let instance=componentref.instance; instance.ref=componentref Instance.name='Add Data'; instance.finally. Subscribe (user) ={Componentref.destroy ();  This. user =user; })                returnComponentref; })    }}

Common.ts

Import {Component, Input, Output, Componentref, Eventemitter} from ' @Angular/core'; @Component ({Template: '<div> <div>{{name}}</div> <div><input type="text"[(Ngmodel)]="Data.username"Placeholder="User name"></div> <div><input type="text"[(Ngmodel)]="Data.age"Placeholder="Age"></div> <div><button (click) ="destory ()"> Submit </button></div> <div><button (click) ="Cancel ()"> Cancel </button></div> </div>    `}) Exportclasscommon{PrivateData: {username:string, Age:string} ={username:"', Age:"'} @Input () Name:string; @Input ()ref: Componentref; @Output ()finally=NewEventemitter (); Cancel () { This.ref. Destroy (); Console.log (' Cancel ')} destory () {Console.log ( This. Data);  This.finally. Emit ( This. Data); }}

Pass data between components through @input and @output

Componentresolver can also load components dynamically

Import {Component, Dynamiccomponentloader,componentresolver Injector, Viewcontainerref, componentref} from ' @Angular/core'; import {pagescomponent} from './pages.component'; @Component ({selector:'My-app', providers: [], Template: '<div *ngif="User"> <div> name:{{user.username}}</div> <div> age:{{user.age}}</div> </div> & Lt;div *ngif="!user"> <div><button (click) ="Loadnext ()"> Add Data </button></div> <div> temporarily no data </div> </div>  `,}) Exportclassloadnexttolocation { PublicUser:any; Constructor ( PublicDcl:dynamiccomponentloader, PublicViewcontainerref:viewcontainerref, Compiler:componentresolver) {compiler.resolvecomponent (pagescomponent). Then (Factory)=viewcontainerref.createcomponent (Factory,0, Viewcontainerref.injector)). Then (componentref:componentref) ={Let instance=componentref.instance; instance.ref=componentref Instance.name='Add Data'; instance.finally. Subscribe (user) ={Componentref.destroy ();  This. user =user; })            returnComponentref;    }); } loadnext () { This. Dcl.loadnexttolocation (Pagescomponent, This. Viewcontainerref). Then (COMPONENTREF:COMPONENTREF)={Let instance=componentref.instance; instance.ref=componentref Instance.name='Add Data'; instance.finally. Subscribe (user) ={Componentref.destroy ();  This. user =user; })                returnComponentref; })    }}

ANGUALR2 Dynamic Component Loader