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": [
- "[ng-class]"
- ],
- "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": 1
- },
- {
- "name": "Forms",
- "description": "
import {FORM_DIRECTIVES} from 'angular2/angular2';
\n",
- "items": [
- {
- "syntax": "
",
- "bold": [
- "[(ng-model)]"
- ],
- "description": "
Provides two-way data-binding, parsing and validation for form controls.
\n"
- }
- ],
- "index": 2
- },
- {
- "name": "Class decorators",
- "description": "
import {Directive, ...} from 'angular2/angular2';
\n",
- "items": [
- {
- "syntax": "@Component({...})\nclass MyComponent() {}",
- "bold": [
- "@Component({...})"
- ],
- "description": "
Declares that a class is a component and provides metadata about the component.
\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\ninjector is creating an instance of this class.
\n"
- }
- ],
- "index": 3
- },
- {
- "name": "Directive configuration",
- "description": "
@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": 4
- },
- {
- "name": "Component configuration",
- "description": "
@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": 5
- },
- {
- "name": "Class field decorators for directives and components",
- "description": "
import {Input, ...} from 'angular2/angular2';
\n",
- "items": [
- {
- "syntax": "@Input() myProperty;",
- "bold": [
- "@Input()"
- ],
- "description": "
Declares an input property that we can update via property binding, e.g.\n<my-cmp [my-property]="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 (my-event)="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": 6
- },
- {
- "name": "Directive and component change detection and lifecycle hooks",
- "description": "
(implemented as class methods)
\n",
- "items": [
- {
- "syntax": "constructor(myService: MyService, ...) { ... }",
- "bold": [
- "constructor(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": "onChanges(changeRecord) { ... }",
- "bold": [
- "onChanges(changeRecord)"
- ],
- "description": "
Called after every change to input properties and before processing content or child views.
\n"
- },
- {
- "syntax": "onInit() { ... }",
- "bold": [
- "onInit()"
- ],
- "description": "
Called after the constructor, initializing input properties, and the first call to onChanges.
\n"
- },
- {
- "syntax": "doCheck() { ... }",
- "bold": [
- "doCheck()"
- ],
- "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": "afterContentInit() { ... }",
- "bold": [
- "afterContentInit()"
- ],
- "description": "
Called after onInit when the component's or directive's content has been initialized.
\n"
- },
- {
- "syntax": "afterContentChecked() { ... }",
- "bold": [
- "afterContentChecked()"
- ],
- "description": "
Called after every check of the component's or directive's content.
\n"
- },
- {
- "syntax": "afterViewInit() { ... }",
- "bold": [
- "afterViewInit()"
- ],
- "description": "
Called after onContentInit when the component's view has been initialized. Applies to components only.
\n"
- },
- {
- "syntax": "afterViewChecked() { ... }",
- "bold": [
- "afterViewChecked()"
- ],
- "description": "
Called after every check of the component's view. Applies to components only.
\n"
- },
- {
- "syntax": "onDestroy() { ... }",
- "bold": [
- "onDestroy()"
- ],
- "description": "
Called once, before the instance is destroyed.
\n"
- }
- ],
- "index": 6
- },
- {
- "name": "Dependency injection configuration",
- "description": "
import {provide} from 'angular2/angular2';
\n",
- "items": [
- {
- "syntax": "provide(MyService, {useClass: MyMockService})",
- "bold": [],
- "description": "
provide|useClass\nSets or overrides the provider for MyService to the MyMockService class.
\n"
- },
- {
- "syntax": "provide(MyService, {useFactory: myFactory})",
- "bold": [],
- "description": "
provide|useFactory\nSets or overrides the provider for MyService to the myFactory factory function.
\n"
- },
- {
- "syntax": "provide(MyValue, {useValue: 41})",
- "bold": [],
- "description": "
provide|useValue\nSets or overrides the provider for MyValue to the value 41.
\n"
- }
- ],
- "index": 7
- },
- {
- "name": "Routing and navigation",
- "description": "
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';
\n",
- "items": [
- {
- "syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n { path: '/staticPath', component: ..., as: ...},\n { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
- "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": [
- "[router-link]"
- ],
- "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 promise.
\n"
- },
- {
- "syntax": "onActivate(nextInstruction, prevInstruction) { ... }",
- "bold": [
- "onActivate"
- ],
- "description": "After navigating to a component, the router calls component's onActivate method (if defined).
\n"
- },
- {
- "syntax": "canReuse(nextInstruction, prevInstruction) { ... }",
- "bold": [
- "canReuse"
- ],
- "description": "The router calls a component's canReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.
\n"
- },
- {
- "syntax": "onReuse(nextInstruction, prevInstruction) { ... }",
- "bold": [
- "onReuse"
- ],
- "description": "The router calls the component's onReuse method (if defined) when it re-uses a component instance.
\n"
- },
- {
- "syntax": "canDeactivate(nextInstruction, prevInstruction) { ... }",
- "bold": [
- "canDeactivate"
- ],
- "description": "The router calls the canDeactivate 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 promise that is resolved.
\n"
- },
- {
- "syntax": "onDeactivate(nextInstruction, prevInstruction) { ... }",
- "bold": [
- "onDeactivate"
- ],
- "description": "Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.
\n"
- }
- ],
- "index": 8
- }
-]
\ No newline at end of file
+[]
\ No newline at end of file