Access element tagnames from child in parent

Question

I have two components, ParentComponent and ChildComponent:

parent.component.html

<child-selector #parent></child-selector>

parent.component.ts

@ViewChild('parent', { read: ElementRef }) parent: ElementRef<any>;


doThis(event) {
    this.parent.nativeElement.childNodes.forEach(e => {
        if (e.tagName === 'GRIDSTER-ITEM') {
          console.log("do stuff here");
        }
      });
}

child.component.html

<gridster>
    <grister-item></gridster-item>
<gridster>

child.component.ts

The code would work if it would be the same component, the child html would be directly in the parent and #parent would be on element <gridster>.

What should I use instead of ElementRef? Or maybe another solution?

You should use <ng-content></ng-content> inside your parent template and @ContentChildren decorator to reference components inside — Patryk Uszyński

Jesse Buitenhuis Jesse Buitenhuis · Accepted Answer · 2019-04-18T12:02:42

You could make the gridster-item elements available to the child component.

child.component.ts

@ViewChildren(GridsterItemComponent) gridsterItems;

parent.component.ts

@ViewChild(ChildComponent) childComponent;

doSomething() {
  this.childComponent.gridsterItems.callSomeMethod();
}

Access element tagnames from child in parent

1 Answers