title: Display contents from array of array in angular
body: <p>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:</p>
  <p>JSON:</p>
  <pre><code>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'
          },
        ]
  
      }
    ]
  </code></pre>
  <p>HTML :</p>
  <pre><code>&lt;button mat-button [matMenuTriggerFor]=&quot;notification&quot;&gt;
      &lt;mat-icon class=&quot;notification-button&quot;&gt;notifications&lt;/mat-icon&gt;
  &lt;/button&gt;
  
  &lt;mat-menu #notification=matMenu&gt;
      &lt;p class=&quot;notification-header&quot;&gt;Notifications&lt;/p&gt;
      &lt;div *ngFor=&quot;let notification of notifications&quot;&gt;
          &lt;p class=&quot;notification-date-section&quot;&gt;{{ notification?.date }}&lt;/p&gt;
          &lt;button mat-menu-item&gt;
              &lt;div *ngFor=&quot;let notificationContent of notification?.notificationContents&quot;&gt; 
                  &lt;img [src]=&quot;notification?.notificationContent?.icon&quot; height=&quot;25px&quot;&gt;
                  {{ notification?.notificationContent?.description }}
              &lt;/div&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/mat-menu&gt; 
  </code></pre>