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

Issue

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">
   <ion-label>
    <h3>Atention!</h3>
    <p>Lorem ipsum dolor sit!!!.</p>
  </ion-label>
</div>

This is how the data from the API looks like:

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

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

Solution

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