Data Binding with Angular

Databinding in angular is the automatic synchronization of data between model (business logic) and view components (Template). When the model changes, the view reflects the change and vice versa.

Creating components with Angular: https://shradhayewale.medium.com/creating-components-with-angularjs-e93d9ca5bad0

Types of Binding:

1. String Interpolation
2. Property Binding
3. Event Binding
4. Two-way Binding

1. String Interpolation:

It will dynamically add text/string into HTML. Outputting data in a template. It is used to display a component property in the respective view template.

Syntax-: class=”{{variable_name}}”

server.component.ts

import { Component } from ‘@angular/core’
@Component({
  selector: ‘app-server’,
  templateUrl: ‘./server.component.html’
})
export class ServerComponent {
  serverId: number = 10;
  serverStatus: string = ‘offline’
  getServerStatus() {
    return this.serverStatus;
  }
}

server.component.html

<p>Server component with id {{ serverId }} and status              {{ getServerStatus() }} </p>

2· Property Binding

To store Boolean or other data types then use Property Binding.

Syntax-: [class]="variable_name"

The only difference between String Interpolation and Property binding is that we should not store non-string values in variables while using string interpolation.

servers.component.ts

import { Component, OnInit } from ‘@angular/core’
@Component({
  selector: ‘app-servers’,
  templateUrl: ‘./servers.component.html’
})
export class ServersComponent implements OnInit{
  allowNewServer = false;
  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 2000);
  }
  ngOnInit() {}
}

servers.component.html

<button class=”btn btn-primary”
[disabled]=”!allowNewServer”>Add server</button>
<p>Server component</p>

Initially, the “Add server” button is set to disable and will get enabled after the click event.

3. Event Binding:

Once we clicked the button, some event should happen. An event is created whenever either a key is pressed or on a mouse click.

servers.component.ts

import { Component, OnInit } from ‘@angular/core’
@Component({
  selector: ‘app-servers’,
  templateUrl: ‘./servers.component.html’
})
export class ServersComponent implements OnInit{
  serverCreationStatus = “Server not created yet!”
  ngOnInit() {}
  onCreateServer() {
    this.serverCreationStatus = “Server created!”
  }
}

servers.component.html

<button class=”btn btn-primary”
(click)=”onCreateServer()”>Add server</button>
<p> {{ serverCreationStatus }} </p>

4. Two-way Data binding

It is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

Event Binding + Property Binding -> Two-way Binding

For the two-way binding, we need to import FormsModule in app.module.ts. This will enable ngModel. Since ngModel is not a property included in the project we develop using ng new project-name, we need to include it by importing this module.

Syntax-: [(ngModel)] = "data"

Let’s have a look at an example :

servers.component.ts

import { Component, OnInit } from ‘@angular/core’
@Component({
selector: ‘app-servers’,
templateUrl: ‘./servers.component.html’
})
export class ServersComponent implements OnInit{
  serverCreationStatus = “Server not created yet!”
  serverName = ‘TestServer’;
  ngOnInit() {}
  onCreateServer() {
    this.serverCreationStatus = “Server is created!”
  }
  onUpdateServerName(event: any) {
    //Type casting as event type is any here
    this.serverName = (<HTMLInputElement>event.target).value;
  }
}

servers.component.html

<input type = "text" class="form-control"
[(ngModel)] = "serverName">
<p> {{ serverCreationStatus }} Name of server is {{ serverName }} </p>
<button class="btn btn-primary"(click)="onCreateServer()">Add server</button>

In this example, It will trigger the input event and update the value of “serverName” in our component automatically. Since it is 2-way binding it is also updating the value of the input element if “serverName” is updating anywhere else.

Output:

Combination of all data bindings

References:

1. https://www.geeksforgeeks.org/angularjs-data-binding/?ref=lbp
2. https://www.udemy.com/course/the-complete-guide-to-angular-2/