Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
\n"
},
{
"syntax": "Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
\n"
},
{
"syntax": "",
"bold": [
"[ngClass]"
],
"description": "
Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.
\n"
}
],
"index": 2
},
{
"name": "Forms",
"description": "
\n\nAvailable using platform_directives in pubspec
\n",
"items": [
{
"syntax": "
",
"bold": [
"[(ngModel)]"
],
"description": "
Provides two-way data-binding, parsing and validation for form controls.
\n"
}
],
"index": 3
},
{
"name": "Class decorators",
"description": "
\n\nimport 'package:angular2/core.dart';
\n",
"items": [
{
"syntax": "@Component(...)\nclass MyComponent() {}",
"bold": [
"@Component(...)"
],
"description": "
Declares that a class is a component and provides metadata about the component.
\n"
},
{
"syntax": "@Directive(...)\nclass MyDirective() {}",
"bold": [
"@Directive(...)"
],
"description": "
Declares that a class is a directive and provides metadata about the directive.
\n"
},
{
"syntax": "@Pipe(...)\nclass MyPipe() {}",
"bold": [
"@Pipe(...)"
],
"description": "
Declares that a class is a pipe and provides metadata about the pipe.
\n"
},
{
"syntax": "@Injectable()\nclass MyService() {}",
"bold": [
"@Injectable()"
],
"description": "
Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n
\n"
}
],
"index": 4
},
{
"name": "Directive configuration",
"description": "
\n\n@Directive(property1: value1, ...)
\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
"bold": [
"selector:"
],
"description": "
Specifies a CSS selector that identifies this directive within a template. Supported selectors include element,\n[attribute], .class, and :not().
\n
Does not support parent-child relationship selectors.
\n"
},
{
"syntax": "providers: [MyService, { provide: ... }]",
"bold": [
"providers:"
],
"description": "
Array of dependency injection providers for this directive and its children.
\n"
}
],
"index": 5
},
{
"name": "Component configuration",
"description": "
\n@Component extends @Directive,\nso the @Directive configuration applies to components as well
\n",
"items": [
{
"syntax": "viewProviders: [MyService, { provide: ... }]",
"bold": [
"viewProviders:"
],
"description": "
Array of dependency injection providers scoped to this component's view.
\n"
},
{
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
"bold": [
"template:",
"templateUrl:"
],
"description": "
Inline template / external template URL of the component's view.
\n"
},
{
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
"bold": [
"styles:",
"styleUrls:"
],
"description": "
List of inline CSS styles / external stylesheet URLs for styling component’s view.
\n"
},
{
"syntax": "directives: [MyDirective, MyComponent]",
"bold": [
"directives:"
],
"description": "
List of directives used in the the component’s template.
\n"
},
{
"syntax": "pipes: [MyPipe, OtherPipe]",
"bold": [
"pipes:"
],
"description": "
List of pipes used in the component's template.
\n"
}
],
"index": 6
},
{
"name": "Class field decorators for directives and components",
"description": "
\n\nimport 'package:angular2/core.dart';
\n",
"items": [
{
"syntax": "@Input() myProperty;",
"bold": [
"@Input()"
],
"description": "
Declares an input property that we can update via property binding (e.g.\n<my-cmp [myProperty]="someExpression">).
\n"
},
{
"syntax": "@Output() myEvent = new EventEmitter();",
"bold": [
"@Output()"
],
"description": "
Declares an output property that fires events to which we can subscribe with an event binding (e.g. <my-cmp (myEvent)="doSomething()">).
\n"
},
{
"syntax": "@HostBinding('[class.valid]') isValid;",
"bold": [
"@HostBinding('[class.valid]')"
],
"description": "
Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).
\n"
},
{
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
"bold": [
"@HostListener('click', ['$event'])"
],
"description": "
Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).
\n"
},
{
"syntax": "@ContentChild(myPredicate) myChildComponent;",
"bold": [
"@ContentChild(myPredicate)"
],
"description": "
Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
\n"
},
{
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
"bold": [
"@ContentChildren(myPredicate)"
],
"description": "
Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
\n"
},
{
"syntax": "@ViewChild(myPredicate) myChildComponent;",
"bold": [
"@ViewChild(myPredicate)"
],
"description": "
Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
\n"
},
{
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
"bold": [
"@ViewChildren(myPredicate)"
],
"description": "
Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.
\n"
}
],
"index": 7
},
{
"name": "Directive and component change detection and lifecycle hooks",
"description": "
(implemented as class methods)\n
\n",
"items": [
{
"syntax": "MyAppComponent(MyService myService, ...) { ... }",
"bold": [
"MyAppComponent(MyService myService, ...)"
],
"description": "
The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
\n"
},
{
"syntax": "ngOnChanges(changeRecord) { ... }",
"bold": [
"ngOnChanges(changeRecord)"
],
"description": "
Called after every change to input properties and before processing content or child views.
\n"
},
{
"syntax": "ngOnInit() { ... }",
"bold": [
"ngOnInit()"
],
"description": "
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
\n"
},
{
"syntax": "ngDoCheck() { ... }",
"bold": [
"ngDoCheck()"
],
"description": "
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.
\n"
},
{
"syntax": "ngAfterContentInit() { ... }",
"bold": [
"ngAfterContentInit()"
],
"description": "
Called after ngOnInit when the component's or directive's content has been initialized.
\n"
},
{
"syntax": "ngAfterContentChecked() { ... }",
"bold": [
"ngAfterContentChecked()"
],
"description": "
Called after every check of the component's or directive's content.
\n"
},
{
"syntax": "ngAfterViewInit() { ... }",
"bold": [
"ngAfterViewInit()"
],
"description": "
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
\n"
},
{
"syntax": "ngAfterViewChecked() { ... }",
"bold": [
"ngAfterViewChecked()"
],
"description": "
Called after every check of the component's view. Applies to components only.
\n"
},
{
"syntax": "ngOnDestroy() { ... }",
"bold": [
"ngOnDestroy()"
],
"description": "
Called once, before the instance is destroyed.
\n"
}
],
"index": 8
},
{
"name": "Dependency injection configuration",
"description": "
import 'package:angular2/core.dart';
\n",
"items": [
{
"syntax": "{ provide: MyService, useClass: MyMockService }",
"bold": [
"provide",
"useClass"
],
"description": "
Sets or overrides the provider for MyService to the MyMockService class.
\n"
},
{
"syntax": "{ provide: MyService, useFactory: myFactory }",
"bold": [
"provide",
"useFactory"
],
"description": "
Sets or overrides the provider for MyService to the myFactory factory function.
\n"
},
{
"syntax": "{ provide: MyValue, useValue: 41 }",
"bold": [
"provide",
"useValue"
],
"description": "
Sets or overrides the provider for MyValue to the value 41.
\n"
}
],
"index": 9
},
{
"name": "Routing and navigation",
"description": "
\n\nimport 'package:angular2/router.dart';
\n",
"items": [
{
"syntax": "@RouteConfig(const [\n const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),\n])",
"bold": [
"@RouteConfig"
],
"description": "
Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.
\n"
},
{
"syntax": "
",
"bold": [
"router-outlet"
],
"description": "
Marks the location to load the component of the active route.
\n"
},
{
"syntax": "
",
"bold": [
"[routerLink]"
],
"description": "Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route.
\n"
},
{
"syntax": "@CanActivate(() => ...)class MyComponent() {}",
"bold": [
"@CanActivate"
],
"description": "A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a future.
\n"
},
{
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnActivate"
],
"description": "After navigating to a component, the router calls the component's routerOnActivate method (if defined).
\n"
},
{
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanReuse"
],
"description": "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.
\n"
},
{
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnReuse"
],
"description": "The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
\n"
},
{
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanDeactivate"
],
"description": "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.
\n"
},
{
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnDeactivate"
],
"description": "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.
\n"
}
],
"index": 10
}
]
}