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 expression should return {class-name: true/false} map.
\n"
}
],
"index": 3
},
{
"name": "Forms",
"description": "
\nAvailable using the ng.forms.FormsModule module
\n",
"items": [
{
"syntax": "
",
"bold": [
"[(ngModel)]"
],
"description": "
Provides two-way data-binding, parsing, and validation for form controls.
\n"
}
],
"index": 4
},
{
"name": "Class decorators",
"description": "
\nAvailable from the ng.core namespace
\n",
"items": [
{
"syntax": "var MyComponent = ng.core.Component({...}).Class({...})",
"bold": [
"ng.core.Component({...})"
],
"description": "
Declares that a class is a component and provides metadata about the component.
\n"
},
{
"syntax": "var MyDirective = ng.core.Directive({...}).Class({...})",
"bold": [
"ng.core.Directive({...})"
],
"description": "
Declares that a class is a directive and provides metadata about the directive.
\n"
},
{
"syntax": "var MyPipe = ng.core.Pipe({...}).Class({...})",
"bold": [
"ng.core.Pipe({...})"
],
"description": "
Declares that a class is a pipe and provides metadata about the pipe.
\n"
},
{
"syntax": "var OtherService = ng.core.Class(\n {constructor: function() { }});\nvar MyService = ng.core.Class(\n {constructor: [OtherService, function(otherService) { }]});",
"bold": [
"var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});"
],
"description": "
\n\nDeclares a service to inject into a class by providing an array with the services, with the final item being the function to receive the injected services.\n
\n"
}
],
"index": 5
},
{
"name": "Directive configuration",
"description": "
\nng.core.Directive({ property1: value1, ... }).Class({...})
\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": "
List of dependency injection providers for this directive and its children.
\n"
}
],
"index": 6
},
{
"name": "Component configuration",
"description": "
ng.core.Component extends ng.core.Directive,\nso the ng.core.Directive configuration applies to components as well\n
\n",
"items": [
{
"syntax": "moduleId: module.id",
"bold": [
"moduleId:"
],
"description": "
If set, the templateUrl and styleUrl are resolved relative to the component.
\n"
},
{
"syntax": "viewProviders: [MyService, { provide: ... }]",
"bold": [
"viewProviders:"
],
"description": "
List 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 or 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 or external stylesheet URLs for styling the component’s view.
\n"
}
],
"index": 7
},
{
"name": "Class field decorators for directives and components",
"description": "
\nAvailable from the ng.core namespace
\n",
"items": [
{
"syntax": "ng.core.Input(myProperty, myComponent);",
"bold": [
"ng.core.Input(",
");"
],
"description": "
Declares an input property that you can update via property binding (example:\n<my-cmp [myProperty]="someExpression">).
\n"
},
{
"syntax": "myEvent = new ng.core.EventEmitter();\nng.core.Output(myEvent, myComponent);",
"bold": [
"ng.core.Output(",
");"
],
"description": "
Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).
\n"
},
{
"syntax": "ng.core.HostBinding('[class.valid]',\n 'isValid', myComponent);",
"bold": [
"ng.core.HostBinding('[class.valid]', 'isValid'",
");"
],
"description": "
Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
\n"
},
{
"syntax": "ng.core.HostListener('click',\n ['$event'], onClick(e) {...}, myComponent);",
"bold": [
"ng.core.HostListener('click', ['$event'], onClick(e)",
");"
],
"description": "
Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
\n"
},
{
"syntax": "ng.core.ContentChild(myPredicate,\n 'myChildComponent', myComponent);",
"bold": [
"ng.core.ContentChild(myPredicate,",
");"
],
"description": "
Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
\n"
},
{
"syntax": "ng.core.ContentChildren(myPredicate,\n 'myChildComponents', myComponent);",
"bold": [
"ng.core.ContentChildren(myPredicate,",
");"
],
"description": "
Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
\n"
},
{
"syntax": "ng.core.ViewChild(myPredicate,\n 'myChildComponent', myComponent);",
"bold": [
"ng.core.ViewChild(myPredicate,",
");"
],
"description": "
Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
\n"
},
{
"syntax": "ng.core.ViewChildren(myPredicate,\n 'myChildComponents', myComponent);",
"bold": [
"ng.core.ViewChildren(myPredicate,",
");"
],
"description": "
Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
\n"
}
],
"index": 8
},
{
"name": "Directive and component change detection and lifecycle hooks",
"description": "
\n(implemented as component properties)
\n",
"items": [
{
"syntax": "constructor: function(MyService, ...) { ... }",
"bold": [
"constructor: function(MyService, ...)"
],
"description": "
Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
\n"
},
{
"syntax": "ngOnChanges: function(changeRecord) { ... }",
"bold": [
"ngOnChanges: function(changeRecord)"
],
"description": "
Called after every change to input properties and before processing content or child views.
\n"
},
{
"syntax": "ngOnInit: function() { ... }",
"bold": [
"ngOnInit: function()"
],
"description": "
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
\n"
},
{
"syntax": "ngDoCheck: function() { ... }",
"bold": [
"ngDoCheck: function()"
],
"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: function() { ... }",
"bold": [
"ngAfterContentInit: function()"
],
"description": "
Called after ngOnInit when the component's or directive's content has been initialized.
\n"
},
{
"syntax": "ngAfterContentChecked: function() { ... }",
"bold": [
"ngAfterContentChecked: function()"
],
"description": "
Called after every check of the component's or directive's content.
\n"
},
{
"syntax": "ngAfterViewInit: function() { ... }",
"bold": [
"ngAfterViewInit: function()"
],
"description": "
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
\n"
},
{
"syntax": "ngAfterViewChecked: function() { ... }",
"bold": [
"ngAfterViewChecked: function()"
],
"description": "
Called after every check of the component's view. Applies to components only.
\n"
},
{
"syntax": "ngOnDestroy: function() { ... }",
"bold": [
"ngOnDestroy: function()"
],
"description": "
Called once, before the instance is destroyed.
\n"
}
],
"index": 9
},
{
"name": "Dependency injection configuration",
"description": "",
"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": 10
},
{
"name": "Routing and navigation",
"description": "
\nAvailable from the ng.router namespace
\n",
"items": [
{
"syntax": "var routes = [\n { path: '', component: HomeComponent },\n { path: ':routeParam', component: MyComponent },\n { path: 'staticPath', component: ... },\n { path: '**', component: ... },\n { path: 'oldPath', redirectTo: '/staticPath' },\n { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nvar routing = ng.router.RouterModule.forRoot(routes);",
"bold": [
"ng.router.Routes"
],
"description": "
Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
\n"
},
{
"syntax": "\n
\n
\n",
"bold": [
"router-outlet"
],
"description": "
Marks the location to load the component of the active route.
\n"
},
{
"syntax": "\n
\n\n\n\n\n",
"bold": [
"[routerLink]"
],
"description": "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 / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
\n"
},
{
"syntax": "",
"bold": [],
"description": "The provided classes are added to the element when the routerLink becomes the current active route.
\n"
},
{
"syntax": "var CanActivateGuard = ng.core.Class({\n canActivate: function(route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canActivate: [CanActivateGuard] }",
"bold": [
"CanActivate"
],
"description": "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.
\n"
},
{
"syntax": "var CanDeactivateGuard = ng.core.Class({\n canDeactivate: function(component, route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
"bold": [
"CanDeactivate"
],
"description": "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.
\n"
},
{
"syntax": "var CanActivateChildGuard = ng.core.Class({\n canActivateChild: function(route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canActivateChild: [CanActivateChildGuard],\n children: ... }",
"bold": [
"CanActivateChild"
],
"description": "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.
\n"
},
{
"syntax": "var ResolveGuard = ng.core.Class({\n resolve: function(route, state) {\n // return Observable/Promise value or value\n }\n});\n\n{ path: ..., resolve: [ResolveGuard] }",
"bold": [
"Resolve"
],
"description": "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.
\n"
},
{
"syntax": "var CanLoadGuard = ng.core.Class({\n canLoad: function(route) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
"bold": [
"CanLoad"
],
"description": "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.
\n"
}
],
"index": 11
}
]
}