Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# Cheat Sheet 6.0

<?code-excerpt path-base=”examples/ng/doc”?>

- Bootstrapping

- `import 'package:angular/angular.dart';`

- `import 'package:angular_app/app_component.template.dart' as ng;
  void main() {
  runApp(ng.AppComponentNgFactory);
  }`

- Launch the app, using `AppComponent` as the root component.

  See: Architecture Overview, Dependency Injection

- `import 'package:angular_router/angular_router.dart';
  import 'package:angular_tour_of_heroes/app_component.template.dart' as ng;
  `

import 'main.template.dart' as self;

@GenerateInjector(
routerProviders,
)
final InjectorFactory injector = self.injector$Injector;

void main() {
runApp(ng.AppComponentNgFactory, createInjector: injector);
}</code>

- Launch the app, using a compile-time generated root injector.

  See: Architecture Overview, Dependency Injection

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:angular/angular.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:angular_forms/angular_forms.dart';` Available from formDirectives
--- | ---
`<input [(ngModel)]="userName">` | Provides two-way data-binding, parsing, and validation for form controls. See: Forms, NgModel class

Class decorators | `import 'package:angular/angular.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.

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: [MyService, 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: [MyService, 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: ['.primary {color: red}'] styleUrls: ['my-component.css']` | List of inline CSS styles or external stylesheet URLs for styling the component’s view. See: Component Styles
`directives: [CORE_DIRECTIVES, MyDirective, MyComponent]` | List of directives used in the component’s template. See: Architecture Overview, CORE_DIRECTIVES
`pipes: [commonPipes, MyPipe, ...]` | List of pipes used in the component’s template. See: Pipes, commonPipes

Class field decorators for directives and components | `import 'package:angular/angular.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
`ngAfterChanges() { ... }` | 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 `ngAfterChanges`. 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:angular/angular.dart';`
--- | ---
`Provider(MyService, useClass: MyMockService)` | Sets or overrides the provider for `MyService` to the `MyMockService` class. See: Dependency Injection, provide function, Provider class
`Provider(MyService, useFactory: myFactory)` | Sets or overrides the provider for `MyService` to the `myFactory` factory function. See: Dependency Injection, provide function, Provider class
`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:angular_router/angular_router.dart';`
--- | ---
`new RouteDefinition( path: 'heroes', component: HeroesComponentNgFactory, )` | Basic unit used to configure routes. See: Tutorial: Routing, RouteDefinition class
`<router-outlet [routes]="routes"></router-outlet>` | Reserves a location in the DOM as an outlet for the router. See: Tutorial: Routing, RouterOutlet class
`<a routerLink="/heroes/{{hero.id}}">...</a> <a [routerLink]="heroesRoute">...</a>` | Creates a link to a different view. See: Tutorial: Routing, RouterLink class