4

I have a parent component (say ParentComponent) and I need to add many children components (say ChildComponent1, ChildComponent2, ... ChildComponentN) to it dynamically. Each component is different.

I followed this to solve my problem : Angular 2 RC5-6 - Dynamically insert a component

But in order to access the template element (a simple <div>) that will hold my ChildComponents through @ViewChild, I need to set a template local variable on this <div> element.

However, in my case, I can't do that because I can't set a template local variable with a dynamically name. So my <div> element is only characterized by an unique id attribute that is added dynamically (like <div id="child1">).

Is there any way to access my <div> element through the component implementation in typescript without template local variable ?

Improve this question
2
  • can you add a directive to the element? like <div mydir...? Commented Jun 30, 2017 at 13:22
  • @Maximus Yes I can add a directive to the <div> (but each <div> must have something unique in order to add the right ChildComponent template under the right <div> element) Commented Jun 30, 2017 at 13:33

2 Answers 2

Reset to default
2

I think you can create a directive mydir that will expose an element:

@Directive({selector: 'mydir'})
export class MyDir {
  @Input('mydir') id;
  constructor(public vc: ViewContainerRef) {

  }
}

and then apply it to the div:

<div [mydir]="child1">
<div [mydir]="child2">

and then query it from the parent component:

@ViewChildren(MyDir) children;

ngAfterViewInit() {
   const specificID = 'child1';
   const instance = children.find((c)=>{c.id === specificID});
   const vc = instance.vc;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

I think that could works, but the @ViewChildren gives me a QueryList<MyDir>. I need a ViewContainerRef in order to add my child component template under the <div> element. Do you have any idea on how I could : 1) get a specific <div> element by the id through the directive ? 2) get the ViewContainerRef of this specific <div> element ?
@Dartz, see my edit. @ViewChildren will give you instances of MyDir, but on each instance you will find vc which will be a reference to the view container
That almost works, but for an unknown reason, the debugger shows that the id of the directive is always undefined (I am not very comfortable with directives). I have a warning of my IDE on the @Input line of the directive : [tslint] In the class "MyDir", the directive input property "id" should not be renamed.Please, consider the following use "@Input() id: string" (no-input-rename). But if I write @Input() id: string;, I have an angular error on application loading : Error: Template parse errors: Can't bind to 'mydir' since it isn't a known property of 'div'..
@Dartz, tslint is not a problem. Can you show you code? I don't know where you get child1 and child2 values
Sure. Directive, Template, Component. I have hardcoded the id in the template to simplify debugging.
|
0

If you have angular 4 you can use *ngComponentOutlet="dinamicCompomponent" for insert component dinamically

Improve this answer

3 Comments

Yes, but I would have the same trouble. In fact, I need to access the children components in the typescript of the parent component in order to set up the children components properties (because @Input and @Output are not supported yet by ngComponentOutlet).
Use @ViewChild() in parent component
But @ViewChild needs a selector, which is the point of my question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.