Angular 2+: check if dom element is child of another dom element

Question

I have the following code:

import { Component, OnInit, OnDestroy } from "@angular/core";

@Component({
  selector: 'sidebar-component',
  templateUrl: './sidebar.component.html'
})

export class SideBarComponent implements OnInit, OnDestroy {

  constructor() {}

  ngOnInit(): void {
      window["isSideBarElement"] = this.isSideBarElement;
  }

  ngOnDestroy(): void {}

  private isSideBarElement(event): boolean{
    let element: HTMLElement = event.target as HTMLElement;
    //mising code check if the target of the event is a child of the component
  }

  private getDOMElement(): HTMLElement{
    return document.getElementsByTagName("sidebar-component")[0] as HTMLElement;
  }

}

In the function isSideBarElement I want to check if the target of the event is a child of the component.

Any sugestions?

score 9 · Accepted Answer · answered Jun 18 '18 at 16:00

Inject ElementRef (represents reference to host html element) inside constructor:

constructor(private eleRef: ElementRef) {}

And inside isSideBarElement check if target is its descendant:

private isSideBarElement(event): boolean{
  let element: HTMLElement = event.target as HTMLElement;
  return (this.eleRef.nativeElement as HTMLElement).contains(element)
}

score 0 · Answer 2 · answered Jun 18 '18 at 16:02

Pass the elementRef of the component as parent and event.target as the child.

   isDescendant(pParent: any, pChild: HTMLElement) {
    try {
      while (pChild !== null) {
        if (pChild === pParent) {
          return true;
        } else {
          pChild = (pChild.parentNode as HTMLElement);
        }
      }
    } catch (e) {
      console.warn('isDescendant ', e);
    }
    return false;
  }

Angular 2+: check if dom element is child of another dom element

2 Answers2