diff --git a/modules/angular2/docs/cheatsheet/class-decorators.md b/modules/angular2/docs/cheatsheet/class-decorators.md new file mode 100644 index 0000000000..fce211feb2 --- /dev/null +++ b/modules/angular2/docs/cheatsheet/class-decorators.md @@ -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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/component-configuration.md b/modules/angular2/docs/cheatsheet/component-configuration.md new file mode 100644 index 0000000000..ce06c71bca --- /dev/null +++ b/modules/angular2/docs/cheatsheet/component-configuration.md @@ -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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md new file mode 100644 index 0000000000..18dde328fb --- /dev/null +++ b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md @@ -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. +`` + + + +@cheatsheetItem +`@Output() myEvent = new EventEmitter();`|`@Output()` + +Declares an output property that fires events to which we can subscribe with an event binding, e.g. `` + + + +@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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/directive-configuration.md b/modules/angular2/docs/cheatsheet/directive-configuration.md new file mode 100644 index 0000000000..b7af71ad59 --- /dev/null +++ b/modules/angular2/docs/cheatsheet/directive-configuration.md @@ -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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/forms.md b/modules/angular2/docs/cheatsheet/forms.md new file mode 100644 index 0000000000..76d0917984 --- /dev/null +++ b/modules/angular2/docs/cheatsheet/forms.md @@ -0,0 +1,8 @@ +@cheatsheetSection +@name Forms +@description +`import {FORM_DIRECTIVES} from 'angular2/angular2';` + +@cheatsheetItem +``|`[(ng-model)]` +Provides two-way data-binding, parsing and validation for form controls. \ No newline at end of file