@Input() is undefined


I have 2 function in my angular component, first is for table and second returns list which is for child component. I call second one function firstly, but @Input is undefined. Also I try to call that function in child component , but there is also undefined. Below is two photo of my problem. OperationTypesFilter is for input. If I set value to operationTypesFilter
It works.


<ul class="pl-1">
    <li *ngFor="let filter of filters; index as i">
        <mat-checkbox color="primary" (change)="onItemSelect(filter,i)" [(ngModel)]="filter.checked">
            {{ filter.value | translate }}


this.list.forEach((item, id) => {
      this.filters.push({ id: item.id, value: item.name, checked: false })

>Solution :

Issue: OperationTypesFilter is undefined because it is not set & is waiting to be set in subscribe,


  1. if it is required before loading the child component add a *ngIf="OperationTypesFilter" so it only loads when the value is available.

  2. if it will work with an empty array as well, set it to [] initially till the response comes back.

Leave a ReplyCancel reply