Angular - Template updates when it shows just properties but doesn't update if there are functions in it

Question

In my angular project, template updates perfectly when properties of model change, if it shows model properties directly:

<table>
  <thead>
  <tr>
    <th></th>
    <th>State</th>
    <th>Name</th>
    <th>Type</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let Discount of Discounts">
    <td><button type="button" (click)="Edit(Discount)">Edit</button></td>
    <td>{{ Discount.enabled }}</td>
    <td>{{ Discount.name }}</td>
    <td>{{ Discount.type }}</td>
  </tr>
  </tbody>
</table>

But template doesn't update if pipe or function are used:

<td>{{ fun1(Discount.enabled) }}</td>
<td>{{ Discount.name }}</td>
<td>{{ Discount.type | pipe1 }}</td>

fun1 or pipe1 are simple functions that just return a string.

fun1 (in: boolean) {
   if (in)
     return 'message1';
   else 
     return 'message2'; 
}

enabled and type are boolean. I even use ChangeDetectorRef.detectChanges() after any change on model properties. But it doesn't work. What is the problem? please help me.

I create this project on stackblitz. When boolean field such as "enabled" change from true to false, template does not update. But it works for false to true!

stackblitz.com/edit/angular-ivy-vezupt

Answer 1

Thanks @Alexis and @MikeOne

Here your set Discount.enabled and Discount.type as boolean, But in your DiscountEditComponent return those properties as string like below one.

{
 enabled: 'false'
 id: 2
 name: "dis2"
 type: 'false'
}

I updated those attributes using ngModelChange when the select element has changed.

Ref: Updated Stackblitz