Currently, I am encountering an issue while attempting to locate components nested within sub child components.
To illustrate what I am aiming for, here is an example:
import { Component, OnInit, ContentChildren, ElementRef, QueryList } from '@angular/core';
@Component({
selector: 'app-grand-parent',
template: '<ng-content></ng-content>',
})
export class GrandParentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'app-parent',
template: '<ng-content></ng-content>',
})
export class ParentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'app-child',
template: '<ng-content></ng-content>',
})
export class ChildComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'app-child-profile',
template: '<div>Child Profile</div>',
})
export class ChildProfileComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'my-app',
template: `
<div>
<app-grand-parent>
<app-parent>
<app-child>
<app-child-profile></app-child-profile>
<app-child-profile></app-child-profile>
<app-child-profile></app-child-profile>
</app-child>
</app-parent>
</app-grand-parent>
</div>`
})
export class AppComponent implements AfterContentInit {
@ContentChildren(ChildProfileComponent) profiles: QueryList<ChildProfileComponent>;
ngAfterContentInit(): void {
console.log(this.profiles);
}
}
A complete example can be found at the following link: https://stackblitz.com/edit/angular-rqh8gm
I prefer not to utilize ngProjectAs since I aim to dynamically query elements.
Although I was able to locate the component through its parent component, I am curious if there is a method to re-append it to the grand parent component?