ERROR field is undefined : Angular component inheritance

Question

I have this issue while trying to render my component :

ERROR TypeError: _co.fooField is undefined View_FooComponent_0 FooComponent.html:56

My componenet is extending from a typescript class :

@Component({
  selector: 'foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.scss']
})
export class FooComponent extends FooParentModal implements OnInit {
   ...
}

export class FooParent implements OnInit {
  fooField;
  ...
}

Answer 1

I found the issue wich was a reference to my "undefined" field (in parent class) in my template :

<button *ngIf="foo.id" type="button"...>

In fact it is initialized while showing the component (a primeng p-dialog) :

<p-dialog [(visible)]="display" (onShow)="onShowDialog()" (onHide)="onCloseDialog()" [modal]="true">
...
</p-dialog>

The solution I applied is to check that the foo field is not null in *ngIf condition like this

<button *ngIf="foo && foo.id" type="button"...>