Angular 2.1 append component dynamicly inside directive

Question

I am a beginner in the angular 2.1. I Want to decorate some elements for the automatical translation and I am going to use a directive, it have to look like:

<span customDirectiveTranslation="translateble">{{translateble}}</span>

or just

<span customDirectiveTranslation>{{translateble}}</span>

I can use the Renderer inside directive class (createElement), but by this way I can append only simple elements like span.

how can I render component inside another component by custom directive? Thanx

Community · Accepted Answer · 2017-05-23 11:46:48Z

2

constructor(
    private target:ViewContainerRef, 
    private componentFactoryResolver: ComponentFactoryResolver, 
    private compiler: Compiler) {}

ngAfterViewInit() {
  this.createComponent();
}

createComponent() {
    let factory = this.componentFactoryResolver.resolveComponentFactory(MyDynamicComponent);
    this.cmpRef = this.target.createComponent(factory)
}

See also Angular 2 dynamic tabs with user-click chosen components

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Oct 19, 2016 at 17:58

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

10 Comments

VVildVVolf Over a year ago

but in the link some code of my directive, I have got an exception: EXCEPTION: Error in ./TagComponent class TagComponent - inline template:0:0 caused by: No component factory found for TestComponentComponent

Günter Zöchbauer Over a year ago

You need to add TestComponentComponent to entryComponents in @NgModule() so that a factory is created.

VVildVVolf Over a year ago

O_O I cannot belive

VVildVVolf Over a year ago

By this way the new component will be created after (or before) the directive-marked component, can i put the new component inside?

Günter Zöchbauer Over a year ago

No, only as sibling. You need a ViewContainerRef of an element inside the element, then you can add it inside.

|

Collectives™ on Stack Overflow

Angular 2.1 append component dynamicly inside directive

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related