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;
...
}
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"...>