angular.

io

Angular - Cheat Sheet

12-15 minutos

import { NgModule } from

NgModules
'@angular/core';

@NgModule({
declarations: ...,
imports: ..., Defines a module that contains
exports: ..., components, directives, pipes, and
providers: ..., providers.

bootstrap: ...})
class MyModule {}
declarations:
[MyRedComponent, List of components, directives, and
MyBlueComponent, pipes that belong to this module.
MyDatePipe]
List of modules to import into this
imports:
module. Everything from the
[BrowserModule,
imported modules is available to
SomeOtherModule] declarations of this module.

exports: List of components, directives, and

[MyRedComponent, pipes visible to modules that import
MyDatePipe] this module.

List of dependency injection

providers: [MyService, providers visible both to the
{ provide: ... }] contents of this module and to
importers of this module.

bootstrap: List of components to bootstrap

[MyAppComponent] when this module is bootstrapped.

Template syntax
Binds property value to the result of
<input [value]="firstName">
expression firstName.
 Binds attribute role to the result of
<div [attr.role]="myAriaRole">
expression myAriaRole.

Binds the presence of the CSS class

<div [class.extra- extra-sparkle on the element to
sparkle]="isDelightful"> the truthiness of the expression
isDelightful.

Binds style property width to the

<div [style.width.px]="mySize"> result of expression mySize in pixels.
Units are optional.

Calls method readRainbow when a

<button click event is triggered on this button
(click)="readRainbow($event)"> element (or its children) and passes in
the event object.

Binds a property to an interpolated

string, for example, "Hello Seabiscuit".
<div title="Hello {{ponyName}}"> Equivalent to: <div
[title]="'Hello ' +
ponyName">

Binds text content to an interpolated

<p>Hello {{ponyName}}</p>
string, for example, "Hello Seabiscuit".

Sets up two-way data binding.

Equivalent to: <my-cmp
<my-cmp [(title)]="name">
[title]="name"
(titleChange)="name=$event">

Creates a local variable

<video #movieplayer ...>
movieplayer that provides access
<button
to the video element instance in
(click)="movieplayer.play()">
data-binding and event-binding
</video>
expressions in the current template.

The * symbol turns the current

element into an embedded template.
<p
Equivalent to: <ng-template
*myUnless="myExpression">...</p>
[myUnless]="myExpression">
<p>...</p></ng-template>

Transforms the current value of

<p>Card No.: {{cardNumber |
expression cardNumber via the pipe
myCardNumberFormatter}}</p>
 called myCardNumberFormatter.

The safe navigation operator (?)

<p>Employer: means that the employer field is
{{employer?.companyName}}</p> optional and if undefined, the rest of
the expression should be ignored.

An SVG snippet template needs an

<svg:rect x="0" y="0" svg: prefix on its root element to
width="100" height="100"/> disambiguate the SVG element from
an HTML component.

<svg>
An <svg> root element is detected as
<rect x="0" y="0" width="100"
an SVG element automatically,
height="100"/>
without the prefix.
</svg>

import {
Built-in directives CommonModule } from
'@angular/common';

Removes or recreates a
portion of the DOM tree
<section *ngIf="showSection"> based on the
showSection
expression.

Turns the li element and

its contents into a
<li *ngFor="let item of list"> template, and uses that to
instantiate a view for each
item in list.

<div
[ngSwitch]="conditionExpression">
<ng-template Conditionally swaps the
[ngSwitchCase]="case1Exp">...</ng- contents of the div by
template> selecting one of the
<ng-template embedded templates
ngSwitchCase="case2LiteralString">... based on the current
</ng-template> value of
conditionExpression.
<ng-template ngSwitchDefault>...
</ng-template>
</div>
 Binds the presence of
CSS classes on the
element to the truthiness
<div [ngClass]="{'active': isActive, of the associated map
'disabled': isDisabled}"> values. The right-hand
expression should return
{class-name: true/false}
map.

Allows you to assign

styles to an HTML
<div [ngStyle]="{'property': element using CSS. You
'value'}"> can use CSS directly, as
<div [ngStyle]="dynamicStyles()"> in the first example, or you
can call a method from the
component.

import { FormsModule }
Forms
from '@angular/forms';

Provides two-way data-binding,

<input
parsing, and validation for form
[(ngModel)]="userName">
controls.

import { Directive, ... } from

Class decorators
'@angular/core';

@Component({...})
Declares that a class is a component and
class
provides metadata about the component.
MyComponent() {}
@Directive({...})
Declares that a class is a directive and
class
provides metadata about the directive.
MyDirective() {}

@Pipe({...}) Declares that a class is a pipe and

class MyPipe() {} provides metadata about the pipe.

Declares that a class has dependencies

@Injectable()
that should be injected into the constructor
class MyService()
when the dependency injector is creating
{} an instance of this class.

@Directive({ property1:
Directive configuration
value1, ... })
 Specifies a CSS selector that identifies
this directive within a template.
Supported selectors include element,
selector: '.cool-
[attribute], .class, and :not().
button:not(a)'
Does not support parent-child
relationship selectors.

providers:
List of dependency injection providers for
[MyService, {
this directive and its children.
provide: ... }]

@Component extends
@Directive, so the @Directive
Component configuration
configuration applies to
components as well

If set, the templateUrl and

moduleId: module.id styleUrl are resolved relative to
the component.

viewProviders: List of dependency injection

[MyService, { providers scoped to this component's
provide: ... }] view.

