Data Binding Exercise

input.component.html

<!-- 
ASSIGNMENT FOR DATABINDING
1. input, that use two way binding to
2. paragraph that will detect the update in name using string interpolation
3. button only clickable if the name is not empty, if its empty if will disable (use property binding)
4. button that can reset the string for variable, name 
-->


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <label for="name">Name:</label>
      <input
        id="name"
        type="text"
        class="form-control"
        aria-label="Name"
        [(ngModel)]="username"
      />
      <br />
      <div class="text-primary">
        <p>{{ username }}</p>
      </div>

      <button
        class="btn btn-primary"
        (click)="onReset()"
        [disabled]="username === ''"
      >
        Reset User
      </button>
    </div>
  </div>
</div>

input.component.ts

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css'],
})
export class InputComponent implements OnInit {
  username: string = '';
  constructor() {}

  ngOnInit(): void {}

  onReset() {
    this.username = '';
  }
}