I made a very simple demo app to explain what i want exatly to do.
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
a=1
b=2
increase(){
this.a++
this.b++
}
}
template:
<p>{{ a }}</p>
<p>{{ b }}</p>
<button type="button" (click)="increase()">Increase</button>
How can i achive it to when i click on increase button on display "variable a" change but "variable b" not.I mean just on the display...
Make
b
private and use a different variablebDisplay
for the template binding. Then you can keep track of the value ofb
and update the view by updatingbDisplay
whenever you need it.Apart from that, I do not see any solution. Angulars goal is to keep model and view in sync, so you cannot get around having the view updated at some point if the bound value changes.
In your example there actually is a way to not update
b
in the view on the first button click (but it will make up for it on the second click): Use ChangeDetectionStrategy.OnPush in the component and increase the value ofb
inside a setTimeout:a
will be updated in the view, because the click triggers a change detection cycle and marks the component to be checked for changes. Afterwards, setTimeout will elapse, which triggers a new CD cycle, but does not mark the component to be checked, sob
will not be updated in the view. But with the next click,a
will again be updated andb
will be updated in the view to the value from the first click.