template: 'Hello
{{name}}' Inline template or external template
templateUrl: 'my- URL of the component's view.
component.html'
styles: ['.primary
List of inline CSS styles or external
{color: red}']
stylesheet URLs for styling the
styleUrls: ['my-
component’s view.
component.css']

Class field decorators for directives import { Input, ... } from

and components '@angular/core';

Declares an input property that you can

update via property binding (example:
@Input() myProperty; <my-cmp
[myProperty]="someExpression">).

Declares an output property that fires

@Output() myEvent = new events that you can subscribe to with an
EventEmitter(); event binding (example: <my-cmp
(myEvent)="doSomething()">).
Directive and component change
detection and lifecycle hooks
constructor(myService:
MyService, ...) { ... }
ngOnChanges(changeRecord) { input properties and before
... } processing content or child
ngOnInit() { ... }
ngDoCheck() { ... }
ngAfterContentInit() { ...
}
ngAfterContentChecked() {
... }
ngAfterViewInit() { ... }
ngAfterViewChecked() { ...
}
ngOnDestroy() { ... }
Dependency injection
(implemented as class
methods)
Called before any other
lifecycle hook. Use it to inject
dependencies, but avoid any
serious work here.
Called after every change to
views.
Called after the constructor,
initializing input properties,
and the first call to
ngOnChanges.
Called every time that the
input properties of a
component or a directive are
checked. Use it to extend
change detection by
performing a custom check.
Called after ngOnInit when
the component's or directive's
content has been initialized.
Called after every check of
the component's or directive's
content.
Called after
ngAfterContentInit
when the component's view
has been initialized. Applies
to components only.
Called after every check of
the component's view. Applies
to components only.
Called once, before the
instance is destroyed.
 configuration

{ provide: MyService, Sets or overrides the provider for

useClass: MyMockService MyService to the
} MyMockService class.

Sets or overrides the provider for

{ provide: MyService,
MyService to the myFactory
useFactory: myFactory }
factory function.

{ provide: MyValue, Sets or overrides the provider for

useValue: 41 } MyValue to the value 41.

import { Routes,
RouterModule, ...
Routing and navigation
} from
'@angular/router';

const routes: Routes = [

{ path: '', component: HomeComponent },
{ path: 'path/:routeParam', component:
Configures routes for
MyComponent },
the application.
{ path: 'staticPath', component: ... },
Supports static,
{ path: '**', component: ... },
parameterized, redirect,
{ path: 'oldPath', redirectTo:
and wildcard routes.
'/staticPath' },
Also supports custom
{ path: ..., component: ..., data: {
route data and resolve.
message: 'Custom' } }
]);
const routing = RouterModule.forRoot(routes);

Marks the location to

<router-outlet></router-outlet> load the component of
<router-outlet name="aux"></router-outlet> the active route.

Creates a link to a

<a routerLink="/path"> different view based on

a route instruction
<a [routerLink]="[ '/path', routeParam ]">
consisting of a route
<a [routerLink]="[ '/path', { matrixParam:
path, required and
'value' } ]">
optional parameters,
<a [routerLink]="[ '/path' ]"
query parameters, and a
[queryParams]="{ page: 1 }">
fragment. To navigate to
<a [routerLink]="[ '/path' ]"
a root route, use the /
fragment="anchor">
 prefix; for a child route,
use the ./prefix; for a
sibling or parent, use
the ../ prefix.

The provided classes

are added to the
<a [routerLink]="[ '/path' ]"
element when the
routerLinkActive="active"> routerLink becomes
the current active route.

class CanActivateGuard implements CanActivate

{ An interface for defining
a class that the router
canActivate(
should call first to
route: ActivatedRouteSnapshot,
determine if it should
state: RouterStateSnapshot
activate this component.
):
Should return a boolean
Observable<boolean>|Promise<boolean>|boolean
or an
{ ... }
Observable/Promise
} that resolves to a
{ path: ..., canActivate: [CanActivateGuard] boolean.
}

class CanDeactivateGuard implements

CanDeactivate<T> { An interface for defining
a class that the router
canDeactivate(
should call first to
component: T,
determine if it should
route: ActivatedRouteSnapshot,
deactivate this
state: RouterStateSnapshot
component after a
):
navigation. Should
Observable<boolean>|Promise<boolean>|boolean
return a boolean or an
{ ... } Observable/Promise
} that resolves to a
{ path: ..., canDeactivate: boolean.
[CanDeactivateGuard] }

class CanActivateChildGuard implements An interface for defining

CanActivateChild { a class that the router
canActivateChild( should call first to
route: ActivatedRouteSnapshot, determine if it should

state: RouterStateSnapshot activate the child route.

Should return a boolean
):
Observable<boolean>|Promise<boolean>|boolean
{ ... }
or an
}
Observable/Promise
{ path: ..., canActivateChild:
that resolves to a
[CanActivateGuard],
boolean.

children: ... }

class ResolveGuard implements Resolve<T> { An interface for defining

a class that the router
resolve(
should call first to
route: ActivatedRouteSnapshot,
resolve route data
state: RouterStateSnapshot
before rendering the
): Observable<any>|Promise<any>|any { ...
route. Should return a
}
value or an
}
Observable/Promise
{ path: ..., resolve: [ResolveGuard] }
that resolves to a value.

class CanLoadGuard implements CanLoad { An interface for defining

a class that the router
canLoad(
should call first to check
route: Route
if the lazy loaded
):
module should be
Observable<boolean>|Promise<boolean>|boolean
loaded. Should return a
{ ... }
boolean or an
}
Observable/Promise
{ path: ..., canLoad: [CanLoadGuard],
that resolves to a
loadChildren: ... }
boolean.