Skip to main content

Data Binding

Contents ​

Definition​

  • Linking TS file (Logic) to HTML Template (View) is called Data Binding

Interpolation​

ArticleComponent.HTML
<p>
    {{ name }}
</p>
ArticleComponent.TS
name : string = 'Article Name';

Property Binding​

ArticleComponent.HTML
<a title="{{ title_variable }}">Article31</a>
<!-- or -->
<a [title]="title_variable">Article31</a>
ArticleComponent.TS
title_variable : string = 'Open Article31';

Event Binding​

ArticleComponent.HTML
<button (click)="openArticle()">Open</button>
ArticleComponent.TS
openArticle() : void {
    // Load article from backend
}

Event Binding keywords​

  • Remove 'on' from HTML DOM events to get Angular Event Bindings
  • Examples:
    • onclick="function" → (click)="function"
    • onKeyup="function" → (keyup)="function"

Passing event data​

  • Every event contains $event which contains more information about the event occurred
  • Pass $event to the function to act on it
  • Example: (click) → $event → contains click location
ArticleComponent.HTML
<button (click)="drawPoint($event)">Draw</button>
ArticleComponent.TS
drawPoint(event: MouseEvent) : void {
    // Use Mouse event methods
}

event.target​

  • All standard DOM event objects have a 'target' property which is a reference to the element that raised the event
  • In the below example event is raised on <input> element which has property 'value'
  • <input value="..."> → event.target.value
ArticleComponent.HTML
<input (keyup)="function($event)">Draw</input>
ArticleComponent.TS
function(event: any) : void {
    console.log(event.target.value)
}

Useful event bindings​

  • (click)
  • (keyup) → (keyup.enter) or (event.Key)
  • (focus)
  • (blur)
  • (ngModelChange)

Two-Way Binding​

ArticleComponent.HTML
<input [(ngModel)] = "name" type="text"/>

<p>{{ name }}</p>
ArticleComponent.TS
name : string;

ngModel​

  • Import FormsModule to use ngModel
AppModule
import { FormsModule } from '@angular/forms'

@NgModule({
   imports: [
      FormsModule,
   ],
})

[(ngModel)] = "name is equivalent to [ngModel] = "name" + (ngModelChange) = "name = $event"

  • Gives more control to act or modify data by defining a function for (ngModelChange) event
  • Useful to update parent component's data without adding an additional event handler
ArticleComponent.HTML
<input
    [ngModel] = "name"
    (ngModelChange)="capitalizeWord($event)"
    type="text"
/>

<p>{{ capitalized_name }}</p>
ArticleComponent.TS
capitalized_name : string;
capitalize(name : string){
    this.capitalized_name = name.toUppercase();
}

Template Reference Variable​

  • event.target → #name
  • All the snippets below have same result

Method 1​

ArticleComponent.HTML
<input
    [ngModel] = "name"
    (ngModelChange)="name=$event"
    type="text"
/>

<p>{{ name }}</p>
ArticleComponent.TS
name : string;

Method 2​

ArticleComponent.HTML
<input
    [ngModel] = "name"
    (ngModelChange)="setNameInTS($event)"
    type="text"
/>

<p>{{ name }}</p>
ArticleComponent.TS
name : string;

setName(input_text : string){
    this.name = input_text;
}

Method 3​

<input
    #name
    (keyup)="1"
    <!-- or -->
    <!-- assignment is not necessary as name.value returns value of input element -->
    (keyup)="name.value=$event.target.value"
    type="text"
/>

<!-- calling 'value' property of the 'name' reference variable -->
<p>{{ name.value }}</p>

Examples​

Capitalize UserInput in the textbox​

<input
    [ngModel] = "name"
    (ngModelChange)="name=$event.toUppercase()"
    type="text"
/>

<p>{{ name }}</p>
<input
    #name
    (keyup)="name.value=name.value.toUppercase()"
    type="text"
/>

<!-- calling 'value' property of the 'name' reference variable -->
<p>{{ name.value }}</p>
<input
    #name
    (keyup)="name.value=$event.target.value.toUppercase()"
    type="text"
/>

<!-- calling 'value' property of the 'name' reference variable -->
<p>{{ name.value }}</p>

Show button pressed by the user​

<input
    (keyup)="key_pressed=$event.key"
    type="text"
/>

<p>{{ key_pressed }}</p>