Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions modules/@angular/docs/cheatsheet/built-in-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Built-in directives
syntax:
`<section *ngIf="showSection">`|`*ngIf`
description:
Removes or recreates a portion of the DOM tree based on the showSection expression.
Removes or recreates a portion of the DOM tree based on the `showSection` expression.

@cheatsheetItem
syntax:
Expand All @@ -25,7 +25,7 @@ syntax:
<template ngSwitchDefault>...</template>
</div>`|`[ngSwitch]`|`[ngSwitchCase]`|`ngSwitchCase`|`ngSwitchDefault`
description:
Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of `conditionExpression`.

@cheatsheetItem
syntax:
Expand Down
8 changes: 5 additions & 3 deletions modules/@angular/docs/cheatsheet/class-decorators.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@ syntax(ts):
`@Injectable()
class MyService() {}`|`@Injectable()`
syntax(js):
`var OtherService = ng.core.Class({constructor: function() { }});
var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});`|`var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});`
`var OtherService = ng.core.Class(
{constructor: function() { }});
var MyService = ng.core.Class(
{constructor: [OtherService, function(otherService) { }]});`|`var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});`
description:
{@target ts}Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
{@endtarget}
{@target js}
Declares a service to inject into a class by providing an array with the services with the final item being the function which will receive the injected services.
Declares 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.
{@endtarget}
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ syntax(ts):
syntax(js):
`viewProviders: [MyService, { provide: ... }]`|`viewProviders:`
description:
Array of dependency injection providers scoped to this component's view.
List of dependency injection providers scoped to this component's view.


@cheatsheetItem
Expand Down
6 changes: 3 additions & 3 deletions modules/@angular/docs/cheatsheet/dependency-injection.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ syntax(ts):
syntax(js):
`{ provide: MyService, useClass: MyMockService }`|`provide`|`useClass`
description:
Sets or overrides the provider for MyService to the MyMockService class.
Sets or overrides the provider for `MyService` to the `MyMockService` class.


@cheatsheetItem
Expand All @@ -18,7 +18,7 @@ syntax(ts):
syntax(js):
`{ provide: MyService, useFactory: myFactory }`|`provide`|`useFactory`
description:
Sets or overrides the provider for MyService to the myFactory factory function.
Sets or overrides the provider for `MyService` to the `myFactory` factory function.


@cheatsheetItem
Expand All @@ -27,4 +27,4 @@ syntax(ts):
syntax(js):
`{ provide: MyValue, useValue: 41 }`|`provide`|`useValue`
description:
Sets or overrides the provider for MyValue to the value 41.
Sets or overrides the provider for `MyValue` to the value `41`.
Original file line number Diff line number Diff line change
Expand Up @@ -4,77 +4,83 @@ Class field decorators for directives and components
@description
{@target ts}`import { Input, ... } from '@angular/core';`{@endtarget}
{@target js}Available from the `ng.core` namespace{@endtarget}
{@target dart}`import 'package:angular2/core.dart';`{@endtarget}

@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@Input() myProperty;`|`@Input()`
syntax(js):
`ng.core.Input(myProperty, myComponent);`|`ng.core.Input(`|`);`
description:
Declares an input property that we can update via property binding (e.g.
Declares an input property that you can update via property binding (example:
`<my-cmp [myProperty]="someExpression">`).


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@Output() myEvent = new EventEmitter();`|`@Output()`
syntax(js):
`myEvent = new ng.core.EventEmitter(); ng.core.Output(myEvent, myComponent);`|`ng.core.Output(`|`);`
`myEvent = new ng.core.EventEmitter();
ng.core.Output(myEvent, myComponent);`|`ng.core.Output(`|`);`
description:
Declares an output property that fires events to which we can subscribe with an event binding (e.g. `<my-cmp (myEvent)="doSomething()">`).
Declares an output property that fires events that you can subscribe to with an event binding (example: `<my-cmp (myEvent)="doSomething()">`).


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')`
syntax(js):
`ng.core.HostBinding('[class.valid]', 'isValid', myComponent);`|`ng.core.HostBinding('[class.valid]', 'isValid'`|`);`
`ng.core.HostBinding('[class.valid]',
'isValid', myComponent);`|`ng.core.HostBinding('[class.valid]', 'isValid'`|`);`
description:
Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).
Binds a host element property (here, the CSS class `valid`) to a directive/component property (`isValid`).



