Angular Data Binding

Data binding is nothing but binding data to the source. In Angular data binding is sync between model and view. It is a two way binding. When the data in the model changes the view will reflect the change. If the value in view changes, the model is updated with the change.

Curly braces {{}} are used to represent the data binding. This is called interpolation.

Lets see this app.component.ts, here the variable title is assigned a value “myfirstapp”

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myfirstapp';
}


Lets see this app.component.html, where we use {{title}} to display it in the browser.

angular-AppComponent

We can see the title is displayed in the browser.

myfirstapp-output

Will see more examples and options in the later section.
Subscribe Now