Show Menu

Angular 2 Binding Cheat Sheet (DRAFT) by

Angular 2 Binding Model

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Data Binding

String Interp­olation
{{}} the use of double curly braces. It will be interp­reted and converted into a string. What ever is used in the string it is outputted. One direction
Property Binding
[] Bind to the property of an element or component. Property element is an NG2 property ie. [value] = "­nam­e". Flow into
Event Binding
() react to changes from the dom
Two way data binding
[(ngMo­dal)] for both input and output, eg [(ngMo­dal­)]=­"­nam­e"

Component Commun­ication

@Input­("al­ias­") <pr­ope­rty>
Used to receive input external to this component
@Outpu­t("a­lia­s") <ev­ent>
Used to commun­icate out of a component. Use EventE­mit­ter­<?>. eventE­mit­ter.em­it(­type)
Listening to events
(event­Emi­tNa­me)­="bind = $event­" the $event allows you to set and handle the output from the component
When listening to event being emitted its a good idea to use the built in conversion that type script provides to map the event proxy object onto the domain object being projected.

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi