Databinding – Two-Way-Databinding in Angular

Last Updated on February 17, 2022 by Pupli

server.component.ts

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  public serverName = 'Test Server';

  constructor() {
  }

  ngOnInit() {
  }

}

server.component.html

<label>Server Name</label>
<input type="text" [(ngModel)]="serverName">
<p>{{serverName}}</p>

Example 2

<my-cmp [(title)]="name">	

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

References
https://github.com/mhdr/AngularSamples/tree/master/008/mya-pp