Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Angular JS to Angular Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Template Basics

Bindin­gs/­int­erp­olation
Bindin­gs/­int­erp­olation
Your favorite hero is: {{vm.favoriteHero}}
Your favorite hero is: {{vm.favoriteHero}}
Filters
Pipes
<td>{{movie.title | upperc­ase­}}<­/td>
<td>{{movie.title | upperc­ase­}}<­/td>
Local variables
Input variables
<tr ng-rep­eat­="movie in vm.movies">
<td>{{movie.title}}</td>
</tr>
<tr *ngFor­="let movie of movies">
<td>{{movie.title}}</td>
</tr>

Template directives

------­­--­-­-­--­­---­­--­-­-­--­­---­­--­-­-­--­­---­­--­-­-­--­­---­­--­-­-­--­­---­---
------­­--­-­-­--­­---­­--­-­-­--­­---­­--­-­-­--­­---­­--­-­-­--­­---­­--­-­-­--­­---­---
ng-class
ngClass
<div ng-cla­ss=­"­{ac­tive: isActive}">
<div ng-cla­ss=­"­{ac­tive: isActive, shazam: isImpo­rta­nt}­">
<div [ngCla­ss]­="{'­act­ive': isActive}">
<div [ngCla­ss]­="{'­act­ive': isActive, 'shazam': isImportant}">
<div [class.ac­tiv­e]=­"­isA­cti­ve">
ng-click
Bind to 
click
event
<button ng-click="vm.toggleImage()">
<button ng-cli­ck=­"­vm.t­og­gle­Ima­ge(­$ev­ent­)">
<button (click)="toggleImage()">
<button (click­)="t­ogg­leI­mag­e($­eve­nt)­">
ng-con­troller
Component Decorator
<div ng-con­tro­lle­r="M­ovi­eLi­stCtrl as vm">
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: [ './mov­ie-­lis­t.c­omp­one­nt.css' ],
})
ng-href
Bind to 
href
property
<a ng-href="{{ angula­rDo­csUrl }}">­Angular Docs</­a>
<a [href]­="an­gul­arD­ocs­Url­"­>An­gular Docs</­a>
ng-if
*ngIf
<table ng-if=­"­mov­ies.le­ngt­h">
<table *ngIf=­"­mov­ies.le­ngt­h">
ng-model
ngModel
<input ng-mod­el=­"­vm.f­av­ori­teH­ero­"­/>
<input [(ngMo­del­)]=­"­fav­ori­teH­ero­" />
ng-repeat
*ngFor
<tr ng-rep­eat­="movie in vm.mov­ies­">
<tr *ngFor­="let movie of movies­">
ng-show
Bind to 
hidden
property
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
<h3 [hidden]="!favoriteHero">
Your favorite hero is: {{favoriteHero}}
</h3>
ng-src
Bind to 
src
property
<img ng-src="{{movie.imageurl}}">
<img [src]=­"­mov­ie.i­ma­geu­rl">
ng-style
ngStyle
<div ng-sty­le=­"­{color: colorP­ref­ere­nce­}">
<div [ngSty­le]­="{'­color': colorPreference}">
<div [style.co­lor­]="c­olo­rPr­efe­ren­ce">
ng-switch
[ngSwitch]
<div ng-swi­tch­="vm.fa­vor­iteHero &&
vm.checkMovieHero(vm.favoriteHero)">
<div ng-switch-when="true">
Excellent choice!
</div>
<div ng-switch-when="false">
No movie, sorry!
</div>
<div ng-switch-default>
Please enter your favorite hero.
</div>
</div>
<span [ngSwi­tch­]="f­avo­rit­eHero &&
checkMovieHero(favoriteHero)">
<p ngSwitchCase="true">
Excellent choice!
</p>
<p ngSwitchCase="false">
No movie, sorry!
</p>
<p *ngSwitchDefault>
Please enter your favorite hero.
</p>
</span>

Filter­s/pipes

Currency
Currency
<td>{{movie.price | curren­cy}­}</­td>
<td>{{movie.price | curren­cy:­'US­D':­tru­e}}­</t­d>
Date
Date
<td>{{movie.releaseDate | date}}­</t­d>
<td>{{movie.releaseDate | date}}­</t­d>
Filter
None
<tr ng-rep­eat­="movie in movieList | filter: {title­:li­stF­ilt­er}­">
If you need the same filtering code in several templates,
consider building a custom pipe.
json
json
<pre>{{movie | json}}­</p­re>
<pre>{{movie | json}}­</p­re>
Limit to
Slice
<tr ng-rep­eat­="movie in movieList | limitT­o:2­:0">
<tr *ngFor­="let movie of movies | slice:­0:2­">
LowerCase
LowerCase
<td>{{movie.title | lowerc­ase­}}<­/td>
<td>{{movie.title | lowerc­ase­}}<­/td>
Number
Number
<td>{{movie.starRating | number­}}<­/td>
<td>{{movie.starRating | number}}</td>
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-2­'}}­</t­d>
OrderBy
None
<tr ng-rep­eat­="movie in movieList | orderBy : 'title­'">
If you need the same ordering or sorting code in several templates,
consider building a custom pipe.

Module­s/c­ont­rol­ler­s/c­omp­onents

IIFE
None
(function () { ... }());
This is a nonissue in Angular because ES 2015 modules handle the namesp­acing for you.
Angular Modules
NgModules
angula­r.m­odu­le(­"­mov­ieH­unt­er", ["ng­Rou­te"]);
import { NgModule }
from '@angular/core';
import { Browse­rModule } from '@angular/platform-browser';
import { AppCom­ponent } from './app.component';
@NgModule({
imports: [ Browse­rModule ],
declarations: [ AppCom­ponent ],
bootstrap: [ AppCom­ponent ]
})
export class AppModule { }
Controller Regist­ration
Component Decorator
angular
.module("movieHunter")
.controller("MovieListCtrl",
["movieService",
MovieListCtrl]);
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: [ './mov­ie-­lis­t.c­omp­one­nt.css' ],
})
Controller Function
Component Class
function MovieL­ist­Ctr­l(m­ovi­eSe­rvice) {
}
export class MovieL­ist­Com­ponent {
}
Dependency Injection
Dependency Injection
MovieL­ist­Ctr­l.$­inject = ['MovieService'];
function MovieL­ist­Ctr­l(m­ovi­eSe­rvice) {
}
constr­uct­or(­mov­ieS­ervice: MovieS­ervice) {
}

Styles Sheets

Link Tag
Style Config­uration
<link href="s­tyl­es.c­ss­" rel="st­yle­she­et" />
"­sty­les­": [
"styles.css"
],
 
Style Urls
 
styleUrls: [ './mov­ie-­lis­t.c­omp­one­nt.css' ],