Access directives of child components using ViewChildren

Question

For accessing the directives in a component, I have tried Angular 2: Get reference to a directive used in a component but this doesn't work for directives in the child components of the component.

The child components are created dynamically using ViewContainerRef.

 @ViewChildren(ViewRefDirective) allMyDirectives; 

//This doesn't work for directives in the child components

I have multiple different child components, that's why I can't specify the name of a single child component in ViewChild for accessing its directives.

Directive

@Directive({
  selector: '[view-ref-host]',
})
export class ViewRefDirective {
  constructor(public viewContainerRef: ViewContainerRef) {
   }
}

Parent component

<div>
  <div view-ref-host>Parent block
    <child-panel-one></child-panel-one>
    <child-panel-two></child-panel-two>
    <child-panel-three></child-panel-three>
  </div>
</div>

Child panel one component

<div>
  <div view-ref-host>Child panel one
    <!-- html here -->
  </div>
</div>

Child panel two component

<div>
  <div view-ref-host>Child panel two
    <!-- html here -->
  </div>
</div>

Child panel three component

<div>
  <div view-ref-host>Child panel three
    <!-- html here -->
  </div>
</div>

How can I use the ViewChild decorator to access all the directives in parent and child component?

@fateme: I have 2000 lines of code in it. Can't share. Using @ViewChildren(ViewRefDirective) allMyDirectives; gives me the directive in parent component, but don't include the child. — Prachi, Jun 19 '18 at 11:43
viewChildren is set in ```ngAfterViewInit``` maybe you forgot it. — Fateme Fazli, Jun 19 '18 at 11:44
If it wasn't used after view rendering, my parent component directive also wouldn't have loaded. You should have guessed that. And parent's rendering won't complete until all children are rendered. — Prachi, Jun 19 '18 at 11:46

score 3 · Accepted Answer · answered Jun 19 '18 at 16:29

You can define method in your parent component like:

allMyDirectives: ViewRefDirective[] = [];

registerRef(ref: ViewRefDirective) {
  this.allMyDirectives.push(ref);
}

and register directive in directive's constructor:

@Directive({
  selector: '[view-ref-host]',
})
export class ViewRefDirective {
  constructor(
    public viewContainerRef: ViewContainerRef,
    @Optional() parent: AppComponent
  ) {
    if (parent) {
      parent.registerRef(this);
    }
  }
}

Ng-run Example

Wouldn't this create a Circular dependency? – George Chondrompilas Apr 02 '19 at 14:33 — George Chondrompilas, Apr 02 '19 at 14:33

score 0 · Answer 2 · answered Jun 19 '18 at 11:35

0

The correct way to implement is: @ViewChild("MyCustomDirective") allMyCustomDirectives;

answered Jun 19 '18 at 11:35

Aditya Goswami

104
3

See the updated question. ViewRefDirective is the name of my directive. It is not a selector, but the directive name. See https://angular.io/guide/dynamic-component-loader#resolving-components – Prachi Jun 19 '18 at 11:40

Sachila Ranawaka · Answer 3 · 2018-06-19T12:46:13.463

0

you need to export the directive. Then only you can use it from parent or child. Then from parent bind it to a variable and access that variable using view child

@Directive({
  selector: '[view-ref-host]',
  exportAs:'viewRefDirective'  
})
export class ViewRefDirective {
  constructor(public viewContainerRef: ViewContainerRef) {
   }
}

<div>
  <div #cdire=viewRefDirective view-ref-host>Child panel one
    <!-- html here -->
  </div>
</div>

 @ViewChildren('cdire') allMyDirectives;

Update

you can do this using QueryList. in each Child, components add

@ViewChildren('cdire') children: QueryList<ViewRefDirective>;

In the parent, level add

@ViewChildren('cdire') allMyDirectives; 
@ViewChild(childPanelOneComponent) c1: childPanelOneComponent;
@ViewChild(childPanelTwoComponent) c2: childPanelTwoComponent;
@ViewChild(childPanelThreeComponent) c3: childPanelThreeComponent;

ngAfterViewInit() {
    this.c1.children.forEach((child) => child.showChildName());
    this.c2.children.forEach((child) => child.showChildName());
    this.c3.children.forEach((child) => child.showChildName());
  }

edited Jun 19 '18 at 12:46

answered Jun 19 '18 at 12:19

Sachila Ranawaka

39,756
7
56
80

Still, I'm getting parent component's directives only. It didn't work for child components. – Prachi Jun 19 '18 at 12:25
need to do the same thing to child components as well – Sachila Ranawaka Jun 19 '18 at 12:27
I have applied #cdire=viewRefDirective in all child component's html. – Prachi Jun 19 '18 at 12:31
did u add @ViewChildren to child component as well? – Sachila Ranawaka Jun 19 '18 at 12:32
No, because I need them to be fetched at parent level only. That's what my whole question is all about. – Prachi Jun 19 '18 at 12:34
I'm able to get the child if I'm using the selector statically, but I'm generating most of my child components using createComponent method of viewContainerRef object. So only static children are accessible through this. – Prachi Jun 19 '18 at 14:02

Access directives of child components using ViewChildren

3 Answers3