docs(*): more cheatsheet docs
This commit is contained in:
parent
533b722c66
commit
756727b930
|
@ -0,0 +1,19 @@
|
|||
@cheatsheetSection Class decorators
|
||||
@description
|
||||
`import {Directive, ...} from 'angular2/angular2';`
|
||||
|
||||
@cheatsheetItem
|
||||
`@Component({...})
|
||||
class MyComponent() {}`|`@Component({...})`
|
||||
Declares that a class is a component and provides metadata about the component.
|
||||
|
||||
@cheatsheetItem
|
||||
`@Pipe({...})
|
||||
class MyPipe() {}`|`@Pipe({...})`
|
||||
Declares that a class is a pipe and provides metadata about the pipe.
|
||||
|
||||
@cheatsheetItem
|
||||
`@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.
|
|
@ -0,0 +1,27 @@
|
|||
@cheatsheetSection Component configuration
|
||||
@description
|
||||
`@Component extends @Directive`, so the @Directive configuration applies to components as well)
|
||||
|
||||
@cheatsheetItem
|
||||
`viewProviders: [MyService, provide(...)]`|`viewProviders:`
|
||||
Array of dependency injection providers scoped to this component's view.
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'`|`template:`|`templateUrl:`
|
||||
Inline template / external template url of the component's view.
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']`|`styles:`|`styleUrls:`
|
||||
List of inline css styles / external stylesheet urls for styling component’s view.
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`directives: [MyDirective, MyComponent]`|`directives:`
|
||||
List of directives used in the the component’s template.
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`pipes: [MyPipe, OtherPipe]`|`pipes:`
|
||||
List of pipes used in the component's template.
|
|
@ -0,0 +1,55 @@
|
|||
@cheatsheetSection Class field decorators for directives and components
|
||||
@description
|
||||
`import {Input, ...} from 'angular2/angular2';`
|
||||
|
||||
@cheatsheetItem
|
||||
`@Input() myProperty;`|`@Input()`
|
||||
|
||||
Declares an input property that we can update via property binding, e.g.
|
||||
`<my-cmp [my-property]="someExpression">`
|
||||
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@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()">`
|
||||
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@HostBinding('[class.valid]') isValid;`|`@HostBinding(\'[class.valid]\')`
|
||||
|
||||
Binds a host element property (e.g. css class valid) to directive/component property (e.g. isValid)
|
||||
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@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)
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
|
||||
|
||||
Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
|
||||
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
|
||||
|
||||
Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@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.
|
||||
|
||||
|
||||
@cheatsheetItem
|
||||
`@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.
|
|
@ -0,0 +1,14 @@
|
|||
@cheatsheetSection @Directive configuration
|
||||
@descripton
|
||||
`@Directive({ property1: value1, ... }) )`
|
||||
|
||||
@cheatsheetItem
|
||||
`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.
|
||||
|
||||
@cheatsheetItem
|
||||
`providers: [MyService, provide(...)]`|`providers:`
|
||||
Array of dependency injection providers for this directive and its children.
|
|
@ -0,0 +1,8 @@
|
|||
@cheatsheetSection
|
||||
@name Forms
|
||||
@description
|
||||
`import {FORM_DIRECTIVES} from 'angular2/angular2';`
|
||||
|
||||
@cheatsheetItem
|
||||
`<input [(ng-model)]=\"userName\">`|`[(ng-model)]`
|
||||
Provides two-way data-binding, parsing and validation for form controls.
|
Loading…
Reference in New Issue