I have the following:

<ion-input slot="end" (click)="presentPicker('custom1')" value {{conversion.formatDisplayedTime(dta.custom1)}}" readonly="true" type="text"></ion-input>
        
<ion-icon *ngIf="conversion.checkTimeNotNull(dta.custom1)" 
(click)="appendTotalTime('custom1')" color="success" slot="end" name="checkmark-outline"></ion-icon>

As can be seen the icon has ngIf conversion.formatDisplayTime(), this is called initially when the page loads. I am wondering how to re-render it when the value in the above input is changed? Is there a way to link it?

Thanks All

CodePudding user response：

There can be multiple reasons for this problem, but to get rid of it and have a cleaner code, you should konw something.

Biding a method/function for a value is a mistake, of course there is exception and event bindings (like (click)="onClick") are perfectly corrects. BUT bindings like [class]="getClass()" or <p> {{getText()}} </p> are really dirty. That's because angular has no way to know when the value of the function result will change, so it will call it in an infinite loop, even if it's always the same result.

The best way to perform this kind of binding is forcing attributes usage with one big rule: Change result only when you change input. For simple values that can require Observables, Subjects, ...

In your case, I think you are trying to format a date. The best way to format tempate without changing value are Angular Pipes, and especially Angular DatePipe. If it doesn't fit for your own usage, you can easily create your custom Pipe, there are many tutorials and this is reactive because Angular will recalculate transformation value only on input change.

Hope this helps.