CODEWITHSUNDEEP
angularinterpolation
M4n1
M4n1

Reputation: 47

Does Angular handle interpolation and one way binding the same way?

I am currently creating an application that frequently changes the text and images on a page. Chrome consumes almost the whole cpu after a few hours of running. Please note that it is not an option to just restart the browser if this problem arises.

I have now tried to disable the UI rendering and just receiving data updates from the server and the problem seems to be gone.

<img class="icon" src="{{myIcon1}}"/>
<img class="icon" [src]="myIcon2"/>

Does Angular update only the "src" attribute for the first line as it would for the second or does it always create a complete new instance of the whole component template if "myIcon1" changes?

Upvotes: 1

Views: 348

Answers (2)

Ankur Chauhan
Ankur Chauhan

Reputation: 100

Although Interpolation and data binding are alternate to each other. But the key difference between them is that if we can concatenate string in interpolation case. myIcon1 = "sample.jpg"; <img class="icon" src="https://www.sample/{{myIcon1}}"/>

Property Binding is used to set an element property to a non-string data value

    <button [disabled]='isDisable'>Click Me</button>

Changing disable property will disable/enable button accordingly. But if we use 

    <button disabled='{{isDisable}}'>Click Me</button>

Button will always be disable irrespective of isDisable Property

For more reference https://angular.io/guide/template-syntax#!#interpolation

Upvotes: 1

Mark Syrzysko
Mark Syrzysko

Reputation: 31

I think it updates the virtual DOM and in return, it renders the whole interface from scratch. But with Angular 8 they are implementing an incremental DOM. I've read about it on this site.

https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

Upvotes: 0

Related Questions