@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
syntax(js):
`ng.core.HostListener('click', ['$event'], onClick(e) {...}, myComponent);`|`ng.core.HostListener('click', ['$event'], onClick(e)`|`);`
`ng.core.HostListener('click',
['$event'], onClick(e) {...}, myComponent);`|`ng.core.HostListener('click', ['$event'], onClick(e)`|`);`
description:
Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).
Subscribes to a host element event (`click`) with a directive/component method (`onClick`), optionally passing an argument (`$event`).


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
syntax(js):
`ng.core.ContentChild(myPredicate, 'myChildComponent', myComponent);`|`ng.core.ContentChild(myPredicate,`|`);`
`ng.core.ContentChild(myPredicate,
'myChildComponent', myComponent);`|`ng.core.ContentChild(myPredicate,`|`);`
description:
Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
Binds the first result of the component content query (`myPredicate`) to a property (`myChildComponent`) of the class.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
syntax(js):
`ng.core.ContentChildren(myPredicate, 'myChildComponents', myComponent);`|`ng.core.ContentChildren(myPredicate,`|`);`
`ng.core.ContentChildren(myPredicate,
'myChildComponents', myComponent);`|`ng.core.ContentChildren(myPredicate,`|`);`
description:
Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
Binds the results of the component content query (`myPredicate`) to a property (`myChildComponents`) of the class.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
syntax(js):
`ng.core.ViewChild(myPredicate, 'myChildComponent', myComponent);`|`ng.core.ViewChild(myPredicate,`|`);`
`ng.core.ViewChild(myPredicate,
'myChildComponent', myComponent);`|`ng.core.ViewChild(myPredicate,`|`);`
description:
Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
Binds the first result of the component view query (`myPredicate`) to a property (`myChildComponent`) of the class. Not available for directives.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
syntax(js):
`ng.core.ViewChildren(myPredicate, 'myChildComponents', myComponent);`|`ng.core.ViewChildren(myPredicate,`|`);`
`ng.core.ViewChildren(myPredicate,
'myChildComponents', myComponent);`|`ng.core.ViewChildren(myPredicate,`|`);`
description:
Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.
Binds the results of the component view query (`myPredicate`) to a property (`myChildComponents`) of the class. Not available for directives.
5 changes: 2 additions & 3 deletions modules/@angular/docs/cheatsheet/directive-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ Directive configuration
@description
{@target ts}`@Directive({ property1: value1, ... })`{@endtarget}
{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@endtarget}
{@target dart}`@Directive(property1: value1, ...)`{@endtarget}

@cheatsheetItem
syntax:
Expand All @@ -16,9 +15,9 @@ Specifies a CSS selector that identifies this directive within a template. Suppo
Does not support parent-child relationship selectors.

@cheatsheetItem
syntax(ts dart):
syntax(ts):
`providers: [MyService, { provide: ... }]`|`providers:`
syntax(js):
`providers: [MyService, { provide: ... }]`|`providers:`
description:
Array of dependency injection providers for this directive and its children.
List of dependency injection providers for this directive and its children.
3 changes: 1 addition & 2 deletions modules/@angular/docs/cheatsheet/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,9 @@ Forms
@description
{@target ts}`import { FormsModule } from '@angular/forms';`{@endtarget}
{@target js}Available using the `ng.forms.FormsModule` module{@endtarget}
{@target dart}Available using `platform_directives` in pubspec{@endtarget}

@cheatsheetItem
syntax:
`<input [(ngModel)]="userName">`|`[(ngModel)]`
description:
Provides two-way data-binding, parsing and validation for form controls.
Provides two-way data-binding, parsing, and validation for form controls.
28 changes: 13 additions & 15 deletions modules/@angular/docs/cheatsheet/lifecycle hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,20 @@
Directive and component change detection and lifecycle hooks
@cheatsheetIndex 9
@description
{@target ts dart}(implemented as class methods){@endtarget}
{@target ts}(implemented as class methods){@endtarget}
{@target js}(implemented as component properties){@endtarget}

