ngIf first item from array returning "cannot read properties of undefined (reading '0') "


I am having trouble creating an ngIf statement in Angular. I am trying to show a div only when it would match a certain condition… but I keep getting this errorr in the browser console:

Cannot read properties of undefined (reading ‘0’)

What am I doing wrong?

My HTML is:

<div *ngIf="preSelectedPaymentOption[0].value === 3 && totalCartPrice > 380" class="payment-warning">
    <p>Lorem ipsum dolor sit!!!.</p>

This is how the data from the API looks like:
Api data console.log

And here is the TS code how I’m getting the data:

  getPaymentOptions() {
      data => {
        this.paymentData = data;
        this.preSelectedPaymentOption = this.paymentData.payments.filter(option => option.default === 1);
        console.log('Preselected payment method: ', => option));
      }, error => {
        console.log('Error', error);


Your preSelectedPaymentOption might be undefined at the start so changing your condition to following should fix the issue

*ngIf="!!preSelectedPaymentOption?.length && preSelectedPaymentOption[0].value === 3 && totalCartPrice > 380"

Answered By – jitender

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published