ngIf need to be handled in ngcontainer

Question

when update flag is set to true, need to check whether field has any change in value. If value changed need to strikethrough old value and updated new value in bold. this works for totalMarks but I couldn't handle this for Subject marks. Also how to hide newData NA template if both the value are NA or empty. the structure of html should be as same as Totalmarks for subjectMarks as well.

html:

      <div class="mt-15 field"> 
      <p>Total marks</p> <div 
      *ngIf="!update">{{ 
      newData?.totalMarks|| 'N/A' 
        }}</div> <div 
       *ngIf="update" 
[class]="checkCss('totalMarks')"> 
<span>{{ newData?.totalMarks || 
'N/A'}}</span><br> <strong>{{ 
 oldData?.totalMarks || 'N/A'}} 
  </strong> </div> </div>

---

<div class="field">
  <p>Subject Marks</p>
  <div *ngIf="update" [class]="checkCss('marks')">      
    <span><ng-container
      [ngTemplateOutlet]="newData?.marks?.length ? MultiTemplate : NATemplate"

      [ngTemplateOutletContext]="{items: newData?.mark, map: dataMap.marksMapping}">
    </ng-container></span><br>
      <strong><ng-container
        [ngTemplateOutlet]="oldData?.marks?.length ? MultiTemplate : NaTemplate"
        [ngTemplateOutletContext]="{items: oldData?.marks,map: dataMap.marksMapping}">
      </ng-container></strong>
  </div>
  <div *ngIf="!update">
  <ng-container
    [ngTemplateOutlet]="oldData?.marks?.length ? MultiTemplate : NaTemplate"
    [ngTemplateOutletContext]="{items: oldData?.marks,map: dataMap.marksMapping}">
  </ng-container></div>
</div>
</div>

<ng-template #MultiTemplate let-items="items" let-map="map" let-hyphen="hyphen">
  <span *ngFor="let item of items || []; let i = index">
    <span *ngIf="i">{{ _ }}</span>
    <span *ngIf="hyphen">{{ item }} &hyphen;</span>
      {{ formGroup ? map?.[item] : item }}
    </span>
    </ng-template>

<ng-template #NaTemplate><div>NA</div></ng-template>

ts:

    getClass = (fieldName: 
   string) => {
    const originalValue = 
    this.oldData?.[fieldName]
     const currentValue = 
     this.newData?.[fieldName]
     return originalValue !== 
      currentValue ? 'updated' : 
     'hidden'
      }

css:

      .hidden {
      strong {
     display: none;
       }

     br {
     display: none;
     }

     span {
    font-weight: regular;
     }
    }

  .updated {
      span {
    text-decoration-line: line- 
     through;
     }

    strong {
    color: #db0011;
    display: unset;

   span {
     text-decoration-line: none;
    }
   }

  br {
   display: unset;
   }
  }

Answer 1

Please change condition in html and update html code as below.

<div class="field">
  <p>Subject Marks</p>
  <div *ngIf="update" [class]="checkCss('marks')">
    <span>
      <ng-container *ngIf="newData?.marks?.length; else NATemplate"
        [ngTemplateOutlet]="MultiTemplate"
        [ngTemplateOutletContext]="{ items: newData?.marks, map: dataMap.marksMapping }">
      </ng-container>
    </span><br>
    <strong>
      <ng-container *ngIf="oldData?.marks?.length; else NaTemplate"
        [ngTemplateOutlet]="MultiTemplate"
        [ngTemplateOutletContext]="{ items: oldData?.marks, map: dataMap.marksMapping }">
      </ng-container>
    </strong>
  </div>
  <div *ngIf="!update">
    <ng-container *ngIf="oldData?.marks?.length; else NaTemplate"
      [ngTemplateOutlet]="MultiTemplate"
      [ngTemplateOutletContext]="{ items: oldData?.marks, map: dataMap.marksMapping }">
    </ng-container>
  </div>
</div>

<ng-template #MultiTemplate let-items="items" let-map="map" let-hyphen="hyphen">
  <span *ngFor="let item of items || []; let i = index">
    <span *ngIf="i">{{ hyphen }}</span>
    <span>{{ formGroup ? map?.[item] : item }}</span>
  </span>
</ng-template>

<ng-template #NaTemplate><div>NA</div></ng-template>