Cheat Sheet

3.1

Send feedback
Bootstrapping import 'package:angular2/platform/browser.dart';
bootstrap​(AppComponent, [MyService, provide(...)]);

Bootstraps the app, using AppComponent as the root component.

See: Architecture Overview, bootstrap function

Template syntax
<input [value]="firstName">

Binds property value to the result of expression firstName.

See: Template Syntax

<div [attr.role]="myAriaRole">

Binds attribute role to the result of expression myAriaRole.

See: Template Syntax

<div [class.extra-sparkle]="isDelightful">

Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

See: Template Syntax

<div [style.width.px]="mySize">

Binds style property width to the result of expression mySize in pixels. Units are optional.

See: Template Syntax

<button (click)="readRainbow($event)">

Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.

See: Template Syntax

<div title="Hello {​{ponyName}}">

Binds a property to an interpolated string, for example, “Hello Seabiscuit”. Equivalent to: <div [title]="'Hello' + ponyName">

See: Template Syntax

<p>Hello {​{ponyName}}</p>

Binds text content to an interpolated string, for example, “Hello Seabiscuit”.

See: Template Syntax

<my-cmp [(title)]="name">

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

See: Template Syntax

<video #movieplayer ...>
  <button (click)="movieplayer.play()">
</video>

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

See: Template Syntax

<p *myUnless="myExpression">...</p>

The * symbol turns the current element into an embedded template. Equivalent to: <template [myUnless]="myExpression"><p>...</p></template>

See: Template Syntax

<p>
  Card No.: {​{cardNumber | myCardNumberFormatter}}
</p>

Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.

See: Template Syntax

<p>
  Employer: {​{employer?.companyName}}
</p>

The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.

See: Template Syntax

Core directives import 'package:angular2/angular2.dart'; Available from CORE_DIRECTIVES
<section *ngIf="showSection">

Removes or recreates a portion of the DOM tree based on the showSection expression.

See: Template Syntax, NgIf class

<li *ngFor="let item of list">

Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

See: Template Syntax, NgFor class

<div [ngSwitch]="conditionExpression">
  <template [ngSwitchCase]="case1Exp">...</template>
  <template ngSwitchCase="case2LiteralString">...</template>
  <template ngSwitchDefault>...</template>
</div>

Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

See: Template Syntax, NgSwitch class, NgSwitchCase class, NgSwitchDefault class

<div [ngClass]="{active: isActive, disabled: isDisabled}">

Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.

See: Template Syntax, NgClass class

Forms import 'package:angular2/angular2.dart'; Available from COMMON_DIRECTIVES or FORM_DIRECTIVES
<input [(ngModel)]="userName">

Provides two-way data-binding, parsing, and validation for form controls.

See: Forms, NgModel class

Class decorators import 'package:angular2/angular2.dart';
@Component(...)
class MyComponent() {}

Declares that a class is a component and provides metadata about the component.

@Directive(...)
class MyDirective() {}

Declares that a class is a directive and provides metadata about the directive.

@Pipe(...)
class MyPipe() {}

Declares that a class is a pipe and provides metadata about the pipe.

@Injectable()
class MyService() {}

Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.

Directive configuration @Directive(property1: value1, ...)
selector: '.cool-button:not(a)'

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().

Does not support parent-child relationship selectors.

See: Structural Directives, selector property

providers: const [MyService, const Provider(...)]

List of dependency injection providers for this directive and its children.

See: Attribute Directives, Structural Directives, providers property

Component configuration @Component extends @Directive, so the @Directive configuration applies to components as well
viewProviders: const [MyService, const Provider(...)]

List of dependency injection providers scoped to this component’s view.

See: viewProviders property

template: 'Hello {​{name}}',
templateUrl: 'my-component.html'

Inline template or external template URL of the component’s view.

See: Architecture Overview

styles: const ['.primary {color: red}']
styleUrls: const ['my-component.css']

List of inline CSS styles or external stylesheet URLs for styling the component’s view.

See: Component Styles

directives: const [COMMON_DIRECTIVES, MyDirective, MyComponent]

List of directives used in the component’s template.

See: Architecture Overview, CORE_DIRECTIVES, COMMON_DIRECTIVES

