What is the difference between the types of Binding in Angular?

Question

In Angular (not Angularjs) there are some ways to Binding Component properties to View.

<img src="{{ boundProperty }}">
<img bind-src="boundProperty">
<img [src]="boundProperty">

Is there a correct way to bind? In which situations each of the cited items should be used and why?

Answer 1

There is no correct way to perform Data Binding, each situation can be used the way you want and/or can apply. There are 4 ways:

1. Interpolation: {{ valor }}

   • associates component information to template (HTML)

2. Property Binding: [propriedade]="valor"

   • associates component information to template (HTML)

3. Event Binding: (evento)="handler"

   • associates template (HTML) information to the component

4. Two-Way Data Binding: [(ngModel)]="propriedade"

   • associates information between both, that is, keeps both updated (component and template (HTML).

Source: https://www.youtube.com/watch?v=rlVxG2lG1Tk&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=10