<div class="container">
  <div class="notification-container">
    <app-notification-icon [notificationCount]="notificationCount" (click)="togglePopup()"></app-notification-icon>
    <div class="popup" *ngIf="popupVisible">
      <h3>Notifications</h3>
      <table>
        <thead>
          <tr>
            <th>Notification ID</th>
            <th>Created Date</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let cu of noti">
            <td>{{ cu |json}}</td>
       
        
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="ag-theme-alpine">
    <ag-grid-angular 
      style="width:auto; height: 300px; border: 1px solid black;color:black"
      class="ag-theme-alpine"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  </div>
</div>

this is my html file here i am able to display the json as shown in picture …but when i try to access individual items it is showing error {{ cu.id}} is showing error ..

How i can display individual items in json file …my Model interface is

export interface Notification {
    id: number;
    description: string | null;
    doctype: string | null;
    docId: number;
    customerRequirement: any | null;
    taskInitiation: any | null;
    identityUser: any | null;
    notificationby: string | null;
    createddate: string;
  }