angular-cn/aio/content/cheatsheet/directive-and-component-decorators.md
Pete Bacon Darwin 600402d440 build(aio): big move of docs related files (#14361)
All the docs related files (docs-app, doc-gen, content, etc)
are now to be found inside the `/aio` folder.

The related gulp tasks have been moved from the top level
gulp file to a new one inside the `/aio` folder.

The structure of the `/aio` folder now looks like:

```
/aio/
  build/         # gulp tasks
  content/       #MARKDOWN FILES for devguides, cheatsheet, etc
    devguides/
    cheatsheets/
  transforms/    #dgeni packages, templates, etc
  src/
    app/
    assets/
    content/    #HTML + JSON build artifacts produced by dgeni from /aio/content.
                #This dir is .gitignored-ed
  e2e/           #protractor tests for the doc viewer app
  node_modules/ #dependencies for both the doc viewer builds and the dgeni stuff
                #This dir is .gitignored-ed
  gulpfile.js   #Tasks for generating docs and building & deploying the doc viewer
```

Closes #14361
2017-02-09 11:58:36 -08:00

3.1 KiB

@cheatsheetSection Class field decorators for directives and components @cheatsheetIndex 8 @description {@target ts}import { Input, ... } from '@angular/core';{@endtarget} {@target js}Available from the ng.core namespace{@endtarget}

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

@cheatsheetItem syntax(ts): @Output() myEvent = new EventEmitter();|@Output() syntax(js): myEvent = new ng.core.EventEmitter(); ng.core.Output(myEvent, myComponent);|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()">).

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

@cheatsheetItem 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)|); description: Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

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

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

@cheatsheetItem syntax(ts): @ViewChild(myPredicate) myChildComponent;|@ViewChild(myPredicate) syntax(js): ng.core.ViewChild(myPredicate, 'myChildComponent', myComponent);|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.

@cheatsheetItem syntax(ts): @ViewChildren(myPredicate) myChildComponents;|@ViewChildren(myPredicate) syntax(js): ng.core.ViewChildren(myPredicate, 'myChildComponents', myComponent);|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.