`<section *ng-if="showSection">`|`*ng-if`

Removes or recreates a portion of the DOM tree based on the showSection expression.

`<li *ng-for="#item of list">`|`*ng-for`

Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

`<div [ng-switch]="conditionExpression">

<template [ng-switch-when]="case1Exp">...</template>

<template ng-switch-when="case2LiteralString">...</template>

<template ng-switch-default>...</template>

</div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default`

Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

`<div [ng-class]="{active: isActive, disabled: isDisabled}">`|`[ng-class]`

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.

`@Component({...})

class MyComponent() {}`|`@Component({...})`

Declares that a class is a component and provides metadata about the component.

`@Pipe({...})

class MyPipe() {}`|`@Pipe({...})`

Declares that a class is a pipe and provides metadata about the pipe.

`@Injectable()

class MyService() {}`|`@Injectable()`

Declares that a class has dependencies that should be injected into the constructor when the dependency

injector is creating an instance of this class.

so the `@Directive` configuration applies to components as well

`viewProviders: [MyService, provide(...)]`|`viewProviders:`

Array of dependency injection providers scoped to this component's view.

`template: 'Hello {{name}}'

templateUrl: 'my-component.html'`|`template:`|`templateUrl:`

Inline template / external template url of the component's view.

`styles: ['.primary {color: red}']

styleUrls: ['my-component.css']`|`styles:`|`styleUrls:`

List of inline css styles / external stylesheet urls for styling component’s view.

`directives: [MyDirective, MyComponent]`|`directives:`

List of directives used in the the component’s template.

`pipes: [MyPipe, OtherPipe]`|`pipes:`

List of pipes used in the component's template.

Sets or overrides the provider for MyService to the MyMockService class.

Sets or overrides the provider for MyService to the myFactory factory function.

Sets or overrides the provider for MyValue to the value 41.

`@Input() myProperty;`|`@Input()`

Declares an input property that we can update via property binding, e.g.

`@Output() myEvent = new EventEmitter();`|`@Output()`

Declares an output property that fires events to which we can subscribe with an event binding, e.g. `<my-cmp (my-event)="doSomething()">`

`@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')`

Binds a host element property (e.g. css class valid) to directive/component property (e.g. isValid)

`@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`

Subscribes to a host element event (e.g. click) with a directive/component method (e.g., onClick), optionally passing an argument ($event)

`@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`

Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.

`@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`

Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.

`@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`

Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.

`@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`

Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.

`selector: '.cool-button:not(a)'`|`selector:`

Specifies a css selector that identifies this directive within a template. Supported selectors include: `element`,

`[attribute]`, `.class`, and `:not()`.

Does not support parent-child relationship selectors.

`providers: [MyService, provide(...)]`|`providers:`

Array of dependency injection providers for this directive and its children.

`<input [(ng-model)]="userName">`|`[(ng-model)]`

Provides two-way data-binding, parsing and validation for form controls.

(implemented as class methods)

`constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`

The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

`ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)`

Called after every change to input properties and before processing content or child views.

`ngOnInit() { ... }`|`ngOnInit()`

Called after the constructor, initializing input properties, and the first call to ngOnChanges.

`ngDoCheck() { ... }`|`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.

`ngAfterContentInit() { ... }`|`ngAfterContentInit()`

Called after ngOnInit when the component's or directive's content has been initialized.

`ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`

Called after every check of the component's or directive's content.

`ngAfterViewInit() { ... }`|`ngAfterViewInit()`

Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.

`ngAfterViewChecked() { ... }`|`ngAfterViewChecked()`

Called after every check of the component's view. Applies to components only.

`ngOnDestroy() { ... }`|`ngOnDestroy()`

Called once, before the instance is destroyed.

`@RouteConfig([

{ path: '/:myParam', component: MyComponent, as: 'MyCmp' },

{ path: '/staticPath', component: ..., as: ...},

{ path: '/*wildCardParam', component: ..., as: ...}

])

class MyComponent() {}`|`@RouteConfig`

Configures routes for the decorated component. Supports static, parameterized and wildcard routes.

`<router-outlet></router-outlet>`|`router-outlet`

Marks the location to load the component of the active route.

`<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">`|`[router-link]`

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.

`@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate`

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.

`routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`

After navigating to a component, the router calls component's routerOnActivate method (if defined).

`routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`

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

`routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`

The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.

`routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`

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 promise that is resolved.

`routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`

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.