How to get DOM child elements from an already instantiated Angular Component inside the Component itself?

Do you mean classic getElementsByTagName() in javascript? You can indeed get elements like that and apply custom logic in your ts that will handle their template display. If you mean exactly something like <mat-icon>refresh</mat-icon>, then you'd need to make your own libraries or plugins. Much easier and closest to that, though, is to define your own components that will have selector you need and handle all the content and attributes as you like, for example: <your-selector [icon]="thatSillyIconWithAnElephant"></your-selector> and then with @Input grab the value and handle it in ts.

ProgrammerAnswered 1 years ago · Answer 2

Example - in parent component, you can even pass a method into your child component and it will run within the context of the parent.:

gotoDetail(hero: Hero): void {
    this.entry.clear();
    const factory = this.resolver.resolveComponentFactory(DynamicModalChildComponent);
    this.dynamicModalComponentRef = this.entry.createComponent(factory);
    this.dynamicModalComponentRef.instance.hero = hero;
    // Pass parent context to child in order to close modal hierarchically (parent/child component relationship).
    // This approach is less verbose and makes it easier to unit test than a service in my opinion.
    this.dynamicModalComponentRef.instance.parentContext = () => this.destroyComponent();
}

How to get DOM child elements from an already instantiated Angular Component inside the Component itself?