angularjs - How to define place where dynamic components would be injected? -
my components injected dynamical. how define place without wrapping?
import { component, viewcontainerref, componentresolver } '@angular/core'; constructor( private apiservice: apiservice, private viewcontainerref: viewcontainerref, private componentresolver: componentresolver) { } create() { this.componentresolver.resolvecomponent(piechart).then((factory) => { this.viewcontainerref.createcomponent(factory); }); }
and want inject them in div.
<div class="someclass"> <!--how inject them here? --> </div>
there 2 ways:
injecting
viewcontainerref
in question, new components added below componentusing target element in components template template variable
<div #target></div>
,@viewchild('target', {read: viewcontainerref}) viewcontainerref:viewcontainerref;
viewcontainerref
of<div>
. added elements again added below<div>
createcomponent()
allows pass index. default new components added @ end, if pass index inserted @ position.
(not tested) index 0
should able add new element before target element.
if add more 1 component same viewcontainerref
can pass index insert new component before elements added earlier.
Comments
Post a Comment