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

score 2 · Accepted Answer · edited May 23 '17 at 11:46

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 '17 at 11:46

Community

1
1

answered Oct 19 '16 at 17:58

Günter Zöchbauer

623,577
216
2,003
1,567

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 – VVildVVolf Oct 19 '16 at 19:41
1

You need to add `TestComponentComponent` to `entryComponents` in `@NgModule()` so that a factory is created. – Günter Zöchbauer Oct 19 '16 at 19:44
1

O_O I cannot belive – VVildVVolf Oct 19 '16 at 19:49
By this way the new component will be created after (or before) the directive-marked component, can i put the new component inside? – VVildVVolf Oct 21 '16 at 13:15
1

No, only as sibling. You need a `ViewContainerRef` of an element inside the element, then you can add it inside. – Günter Zöchbauer Oct 21 '16 at 14:54
Thanx for your response, can i get it inside the Directive's class? basicly I have to have the common directive for all tags which can contain tags... – VVildVVolf Oct 21 '16 at 15:32
I don't get what you mean by "common directive for all tags". You can try `@ContentChild(xxx, {ViewContainerRef})` in the directive to get a `ViewContainerRef` where `xxx` is a template variable of the element in the component or the type of a component or directive on the element that should work as target. I have seen it mentioned but I haven't tried if this actually works. – Günter Zöchbauer Oct 21 '16 at 15:37
I mean, that I want to be able to apply my directive to all tags, for example: {{text}} will be text
translation
or
markupble text
will be
markupble text
english translation
german translation
– VVildVVolf Oct 21 '16 at 19:25
Then you need a selector in the directive that matches all these elements. You can use `selector: '[translatable]'`. Have you considered using a pipe instead of a directive? – Günter Zöchbauer Oct 22 '16 at 10:57
Please add full code. where is private compiler: Compiler used? where you defined this.cmpRef? – Muhammad Inaam Munir Aug 07 '19 at 21:38

Angular 2.1 append component dynamicly inside directive

1 Answers1