Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

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.