I am not getting the textbox value in typescript angular7

Question

I'm using angular7. Just make some textbox and then alert that textbox value. But I can't get the values in typescript. Please help me guys how to proceed more this step.

about.component.html

<input type="text" name="username">
<button (click)="lgbtnclick()" type="button" name="button"></button>

about.component.ts

  import { Component, OnInit } from '@angular/core';
  @Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
  })

  export class AboutComponent implements OnInit {
   name : string;

   constructor() { }

   ngOnInit() {
   }

   lgbtnclick(){
      alert(this.name)
      console.log(Error)
   }
}

alert message:

undefined

Answer 1

Set default value to "" for name property and use [(ngModel)]="name" for input type

HTML Code:

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Enter name" [(ngModel)]="name" >
  </mat-form-field>

  <button (click)="lgbtnclick()" type="button" name="button">Test</button>

TS Code:

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

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
  name: string="";

  constructor() { }

  ngOnInit() {
  }

  lgbtnclick() {
    alert(this.name)
    console.log(Error)
  }
}

Stackblitz