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