Dart Cheat Sheet

Posted on  by



new_releases The content of this site is historical. See the announcement for updates.

Dart Cheat Sheet Learning a new framework is a daunting task. And it is totally nightmarish if a new language is used. Such is the case for learning Flutter, where the language used is Dart.

  • Bootstrapping

  • import 'package:angular/angular.dart';

Dart Cheat Sheet
  1. The cheat sheet references main classes and methods from Dart SDK.
  2. A complete Dart cheat sheet for everyday use (from beginners to advanced users) JavaScript Cheat Sheet From basic setup to DOM manipulation to the latest ECMA script features.
2021

  • import 'package:angular_app/app_component.template.dart' as ng;
    void main() {
    runApp(ng.AppComponentNgFactory);
    }     Technic launcher download mac.

  • 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>

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>..</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 directivesimport '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

Formsimport 'package:angular_forms/angular_forms.dart';
Available from formDirectives
<input [(ngModel)]='userName'>

Provides two-way>).

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).

Download photos from iphone 7 to mac. 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

301 Out Chart Printable

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 configurationimport '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

Angular Dart Cheat Sheet

Routing and navigationimport '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