This is a draft cheat sheet. It is a work in progress and is not finished yet.
Template
Angular 1 |
Angular2 |
ng-click |
(click) |
ng-hide |
[hidden] |
ng-class |
[ngClass] |
ng-model= “model” |
([model]) = “model” |
brackets |
Set value |
parentheses |
Get value |
Both |
Double binding |
<div ng-switch=""> |
[ngSwitch] = |
<div ng-switch-when=“"> |
*ngSwitchWhen = |
<div ng-switch-default=“"> |
*ngSwitchDefault = |
<a ng-href="homeUrl">Home</a> |
<a [href]=“homeUrl">Home</a> |
<a ng-href=“#home">Home</a> |
<a [routerLink]="['Home']">Home</a> |
The * means that Angular will modify the attached element (li) to create a new template
Pipes
Import {Pipe} from “angular2/core” @Pipe ({
name:”Girl”
}) export class GirlPipe { transform(user){ return user.gender == ‘girl’; } } @Component { pipes: [GirlPipe] } |
addGirl(newGirl:Girl) { this.persons = […this.persons,newGirl] |
Be careful a pipe does NOT check if the array of object got modified.
So if you want to add new elements to your array, it is required to recreate it instead of pushing and removing it:
Yes, you hate it admit it :P (so do I). However this come with a benefit, it makes Angular 2 faster.
Angular 2 is 3X to 5X than Angular 1. Let’s not forget this.
|
|
Service
Creation |
import {Injectable} from ‘angular2/core’ @Injectable export class UserService {}
|
Bootstrap in Root |
bootstrap(App,[UserService]) |
Usage |
import {UserService} from “./userService”; export class App {service; constructor(public userService:UserService) {this.service = userService}}
|
Directives
| |
@Component({template,selector,directives:[YourDirectiveHere]})
|
Angular 1 |
Angular 2 |
<temp a=1></temp> |
<temp [a]=1> </temp> |
|
import {Component, Input} from “angular2/core” export class Temp { @Input() a; }
|
Shadow DOM
Override the global style and affect every elements who has the classes |
@Component({encapsulation: ViewEncapsulation.None }) |
Not get affected by the global style and only care about it’s own style |
@Component({encapsulation: ViewEncapsulation.Native }) |
Same but works with older browsers like IE |
@Component({encapsulation: ViewEncapsulation.Emulated }) |
In angular 2 you can set your style in a component with the attribute encapsulation
Routing
Angular 1 |
Angular 2 |
$location |
_router: Router |
$routeParams |
_routeParams:RouteParams |
$routeParams.get(‘param1’) |
this._routeParams.get(‘param1’) |
| |
$location.path('...') |
this._router.navigate( ['destinationName', { param1: param1, param2: param2 }] ); |
<div ng-view> |
<router-outlet></router-outlet> |
Declare route (name in PascalCase) |
@RouteConfig([ {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true} ]) |
Add a link |
<a [routerLink]="['CrisisCenter']">Crisis Center</a> |
|
