Menu
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>
352
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.
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.
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.
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.
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.
199
[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.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
