"description":"<p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n"
},
{
"syntax":"exports: [MyRedComponent, MyDatePipe]",
"bold":[
"exports:"
],
"description":"<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
"description":"<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
},
{
"syntax":"<div [style.width.px]=\"mySize\">",
"bold":[
"[style.width.px]"
],
"description":"<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
"description":"<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
},
{
"syntax":"<div title=\"Hello {{ponyName}}\">",
"bold":[
"{{ponyName}}"
],
"description":"<p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello ' + ponyName"></code></p>\n"
},
{
"syntax":"<p>Hello {{ponyName}}</p>",
"bold":[
"{{ponyName}}"
],
"description":"<p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>\n"
},
{
"syntax":"<my-cmp [(title)]=\"name\">",
"bold":[
"[(title)]"
],
"description":"<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
"description":"<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
},
{
"syntax":"<p *myUnless=\"myExpression\">...</p>",
"bold":[
"*myUnless"
],
"description":"<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code><template [myUnless]="myExpression"><p>...</p></template></code></p>\n"
"description":"<p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
"description":"<p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>\n"
"description":"<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>\n"
"description":"<p>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.</p>\n"
}
],
"index":3
},
{
"name":"Forms",
"description":"<p><code>import { FormsModule } from '@angular/forms';</code>\n</p>\n",
"items":[
{
"syntax":"<input [(ngModel)]=\"userName\">",
"bold":[
"[(ngModel)]"
],
"description":"<p>Provides two-way data-binding, parsing, and validation for form controls.</p>\n"
}
],
"index":4
},
{
"name":"Class decorators",
"description":"<p><code>import { Directive, ... } from '@angular/core';</code>\n</p>\n",
"description":"<p>Declares that a class is a directive and provides metadata about the directive.</p>\n"
},
{
"syntax":"@Pipe({...})\nclass MyPipe() {}",
"bold":[
"@Pipe({...})"
],
"description":"<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
},
{
"syntax":"@Injectable()\nclass MyService() {}",
"bold":[
"@Injectable()"
],
"description":"<p>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</p>\n"
"description":"<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
"description":"<p>List of dependency injection providers for this directive and its children.</p>\n"
}
],
"index":6
},
{
"name":"Component configuration",
"description":"<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
"items":[
{
"syntax":"moduleId: module.id",
"bold":[
"moduleId:"
],
"description":"<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
"description":"<p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>\n"
}
],
"index":7
},
{
"name":"Class field decorators for directives and components",
"description":"<p><code>import { Input, ... } from '@angular/core';</code>\n</p>\n",
"items":[
{
"syntax":"@Input() myProperty;",
"bold":[
"@Input()"
],
"description":"<p>Declares an input property that you can update via property binding (example:\n<code><my-cmp [myProperty]="someExpression"></code>).</p>\n"
},
{
"syntax":"@Output() myEvent = new EventEmitter();",
"bold":[
"@Output()"
],
"description":"<p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code><my-cmp (myEvent)="doSomething()"></code>).</p>\n"
"description":"<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
"description":"<p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>\n"
"description":"<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
"description":"<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
"description":"<p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>\n"
"description":"<p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>\n"
}
],
"index":8
},
{
"name":"Directive and component change detection and lifecycle hooks",
"description":"<p>(implemented as class methods)\n</p>\n",
"description":"<p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
},
{
"syntax":"ngOnChanges(changeRecord) { ... }",
"bold":[
"ngOnChanges(changeRecord)"
],
"description":"<p>Called after every change to input properties and before processing content or child views.</p>\n"
},
{
"syntax":"ngOnInit() { ... }",
"bold":[
"ngOnInit()"
],
"description":"<p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>\n"
},
{
"syntax":"ngDoCheck() { ... }",
"bold":[
"ngDoCheck()"
],
"description":"<p>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.</p>\n"
},
{
"syntax":"ngAfterContentInit() { ... }",
"bold":[
"ngAfterContentInit()"
],
"description":"<p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>\n"
},
{
"syntax":"ngAfterContentChecked() { ... }",
"bold":[
"ngAfterContentChecked()"
],
"description":"<p>Called after every check of the component's or directive's content.</p>\n"
},
{
"syntax":"ngAfterViewInit() { ... }",
"bold":[
"ngAfterViewInit()"
],
"description":"<p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>\n"
},
{
"syntax":"ngAfterViewChecked() { ... }",
"bold":[
"ngAfterViewChecked()"
],
"description":"<p>Called after every check of the component's view. Applies to components only.</p>\n"
},
{
"syntax":"ngOnDestroy() { ... }",
"bold":[
"ngOnDestroy()"
],
"description":"<p>Called once, before the instance is destroyed.</p>\n"
"description":"<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
"description":"<p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>\n"
"description":"<p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
"description":"<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
"description":"<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
"description":"<p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>\n"
"description":"<p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
