Common things in Angular 1 and Angular 2
Posted By : Priya verma | 30-Sep-2016
There are many difference between Angular 1 and Angular 2. But this blog provides a some common Angular 1 syntax are equivalent in Angular 2.
1. Data Bindings:
In Angular 1 and Angular 2 , expression use curly braces for binds the value of the element. And element property control by the component.
Ex.
Angular 1: {{ expression }}
Angular 2: {{ expression }}
2. Filters
Angularjs provide filters to transform data. Filter can be added to expressions by using the pipe character (|) . It return the matching items.
Ex:
Angular 1: <div>{{firstName | uppercase}}</div>
Angular 2: <div>{{firstName | uppercase}}</div>
3. Class:
Ng-class directive includes CSS class based on an expression.
Ex.
Angular 1: <div ng-class="{active: isActive}">
Angular 2: <div [ngClass]="{active: isActive}">
4. Click
Click directive tells , what to do when an element is clicked.
Angular 1: <element ng-click="myFunc()"></element>
<div ng-click="myFunc($event )"></div> // you can also pass any $event object.
Angular 2: <div (click)="myFunc()"></div>
<div (click)="myFunc($event )"></div> // you can also pass any $event object.
5. Bind to the href property
Use his property for replace the binding expression with the appropriate url.
Angular 1: <a ng-href="url">click</a>
used for routing: <a ng-href="#home">home</a>
Angular 2: <a [href]="url">click</a>
used for routing: <a [routingLink]="['/home']">Home</a>
6.ngIf
Ng-if directive completely removes the element from the DOM based on expression (true/false).
Ex.
Angular 1 : <element ng-if="expression"></element>
Angular 2 : <element *ngIf="expression"></element>
7. ngModel
The module is a container for the application controllers. Controllers always belong to a module.
Ex.
Angular 1 : Name: <input ng-model="name">
Angular 2 : Name: <input [(ngModel)]="name" />
Hope you find it helpful
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Priya verma
Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.