I'm creating a number of ModuleItemComponents using the following Angular markup:
<div #moduleItems *ngFor="let module of seriesItem.modules; let i = index">
<app-module-item [videoModule]="module" ></app-module-item>
</div>
and the following code lives in the corresponding .ts file:
@ViewChildren('moduleItems') moduleItems;
I'm using code in the ngAfterViewInit event to try and get a reference to each ModuleItemComponent:
ngAfterViewInit() {
let items: [];
items = this.moduleItems.map((m) => m.nativeElement.firstChild);
items.forEach((m) => {
const thisModule = (m as ModuleItemComponent);
thisModule.onSelectionMade.subscribe((result: VideoModule) => {
this.deselectOthers(result);
});
});
}
However, I get an error at the ".subscribe" line because the type of thisModule is app-module-item, not ModuleItemComponent.
I'm sure I'm doing something wrong - just not sure how to do this right. Any help appreciated.
You need put the variable reference in the
<app-module-item>
But in this case, you can use the own name of the class and forget the variable reference
And you can do
See that the name of the class is not between quotes -I supose the name of the class is ModuleItemComponent, else change for the name of the class-