Today, I am going to cover hot topic of the market Angular 2. Just a few days ago Angular 2 was released and everyone very excited to know about Angular - 2 then compare to AngularJs.
One thing I tell you there is no connection between AngularJs and Angular - 2. So Angular 2 has own concept and support ECMA - 6 (which is the latest version of JavaScript).
AngularJs is supporting ECMA - 5 so there is the main difference between AngularJs and Angular 2.
As we know in AngularJs by default support two-way binding so we can say AngularJs added $watch on each control which is use ng-model.
So there are the performance issues of AngularJs, Angular 2 has overcome those issues so that provides more binding types so you can choose based on your requirement where you want which type of binding.
Angular 2 support four types of binding
- Interpolation
- One Way Binding
- Two Way Binding
- Event Binding
1. Interpolation
Interpolation is the easiest and best-known way of data binding. In AngularJs, it looked likes this:
<h1>{{vm.student.name}}</h1>
In Angular 2, we can still use the curly braces, but we can omit controller name or vm, because we already have the context. so here we can use directly object or variable name.<h1>{{student.name}}</h1>
2. One Way Binding
The way we used to apply one-way binding is ng-bind just like this:
This could for example also work on style properties:
In Angular 2 we can use square brackets around the property we want to bind to.
<span [innertext]="student.name"></span>This may look a bit strange at first, but it definitely is valid HTML. We actually can take any HTML property, like innerText, wrap it in square braces and you can then bind it to a model.
This could for example also work on style properties:
<span [student.bgcolor]="style.backgroundcolor"></span>
3. Two Way Binding
The most used use case of two-way binding in AngularJs is using it on any field or any other form elements. When we type something in the textbox on one side, the value goes to the controller and then back and forth.
In AngularJs we are using the ng-model directive on the element and bind it to the value:
In Angular 2 we also have a special directive called ngModel. But here some syntax is changed from AngularJs.
This syntax is called Banana in a Box ([()]). What this means is when you see this syntax, it's two-way binding at work.
In AngularJs we are using the ng-model directive on the element and bind it to the value:
In Angular 2 we also have a special directive called ngModel. But here some syntax is changed from AngularJs.
<input [(ngmodel)]="student.name" />We use the square brackets because it's a property, but we also use the parenthesis.
This syntax is called Banana in a Box ([()]). What this means is when you see this syntax, it's two-way binding at work.
4. Event Binding
You can do event binding with any valid HTML event available, like click, focus or blur. In AngularJs you should need built-in directives to use event binding.
For example, for binding to a click, one would use:
In Angular 2, we can just take the same property that is on the HTML element (click in the previous example) and wrap it in parenthesis.
So, with properties we use square braces [], but with events we use parenthesis ():
For example, for binding to a click, one would use:
In Angular 2, we can just take the same property that is on the HTML element (click in the previous example) and wrap it in parenthesis.
So, with properties we use square braces [], but with events we use parenthesis ():
<button (click)="AddStudent()">Save</button>
Note: Angular 2 has dropped tons of directives (like ng-click, ng-blur, ng-focus, etc) and also dropped the convention of splitting words with dashes and use camel case instead (ng-repeat vs ngFor, ng-if vs ngIf etc).
Hope you like this article and Happy coding!!.
Hope you like this article and Happy coding!!.
