angulardart.xyz

Search

Docs

Components

Resources

Reference

Cheat Sheet 6.0

  • 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);
      }

  • 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