NgModel directive

app.component.html

<h2>NgModel (two-way) binding</h2>

<fieldset>
    <label class="label">Initial Data</label>
    {{someData}}

    <label class="label" for="without">Without NgModel </label>
    <input [value]="someData" (input)="someData=getValue($event)">

    <label class="label" for="ngmodel">[(ngModel)]</label>
    <input [(ngModel)]="someData">

    <label class="label" for="ngmodel-change">(ngModelChange) = "someData = $event"</label>
    <input [ngModel]="someData" (ngModelChange)="someData=$event">

    <label class="label" for="ngmodel-lowercase">(ngModelChange) = "lowercase($event)"</label>
    <input [ngModel]="someData" (ngModelChange)="lowercase($event)">

    <label class="label" for="ngmodel-uppercase">(ngModelChange) = "uppercase($event)"</label>
    <input [ngModel]="someData" (ngModelChange)="uppercase($event)">
</fieldset>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {

  someData = "lachimi";

  getValue(event: Event): string {
    return (event.target as HTMLInputElement).value;
  }

  lowercase(str: string) {
    this.someData = str.toLowerCase();
  }

  uppercase(str: string) {
    this.someData = str.toUpperCase();
  }

}

app.component.css

.label {
    display: inline-block;
    width: 300px;
}