What the Angular brackets, [] () {}, bind and when to use which

Issue

I see the brackets are used for data binding, but what's the difference?

The below snippets are the ones I use frequently. But mostly taken as documented without understanding why.

• [class]="myclass"
• (ngModelChange)="mymodel"
• [(ngModel)]="mymodel2"
• <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/>
• <button>{{'BUTTON_TEXT'|translate}}</button>

Solution

All the above syntax can be found at this page of the Angular Documentation. You can read up more about Angular's Template Syntax on other blogs if you wish.

1) [class]="myclass"

The square brackets [...] represent the one-way property binding from the component logic (data) to the view (target element).

2) (ngModelChange)

This represents event binding, which allows the target to listen for certain events such as clicks and keypresses.

3) [(ngModel)]="mymodel2"

This represents two-way data binding, which combines the above two syntaxes. The property's data is displayed on the view, and at the same time, the property will be updated when the user makes any changes.

4) <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/>

You are simply importing another component into your current component, and the placeholder attribute is assigned the value of the component property INPUT_TEXT through template interpolation.

The pipe operator (|) allows you to carry out transformation of the displayed value. Pipes accept an input and, return the respective transformed value

5) Similar to 4.

Answered By - wentjun