Currently, I am in the process of compiling a list of components using data from the Back End. I have implemented a ContentChild object to obtain their reference, however, it seems to be empty. I also attempted using ViewChild, but it only captures the first component.
Despite trying various solutions, none of them seem to work as expected. I suspect that this issue arises due to the fact that the child components are generated after the class is initialized (though I could be mistaken).
This is the code snippet of what I have done so far:
table.component.ts
export class tableComponent {
@ContentChildren('relation') relationElements: QueryList<RelationElement>;
}
colapseColumn(){
this.table.resetChildElements();
console.log(this.relationElements);
}
table.component.html
<ng-container *ngFor="let entity of table.tableEntity">
<tr class="listTable--bodyRow" >
<td class="listTable--bodyElement"
*ngFor="let element of entity.printableElements">
<container-relation
#relation
[element]="element"
(collapseColumn)="colapseColumn();">
</container-relation>
</td
</tr>
</ng-container>
UPDATE
After attempting with ViewChildren:
@ViewChildren('relation') relationElements: QueryList<any[]>;
Upon inspecting the output of relationElements, I receive the following result:
QueryList {_dirty: false, _results: Array(0), _emitter: EventEmitter
The desired outcome should enable me to perform actions like:
this.relationElements.map(re => re.extended = false);