Overview of types of data binding in Angular and HTML 5 background concepts

1. 1
HTML Attributes, DOM
Properties and Angular
Data Binding

2. Discussion Agenda
• HTML Attributes and DOM Properties
• 3 Types of Data Binding
• Data Binding Targets
• One Way Binding
• Two Way Binding
• NgModel
2

3. Background – Data Binding
Data binding is a mechanism for coordinating what users see, with application
data values.
In the 90s, before data binding, we had to manually get and set values on our HTML
DOM in order to do this:
var getIt = document.getElementById(‘#elementToUpdate’);
getIt.innerHTML = ‘<p> No matter what, Douglas Crockford is cool </p>’
In the naughts, jQuery kindof helped us. It accomplished the above in a shorthand
format:
var $getIt = $(‘#elementToUpdate’).val();
$(‘#elementToUpdate’).html( ‘<em> jQuery was big in 2009! </em>’);
We can accomplish the above with Angular syntax in our templates, stay tuned!
3

4. Background: HTML Attributes and DOM Properties
• Attributes are defined by HTML. Properties are defined by the
DOM.
• Attributes initialize DOM properties and then they are done.
Property values can change; attribute values are static.
• Remember, the browser creates the DOM in memory by parsing
your HTML file on page load!
4

5. Background: HTML Attributes and DOM Properties
Example: Value attribute
1. HTML file contains tag <input type=‘text’ value=“Kirby /’>
2. User types “Meta Knight” in the input box
3. input.getAttribute( ‘value’ ) returns “Kirby”
The HTML attribute value sets the initial value. The DOM value property (what is
rendered) contains the current value
Example: Disabled attribute
<button disabled=‘false’> This button is always disabled </button>
The disabled attribute always initializes the DOM disabled property to true, no matter
what!
5

6. Background: HTML Attributes and DOM Properties
Angular template data binding works with DOM properties and events. Not
HTML attributes.
“ In the world of Angular, the only role of attributes is to initialize element
and directive state. When you write a data binding, you are dealing
exclusively with properties and events of the target object. HTML attributes
effectively disappear.”
DOM Controller
Events Values
Properties Functions
Angular Data Binding Statements bind DOM properties and events to
controller values and functions.
6

7. 3 Types of Data Binding
7
Data Source = Typescript Controller View Target = HTML

8. Data Binding Targets
8
Category Type Example
Two Way Two Way <input [( ngModel )] = “name” />
One Way
target to source
Event <button ( click ) = “onClick() > Save
</button>
One Way
source to target
Property <img [ src ] = “imageUrlFromController” >
One Way
source to target
Class <div [ class.special ]="isSpecial">Special</div>
One Way
source to target
Style <button [ style.color ]="isSpecial ? 'red' : 'green'">
One Way
source to target
Attribute <button [ attr.aria-label ] ="help">help</button>

9. One Way Binding – Property Binding
• Property Binding is used to set the value of the target property of an element using
the syntax below.
• Property binding can only set the value of the target property. It cannot read values
or react to events.
<img [ src ]= "heroImageUrl“ >
<img bind-src= "heroImageUrl“ >
9
Target property
Value defined in
controller

10. One Way Binding – Property Binding and Inputs
• Angular matches the target property name to an input on the target controller.
• Use the inputs array or the @Input decorator to map target property names to controller
properties.
<app-hero-child *ngFor="let hero of heroes“ [hero]="hero“ [master]="master"></app-hero-child>
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-hero-child’,
template: `<h3>{{hero.name}} says:</h3> <p>I, {{hero.name}}, am at your service,
{{masterName}}.</p> `
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
10

11. One Way Binding – Property Binding with Expressions
<div [ ngClass ]= "classes“ >[ngClass] binding to the classes property</div>
The value string can contain an expression.
• Make sure the expression evaluates to the proper type. (often a
string).
• Don’t forget the proper bracket (or “bind-”) syntax to avoid errors!
<div [ ngClass ]= " 1 > 2 ? class-a : class -b“ >expression example</div>
11

12. Property Binding or Interpolation?
When working with strings, interpolation and property binding are
identical!
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i>
title.</p>
12

13. One Way Binding – Attribute Binding
• You can use one way binding to set an attribute value if it does not map to a native HTML
element property. In this case, you are creating and setting the attribute.
• Attribute binding is the exception to the rule that a binding can only set a DOM property.
• Attribute binding can only be used with attributes that do not correspond to element
properties: Aria, SVG, table span attributes
<tr><td [ attr.colspan ] ="1 + 1">One-Two</td></tr>
<button [ attr.aria-label ] ="actionName">{{actionName}} with Aria</button>
13

14. One Way Binding – Class Binding
• Class binding is unique.
• You can replace the class attribute with a string of the class names:
<div class="bad curly special“ [ class ]="badCurly“ >Bad curly</div>
• You can also use the class attribute name to index into the classes array and access unique
values:
<!-- toggle the "special" class on/off with a property -->
<div [ class.special ]= "isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
[ class.special ]= "!isSpecial">This one is not so special</div>
14

15. One Way Binding – Style Binding
• Use the prefix ‘style’ and the name of a CSS style property:
[ style.style-property ] = ‘set-to-value’
<button [ style.color ] = "isSpecial ? 'red': 'green'">Red</button>
<button [ style.background-color ] = "canSave ? 'cyan': 'grey'" >Save</button>
15

16. One Way Binding – Event Binding
• Event binding listens for events on the view target and reacts to them via a template
statement executed by the controller.
• Event binding syntax consists of a target event name within parentheses on the left of an
equal sign, and a quoted template statement on the right
<button ( click ) = "onSave()“ >Save</ button>
An alternate, less-used syntax is the canonical ‘on’ prefix:
<button on-click = "onSave()“ > Save </ button>
Angular matches the target event with an element event or output property of the controller.
16

17. $Event and Event Handling Statements
• In an event binding, Angular sets up an event handler for the target event.
• When the event is raised, the handler executes the template statement.
• The Angular data binding passes information about the event through the $event object
which is a this pointer to the event’s execution scope.
<input [ value ] = "currentHero.name"
( input ) = "currentHero.name = $event.target.value" >
• To update the name property, the changed text is retrieved by following the path
$event.target.value.
• Components can define custom $event objects using the Angular built-in EventEmitter
class.
17

18. Two Way Binding [ ( ) ]
• Two way data binding is used to both display a data property and update it
when the data changes.
• Two way binding both sets a specific element property and listens for the
element change event.
[ Property Binding ] + ( Event Binding ) = [ ( Two Way Data Binding ) ]
Think “Banana In A Box “
18

19. Two Way Binding NgModel
• Angular includes built-in attribute directives which watch and modify the
behavior of other HTML elements, attributes, properties, components.
• NgModel creates a two way data binding to an HTML form element.
• Use NgModel to both display a property and update it when the view changes.
• (Don’t forget to import the FormsModule and add it to the NgModule’s imports
list
NgModel = ngModel data prop + ngModelChange event
<input [( ngModel )] = "currentHero.name“ > =
<input [ ngModel ] = “ currentHero.name ” ( ngModelChange ) =
“currentHero.name=$event “ >
The ngModel data property sets the element's value property and the
ngModelChange event property listens for changes to the element's value!
19