Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The angular brackets [] () {} what they bind and when to use which [duplicate]

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>
like image 352
ir2pid Avatar asked Apr 23 '19 08:04

ir2pid


People also ask

What are [] in Angular?

In Angular, there are two types of data binding, one-way data binding, and two-way data binding. In one-way data binding, the template expression {{}} and square braces [] are used to bind a property to the DOM.

What is the difference between [] and in Angular?

Angular is supported by all the popular mobile browsers. ng-bind is used to bind data from view to model and vice versa. Properties enclosed in “()” and “[]” are used to bind data between view and model.

What are these [] used for?

Parentheses are a pair of punctuation marks that are most often used to add additional nonessential information or an aside to a sentence. Parentheses resemble two curved vertical lines: ( ). A single one of these punctuation marks is called a parenthesis.

What does Angular's square bracket syntax [] signify?

The square brackets [...] represent the one-way property binding from the component logic (data) to the view (target element). This represents event binding, which allows the target to listen for certain events such as clicks and keypresses. This represents two-way data binding, which combines the above two syntaxes.


2 Answers

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.

like image 199
wentjun Avatar answered Oct 27 '22 07:10

wentjun


  • [class]="myclass" -> one way property binding, changes in variable class in the .ts will be reflected in the view. (Binding from typescript to HTML)
  • (ngModelChange)="mymodel" -> one way event binding, when a modelChange event occurs, do whatever is present in the expression, (one way binding from HTML to typescript)
  • [(ngModel)]="mymodel2" -> two way binding, changes in the variable mymode2 within typescript will be reflected in the view, if any change occurs in the view, like in an input, then that change will be reflected in typescript too.
  • <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/> -> interploation, as an when the value of data within "{{}}" will change, the value of the placeholder attribute will be updated
  • <button>{{'BUTTON_TEXT'|translate}}</button> -> again, interpolation, just not bound to any property.
like image 4
Ashish Ranjan Avatar answered Oct 27 '22 09:10

Ashish Ranjan