I'm facing an issue where a function called inside *ngFor is executing multiple times, more than the number of elements in the array tabsName. Here's the code snippet:
<mat-tab-group>
<mat-tab *ngFor="let tab of tabsName">
<ng-template mat-tab-label>
{{getTabName(tab)}}
<span class="badge">{{getTabCount(tab)}}</span>
</ng-template>
<div *ngTemplateOutlet="comments"></div>
</mat-tab>
</mat-tab-group>
<ng-template #comments>
<div class="col-sm-9 jj-pad-0">Deep</div>
</ng-template>
After implementing all lifecycle hooks of a component, I noticed that some methods are being called repeatedly.
I'm unsure if this behavior is correct or not.
The properties of tabsName include names and counts, retrieved from a service through a REST call.
tabsName : [{name:'tab1',count:'2'},{name:'tab2',count:'1'}]
Here's the associated TypeScript file:
export class TabsComponent implements OnInit {
@Input() tabsName: any;
@Input() template: TemplateRef<any>;
@Output() tabSelected: EventEmitter<any> = new EventEmitter();
constructor(private service: SomeService) {
}
getTabName(tab): string {
return this.service.configData[tab]['UILabel'];
}
getTabCount(tab): number {
if (this.service.dataMap) {
return this.service.dataMap.get(this.service.configData[tab]['dataType']).data.length;
}
}
onSelect(event) {
this.tabSelected.emit(event);
}
}