Cacher is the code snippet organizer for pro developers

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class ServersComponent implements OnInit {
  
  userName = ''; // set default value

  resetUserName() { // reset username function
    this.userName = ''; 
  }
  
  constructor() {
  }
  
  ngOnInit() {
  }
  
}

<input
 type="text"
 class="form-control"
 [(ngModel)]="userName">
<p>{{userName}}</p>

<button
 type="button"
 class="btn btn-primary"
 [disabled]="!userName.length"
 (click)="resetUserName()">Click</button>