Data Binding

Data binding can be of two types.

1 ) attribute binding

2 ) property binding.

Attribute Binding: -

1) app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2) app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<div><input type="text" [value]="message"/></div>`
})
export class AppComponent {
  message: string = 'Angular – attribute Binding Syntax';
}

Property Binding: -

1) app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2) app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
      <div>
        <h1 [textContent]="message"></h1>
      </div>
  `
})
export class AppComponent {
  message: string = 'Angular – Property Binding Syntax';
}