Common things in Angular 1 and Angular 2

Posted By : Priya verma | 30-Sep-2016

Common things in Angular 1 and Angular 2
 

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

About Author

Author Image
Priya verma

Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.

Request for Proposal

Name is required

Comment is required

Sending message..