I have an HTML Div element with angular component children inside the div. Somehow the angular template is like this.
<mat-radio-group [(ngModel)]="selectedRadioValue">
<div
#radioButtonDiv
*ngFor="let opt of getInputPayload(); index as optIndex"
>
<mat-radio-button [value]="opt">
{{ opt.label }}
</mat-radio-button>
<ng-container *ngIf="someCondition === true">
<app-my-component [attr]="opt.foo"></app-my-component>
</ng-container>
</div>
</mat-radio-group>
I obtained the reference to the outer div element using @ViewChildren
@ViewChildren('radioButtonDiv') radioButtonDiv: QueryList<ElementRef<HTMLDivElement>>;
How can I access the <app-my-component> component class within the radioButtonDiv QueryList?
I attempted to use querySelector() from the nativeElement of the outer div.
this.radioButtonDiv.forEach((rbd, index) => {
if (index === findIndex) {
// Ignore the setTimeout.
setTimeout(() => {
const findChild = rbd.nativeElement.querySelector('app-formulir-medis-attribute');
}, 500);
}
});
However, in the code above, findChild returns the nativeElement of the <my-component> Component and not the Angular component, making it difficult to access its attributes and properties. How do I obtain the MyComponent class from the above element ref?
Thank you!