Sometimes, we want to fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular.

In this article, we’ll look at how to fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular.

How to fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular?

To fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular, we should make sure the variable we’re rendering is defined.

For instance, we write

{{ foo?.bar?.name }}

to use the safe navigation operator if foo and bar are objects.

And if we want to do the same check for arrays, we can use *ngIf by writing something like

<div *ngIf="arr && arr.length > 0">
  {{ arr[0].name }}
</div>

We use arr && arr.length > 0 to make sure arr is defined and it has length bigger than 0.

Conclusion

To fix Error: TypeError: Cannot read property ‘…’ of undefined with Angular, we should make sure the variable we’re rendering is defined.