pipes: const [COMMON_PIPES, MyPipe, ...]

List of pipes used in the component’s template.

See: Pipes, COMMON_PIPES

Class field decorators for directives and components import 'package:angular2/angular2.dart';
@Input() myProperty;

Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).

See: Template Syntax, Input class

final _myEvent = new StreamController<T>();
@Output() Stream<T> get myEvent => _myEvent.stream;

Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).

See: Template Syntax, Output class

@HostBinding('class.valid') isValid;

Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

See: HostBinding class

@HostListener('click', ['$event'])
onClick(e) {...}

Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

See: Attribute Directives, HostListener class

@ContentChild(myPredicate) myChildComponent;

Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

See: ContentChild class

@ContentChildren(myPredicate) myChildComponents;

Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

See: ContentChildren class

@ViewChild(myPredicate) myChildComponent;

Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.

See: ViewChild class

@ViewChildren(myPredicate) myChildComponents;

Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

See: ViewChildren class

Directive and component change detection and lifecycle hooks (implemented as class methods)
MyAppComponent(MyService myService, ...) { ... }

Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

See: Lifecycle Hooks

ngOnChanges(changeRecord) { ... }

Called after every change to input properties and before processing content or child views.

See: Lifecycle Hooks, OnChanges class

ngOnInit() { ... }

Called after the constructor, initializing input properties, and the first call to ngOnChanges.

See: Lifecycle Hooks, OnInit class

ngDoCheck() { ... }

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.

See: Lifecycle Hooks, DoCheck class

ngAfterContentInit() { ... }

Called after ngOnInit when the component’s or directive’s content has been initialized.

See: Lifecycle Hooks, AfterContentInit class

ngAfterContentChecked() { ... }

Called after every check of the component’s or directive’s content.

See: Lifecycle Hooks, AfterContentChecked class

ngAfterViewInit() { ... }

Called after ngAfterContentInit when the component’s view has been initialized. Applies to components only.

See: Lifecycle Hooks, AfterViewInit class

ngAfterViewChecked() { ... }

Called after every check of the component’s view. Applies to components only.

See: Lifecycle Hooks, AfterViewChecked class

ngOnDestroy() { ... }

Called once, before the instance is destroyed.

See: Lifecycle Hooks, OnDestroy class

Dependency injection configuration import 'package:angular2/angular2.dart';
const Provider(MyService, useClass: MyMockService)

Sets or overrides the provider for MyService to the MyMockService class.

See: Dependency Injection, provide function, Provider class

const Provider(MyService, useFactory: myFactory)

Sets or overrides the provider for MyService to the myFactory factory function.

See: Dependency Injection, provide function, Provider class

const Provider(MyValue, useValue: 42)

Sets or overrides the provider for MyValue to the value 42.

See: Dependency Injection, provide function, Provider class

Routing and navigation import 'package:angular2/router.dart';
@RouteConfig(const [
  const Route(
    path: '/:myParam',
    component: MyComponent,
    name: 'MyCmp' ),
])

Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.

See: Tutorial: Routing, RouteConfig class, Route class

<router-outlet></router-outlet>

Marks the location to load the component of the active route.

See: Tutorial: Routing, RouterOutlet class

<a [routerLink]="['/MyCmp', {myParam: 'value'}]">

Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. To navigate to a root route, use the / prefix; for a child route, use the ./prefix.

See: Tutorial: Routing, RouterLink class

routerOnActivate(nextInstruction, prevInstruction) { ... }

After navigating to a component, the router calls the component’s routerOnActivate method (if defined).

See: OnActivate class

routerCanReuse(nextInstruction, prevInstruction) { ... }

The router calls a component’s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a future.

See: CanReuse class

routerOnReuse(nextInstruction, prevInstruction) { ... }

The router calls the component’s routerOnReuse method (if defined) when it reuses a component instance.

See: OnReuse class

routerCanDeactivate(nextInstruction, prevInstruction) { ... }

The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a future that completes successfully.

See: CanDeactivate class

routerOnDeactivate(nextInstruction, prevInstruction) { ... }

Called before the directive is removed as the result of a route change. May return a future that pauses removing the directive until the future completes.

See: OnDeactivate class