@cheatsheetItem
syntax(ts):
`constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`
syntax(js):
`constructor: function(MyService, ...) { ... }`|`constructor: function(MyService, ...)`
syntax(dart):
`MyAppComponent(MyService myService, ...) { ... }`|`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.
Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)`
syntax(js):
`ngOnChanges: function(changeRecord) { ... }`|`ngOnChanges: function(changeRecord)`
Expand All @@ -26,16 +24,16 @@ Called after every change to input properties and before processing content or c


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngOnInit() { ... }`|`ngOnInit()`
syntax(js):
`ngOnInit: function() { ... }`|`ngOnInit: function()`
description:
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
Called after the constructor, initializing input properties, and the first call to `ngOnChanges`.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngDoCheck() { ... }`|`ngDoCheck()`
syntax(js):
`ngDoCheck: function() { ... }`|`ngDoCheck: function()`
Expand All @@ -44,16 +42,16 @@ Called every time that the input properties of a component or a directive are ch


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngAfterContentInit() { ... }`|`ngAfterContentInit()`
syntax(js):
`ngAfterContentInit: function() { ... }`|`ngAfterContentInit: function()`
description:
Called after ngOnInit when the component's or directive's content has been initialized.
Called after `ngOnInit` when the component's or directive's content has been initialized.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`
syntax(js):
`ngAfterContentChecked: function() { ... }`|`ngAfterContentChecked: function()`
Expand All @@ -62,16 +60,16 @@ Called after every check of the component's or directive's content.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngAfterViewInit() { ... }`|`ngAfterViewInit()`
syntax(js):
`ngAfterViewInit: function() { ... }`|`ngAfterViewInit: function()`
description:
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
Called after `ngAfterContentInit` when the component's view has been initialized. Applies to components only.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngAfterViewChecked() { ... }`|`ngAfterViewChecked()`
syntax(js):
`ngAfterViewChecked: function() { ... }`|`ngAfterViewChecked: function()`
Expand All @@ -80,7 +78,7 @@ Called after every check of the component's view. Applies to components only.


@cheatsheetItem
syntax(ts dart):
syntax(ts):
`ngOnDestroy() { ... }`|`ngOnDestroy()`
syntax(js):
`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()`
Expand Down
35 changes: 18 additions & 17 deletions modules/@angular/docs/cheatsheet/ngmodules.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,52 @@ NgModules

@cheatsheetItem
syntax(ts):
`@NgModule({ declarations: ..., imports: ..., exports: ..., bootstrap: ...})
`@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {}`|`NgModule`
description:
Defines a module that contains components, directives, pipes and providers.
Defines a module that contains components, directives, pipes, and providers.

syntax(js):
`ng.core.NgModule({declarations: ..., imports: ..., exports: ..., bootstrap: ...}).
`ng.core.NgModule({declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...}).
class({ constructor: function() {}})`
description:
Defines a module that contains components, directives, pipes and providers.
Defines a module that contains components, directives, pipes, and providers.

@cheatsheetItem
syntax(ts js):
syntax:
`declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]`|`declarations:`
description:
List of components, directives and pipes that belong to this module.
List of components, directives, and pipes that belong to this module.

@cheatsheetItem
syntax(ts):
`imports: [BrowserModule, SomeOtherModule]`|`imports:`
description:
List of modules that are being imported into this module. Everything from the imported modules will
be available to `declarations` of this module.
List of modules to import into this module. Everything from the imported modules
is available to `declarations` of this module.

syntax(js):
`imports: [ng.platformBrowser.BrowserModule, SomeOtherModule]`|`imports:`
description:
List of modules that are being imported into this module. Everything from the imported modules will
be available to `declarations` of this module.
List of modules to import into this module. Everything from the imported modules
is available to `declarations` of this module.

@cheatsheetItem
syntax(ts js):
syntax:
`exports: [MyRedComponent, MyDatePipe]`|`exports:`
description:
List of components, directives and pipes that will be visible to modules that import this module.
List of components, directives, and pipes visible to modules that import this module.

@cheatsheetItem
syntax(ts js):
syntax:
`providers: [MyService, { provide: ... }]`|`providers:`
description:
Array of dependency injection providers visible to contents of this module as well as everyone
importing this module.
List of dependency injection providers visible both to the contents of this module and to importers of this module.

@cheatsheetItem
syntax(ts js):
syntax:
`bootstrap: [MyAppComponent]`|`bootstrap:`
description:
Array of components to bootstrap when this module is bootstrapped.
List of components to bootstrap when this module is bootstrapped.
Loading