0% found this document useful (0 votes)
203 viewsAngular 2 Quick Reference PDF
Uploaded by
BlackmorthCopyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
203 viewsAngular 2 Quick Reference PDF
Uploaded by
BlackmorthCopyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
/ 8
e016 ‘Angular Cheat Sheet
ANGULAR CHEAT SHEET
‘A quick guide ta Angular syntax.
This cheat sheet is provisional and may change. Angular 2 is currently in Release Candidate,
Angular for TypeScript Cheat Sheet (v2.0.0-rc.2)
import {bootstrap} from
Ee)
UTE!
sootstrap Bootstraps an application with
ppcomponent, (MyService, { provide: ... }]}; MyAppComponent as the root component anc
configures the DI providers,
Beco nicd
Binds property value to the result
of expression Firstname
Binds attribute role to the result of
expression nyariarole
button (click)="readrainbow(Sevent)">
tiel lo {{ponyname} }
...
employer: {{employer?. conpanyName}
100" height hipsstangularlldoestsalostiguidechoatshoot ml Binds style property width tothe result of expression mysize in pixels. Units are optional Calls method readRainbow when e ick event is triggered on this button element (or its children) and passes in the event object. Binds a property to an interpolatec string, eg. "Hello Seabiscuit’ Equivalent to:
Binds text content to an interpolatec
string, e.4. “Hello Seabiscuit’
Sets up two-way data binding
Equivalent to:
Creates a local variable
movieplayer that provides access
tothe video element instance in
data-binding and event-binding
expressions in the current template.
The * symbol means that the
current element will be turned into ar
embedded template. Equivalent to:
jet item of list">
...
‘template>
template ngswitchoefault>...
hwhen="case2Literalstring">.
Removes or recreates a portion of the DON
tree based on the shows
ction expression
Turns the li element and its contents into a
template, and uses that to instantiate a view
for each item in lst.
Conditionally swaps the contents of the div
by selecting one of the embedded templates
based on the current value of
conditionExpression,
Binds the presence of CSS classes on the
element to the truthiness of the associated
‘map values. The right-hand side expressior
should return {class-name: true/false) map
ST aCe apse)
SPOTL y ec
Provides two-way date-binding, parsing and validatior
for form controls.
Ore acd
import {Directive, ar
Pao
Bcomponent({...}) Declares that a class is a component and provides
class mycomponent() {} ‘metadata about the component.
Boirective({...}) Declares that a class isa directive and provides
class mypirective() (} ‘metadata about the directive.
hipsstangularlldoestsalestiguidechoatshoot tml 2016 Angular Cheat Shoe
BpipeC{...}) Declares that a class is a pipe and provides metadata
class myPipeQ) 1} about the pipe.
Btnjectable() Declares that a class has dependencies that should be
class myservice() {2 injected into the constructor when the dependency
rniector is creating an instance of this class.
cena as eeac Ls
Dred
selector: '.cool-button:not(a) 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
providers: [Myservice, { provide: ... } Array of dependency injection providers for this
directive and its children.
ee ec see
eeu ea Coca an cea)
Ceo
viewProviders: [MyService, { provide: ... }! Array of dependency injection providers scoped te
this components view.
template: ‘Hello {{name}}" Inline template / external template URL of the
templateurl: 'my-component.htnl component's view.
styles: ['.primary {color: red}! List of inline CSS styles / external stylesheet URLs
styleurls: ['my-component.css"] for styling component's view.
Airectives: [MyDirective, MyComponent. List of directives used in the the component's
template,
vipes: [MyPipe, OtherPipe List cf pipes used in th ovents temalate,
aa Cries
Class field decorators for directives and components
UTE)
BrnputC myProperty Declares an input property that we can
update via property binding (e.g.
hipsstangularlldoestsalostiguidechoatshoot ml e22016 ‘Angular Cheat Sheet
).
Boutput() myevent = new Eventemitter() Declares an output property that fires
events to which we can subscribe with ar
event binding (e.g
-ny-cmp
(nyevent:
).
" dosomething(
‘BHostBinding(’ [class.valid]') isvalid Binds a host element property (e.g. CSS
slass valid) to directive/component
oroperty (e.g. isValid).
GHostListener(*click", ['Sevent']) onclick(e) {.
Subscribes to a host element event (e.,
3k) with a directive/component methoc
e.g. onClick), optionally passing an
argument (Sevent).
\contentchild(myPredicate) mychiTdcomponent Binds the first result of the component
sontent query (myPredicate) to the
iyChildComponent property of the class
contentchi Idren(myPredicate) mychi Idcomponents: Binds the results of the component
tent query (myPredicate) to the
‘nyChildComponents property of the
8s,
vienchild(myPredicate) mychiTdcomponent Binds the first result of the component
view query (myPredicate) to the
‘myChildComponent property of the class
Not availahle for directives:
Bvienchi ldren(myPredicate) myChildconponents: Binds the results of the component view
query (myPredicate) tothe
rryChildComponents property ofthe
alass. Not avalable for directives.
TE Re ce Ed
' De Ee)
eo}
constructor (myservice: Myservice, The class constructor is called before any other
lifecycle hook. Use it to inject dependencies, but
avoid any serious work here.
gonchanges(changeRecord) { ... } Called after every change to input properties anc
before processing content or child views.
agonmnit) t ... J Called after the constructor, initializing inaut
hipsstangularlldoestsalostiguidechoatshoot ml e22016 ‘Angular Cheat Sheet
properties, and the frst call to
ngpocheck() { ... } Called every time that the input properties of a
component or a directive are checked. Use it te
extend change detection by performing a
istom check
agaftercontentinit() { ... } Zalled after ngOninit when the component's or
‘icective's content has heen initialized
agaftercontentchecked() { ... } Called after every check of the component's or
directive's content
agatterviewmnit® {... 3 Called after ngaAfterContentinit when the
component's view has been initialized. Applies to
components only.
agAfterviewchecked() { ... } Called after every check of the component's
view. Applies to components only.
agonestroy() { ++. J Called once, before the instance is destroyed,
Pea a
DDC ec
<@ [routerLinkJ="[_‘/mycmp", {myParam: ‘value’ } J">
Gcanactivate(() => 4... Hclass MyComponent() {J
routeronactivate(nextInstruction, previnstruction) {
routercanReuse(nextInstruction, previnstruction) { ..
routeronReuse(nextInstruction, previnstruction) {
hipsstangularlldoestsalostiguidechoatshoot ml
“wycmp' +
oo
i
}
wilicard routes,
Marks the location to loac
the component of the
active route
Creates a link to a different
view based on a route
Instruction consisting of a
route name and optional
parameters. The route
name matches the as
property of a configured
route. Add the’ prefix to
navigate to @ root route;
add the /' prefix for a child
route
‘A component decorator
defining a function that the
router should call first to
determine if it should
activate this component.
Should return a boolean or
a promise.
After navigating to a
component, the router
calls the component's
routerOnActivate methoc
(if defined),
The router calls a
component's
routerCanReuse method (if
defined) to determine
whether to reuse the
Instance or destroy it and
create a new instance.
Should return a boolean or
a promise.
Therouter calls the
8 e22016 ‘Angular Cheat Sheet
mponent’s
routerOnReuse method (if
defined) when it reuses a
ymponent instance,
routercanbeactivate(nextinstruction, previnstruction) { ... } The router calls the
routerCanDeactivate
methods (if defined) of
every component that
would be removed after a
navigation. The navigatior
proceeds if and only if al
such methods return true
ora promise that is
resolved
souteronbeactivate(nextinstruction, previnstruction) { ... J Called before the directive
's removed as the result of
a route change. May return
a promise that pauses
removing the directive unt
he promise resolves.
hnipsstngularlldoestsatostiguidchoatshoot tml
