How I disappear mat card when array is empty in Angular?

Question

This is my Angular HTML file code :

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
            <div class="card-container"> 
                <mat-card-title ><h3>{{getCartDetail.title1}}</h3> </mat-card-title>
            </div>
    </mat-card>

When "getCartDetails" array is empty, I got an error "Cannot read property 'title1' of undefined." How I set an empty string to getCartDetail.title1 or can I disappear that when the array is empty.

ruth · Accepted Answer · 2021-06-18T13:50:16.370

There are multiple methods

Option 1: Using *ngIf

You could check if the array is defined before using it. Since a single element can't have two structural directives, I'd wrap it in a <ng-container>.

<ng-container *ngIf="!!getCartDetails && getCartDetails.length">
  <mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
    <div class="card-container"> 
      <mat-card-title><h3>{{getCartDetail.title1}}</h3> </mat-card-title>
    </div>
  </mat-card>
</ng-container>

!!getCartDetails checks if the variable getCartDetails is defined. Check here for more info on double-bang !!.
getCartDetails.length checks if the array is empty

Here the <mat-card> would not be rendered when the condition fails.

Option 2: Safe navigation operator ?.

You could use safe navigation operator ?. to check if the variable is defined before accessing it's properties.

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
  <div class="card-container"> 
    <mat-card-title><h3>{{getCartDetail?.title1}}</h3> </mat-card-title>
  </div>
</mat-card>

Here the <mat-card> would be rendered with an empty <mat-card-title> when the title1 is unavailable.

Option 3: Using ||

Statements inside Angular template interpolation {{ }} are valid Typescript expressions, so you could use || to use an alternate value when the expression fails.

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
  <div class="card-container"> 
    <mat-card-title><h3>{{ getCartDetail.title1 || '' }}</h3> </mat-card-title>
  </div>
</mat-card>

Here the <mat-card> would be rendered with an empty <mat-card-title> when the title1 is unavailable.

score 2 · Answer 2 · answered Jun 18 '21 at 13:36

1.You can use a null check in the code with '?'

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
        <div class="card-container"> 
            <mat-card-title ><h3>{{getCartDetail?.title1}}</h3> </mat-card-title>
        </div>
</mat-card>

score 1 · Answer 3 · answered Jun 18 '21 at 13:35

1

You can use length check in array:

<ng-container *ngIf="array && array.length > 0">
  <mat-card *ngFor="let item of array">
  </mat-card>
</ng-container>

or u can use Elvis/safe navigation operator

 <h3>{{getCartDetail?.title1}}</h3>

answered Jun 18 '21 at 13:35

YogendraR

2,144
12
17

score 1 · Answer 4 · answered Jun 18 '21 at 13:36

Use ng-template for this validation, like this:

<ng-template [ngIf]="getCartDetails.length > 0">
    <mat-card *ngFor="let getCartDetail of getCartDetails" style="margin-bottom: 1em; ">
        <div class="card-container">
            <mat-card-title>
                <h3>{{getCartDetail.title1}}</h3>
            </mat-card-title>
        </div>
    </mat-card>
</ng-template>

How I disappear mat card when array is empty in Angular?

4 Answers4