How to implement nested *ngFor in angular

Issue

I have json response which looks like below:

{
"hotel_name":"name",
"hotel_email":"hotel@gmail.com",
"contractList":[{
             "start_date": "2020-12-2",
             "end-date":"2020-12-10",
           }]
"roomsList":[{
            "type_name":"standard"

             },
             {
            "type_name":"premium"
             }]
}

I want to print this to the UI through angular. Therefore I used the following code.

<div class="content">
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div class="grid-container">
      <div *ngFor="let hotel of hotels; let i = index;">
  
        <mat-card class="example">
          <mat-card-title>{{ hotel.name }}</mat-card-title>
          <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotel[i].roomsList; let j = index ">
          <mat-card-content >
          
            <p>Room Details</p>
            
            <p style="color: darkcyan;">room[j].type_name</p> 
          </mat-card-content>
        </div>
        </mat-card>
      </div>
    </div>
  </div>
</div>

However, I am getting this error in the UI console. What am i doing wrong? Whats the correct way of printing

Solution

Error happened you are trying to access the array element of the hotel (the hotel variable is not an array. It's an object). You can solve the issue by replacing hotel(object) with hotels(array) in second nested loop

<div class="content">
  <div fxLayout="row wrap " fxLayoutGap="50px grid">
    <div class="grid-container">
      <div *ngFor="let hotel of hotels; let i = index;">
  
        <mat-card class="example">
          <mat-card-title>{{ hotel.name }}</mat-card-title>
          <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotels[i].roomsList; let j = index ">
          <mat-card-content >
          
            <p>Room Details</p>
            
            <p style="color: darkcyan;">room[j].type_name</p> 
          </mat-card-content>
        </div>
        </mat-card>
      </div>
    </div>
  </div>
</div>

You can also use For-of-Loop for your requirement.

<div class="content">
   <div fxLayout="row wrap " fxLayoutGap="50px grid">
      <div class="grid-container">
         <div *ngFor="let hotel of hotels">
            <mat-card class="example">
               <mat-card-title>{{ hotel.name }}</mat-card-title>
               <mat-card-subtitle>{{ hotel.address}}</mat-card-subtitle>
               <div *ngFor="let room of hotel.roomList">
                  <mat-card-content >
                     <p>Room Details</p>
                     <p style="color: darkcyan;">room.type_name</p>
                  </mat-card-content>
               </div>
            </mat-card>
         </div>
      </div>
   </div>
</div>

Answered By - Chamikara Samarasekara