ERROR TypeError: Cannot read property 'isJson' of undefined

I have a angular application and I am using isJson propertie.

But I get this error:

dossier-correspondence.component.html:22 ERROR TypeError: Cannot read property 'isJson' of undefined

SO I do this, what is recommended:

<div *ngIf="!item?.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

But I still this error.

The complete flow is like this:

DossierCorrespondenceComponent:

<app-dossier-correspondence-item
  [item]="single"
  (goBack)="goBack($event)"
  *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

DossierCorrespondenceItemComponent:

<div *ngIf="!showFile" class="dossier-correspondence-item">
  <section class="correspondence-item backslab" [ngClass]="{'backslab-clickable': item?.hasFile}" (click)="openPdf(item.dossierEntryId)">
    <div *ngIf="item?.hasFile" title="Open PDF"
      class="trigger correspondence-item-pdf-button font-darkest">
    <!--<svg style="fill: currentColor" width="32" height="32" viewBox="0 0 24 24"> &lt;!&ndash; paperclip svg &ndash;&gt;-->
      <!--<path d="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z" />-->
      <i class="fa fa-file-pdf-o fa-2x"></i><button class="button">Open PDF</button>
    </div>
    <div class="correspondence-body">
            <div class="correspondence-item-p correspondence-item-date">
        <i class="fa fa-calendar font-darkest"></i>
        <p class="correspondence-item-text font-darkest">{{ item?.date | date:"dd-MM-y HH:mm" }}</p>
            </div>
            <div class="correspondence-item-p correspondence-item-subject">
        <i class="fa fa-tag font-darkest"></i><p class="correspondence-item-text font-darkest">{{ item?.name }}</p>
      </div>
   <div *ngIf="item.jsonSummary?.length > 0">

            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item?.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>
                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>
        </div>
    </section>
  <section class="correspondence-item correspondence-item-buttons">
    <div class="dossier-buttons">
      <button type="button" class="button correspondence-back-button" (click)="handleGoBack()">Terug naar overzicht</button>
    </div>
    <p class="iframe-hasError" *ngIf="canOpenBlob && item.summary">
      Kun je dit bericht niet bekijken ? <span class="clickable underlined" (click)="openInNewTab()">Klik hier</span>
    </p>
  </section>

</div>

So how to fix this?

THank you.