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?

cezn · Accepted Answer · 2018-06-18 16:00:11Z

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) }

Franklin Pious · Accepted Answer · 2018-06-18 16:02:00Z

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; }

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related