[Fixed] Display contents from array of array in angular

Issue

Here I am creating a dynamic notification button. So, I created a JSOn data. In my Json data I have notifications array which contain date and notificationcontent which is also an array. notificationcontent contains icon and description. I am not able to display this two from notificationcontent. I am adding my code here:

JSON:

notifications : any[] = [
    {
      date:'25 March,2021 9:20 A.M',
      notificationContents : [
        {
          icon : '../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
      ]

    },
    {
      date:'23 March,2021 10:28 P.M',
      notificationContents : [
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
      ]

    },
    {
      date:'20 March,2021 10:28 A.M',
      notificationContents : [
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
        {
          icon : '../../../../assets/img/gucci.jpg',
          description: '20% Discount in Gucci Products'
        },
      ]

    }
  ]

HTML :

<button mat-button [matMenuTriggerFor]="notification">
    <mat-icon class="notification-button">notifications</mat-icon>
</button>

<mat-menu #notification=matMenu>
    <p class="notification-header">Notifications</p>
    <div *ngFor="let notification of notifications">
        <p class="notification-date-section">{{ notification?.date }}</p>
        <button mat-menu-item>
            <div *ngFor="let notificationContent of notification?.notificationContents"> 
                <img [src]="notification?.notificationContent?.icon" height="25px">
                {{ notification?.notificationContent?.description }}
            </div>
        </button>
    </div>
</mat-menu> 

Solution

You do not have to specify notification inside notification?.notificationContents loop.

<div *ngFor="let notificationContent of notification?.notificationContents"> 
    <img [src]="notificationContent?.icon" height="25px">
    {{ notificationContent?.description }}
</div>