IWA/IWA-angular/src/app/students/students.component.html

<h2>Students</h2>

<div>
  <label>Get student by ID:
    <input #studentID/>
  </label>
  <button (click)="printStudent(studentID.value);">
    Print to console
  </button>
</div>

<div>
  <button (click)="deleteAll()">
    delete all
  </button>
  <button
    (click)="updateAll([newStudent(studentFirstName.value, studentLastName.value, studentEmail.value, studentTelephone.value)])">
    update all
  </button>
  <br>
  <label>Student firstname:
    <input #studentFirstName/>
  </label>
  <br>
  <label>Student lastname:
    <input #studentLastName/>
  </label>
  <br>
  <label>Student email:
    <input #studentEmail/>
  </label>
  <br>
  <label>Student telephone:
    <input #studentTelephone/>
  </label>
  <br>
  <!-- (click) passes input value to add() and then clears the input -->
  <button (click)="add(studentFirstName.value, studentLastName.value, studentEmail.value, studentTelephone.value);
                  studentFirstName.value=''; studentLastName.value=''; studentEmail.value=''; studentTelephone.value=''">
    add
  </button>
</div>

<ul>
  <li *ngFor="let student of studentList">
    <span
      class="badge">{{student.id}}</span> {{ student.firstname }} {{ student.lastname }} {{ student.email }} {{ student.telephone }}
    <button title="delete" (click)="delete(student)">delete</button>
    <button title="update"
            (click)="update(student, studentFirstName.value, studentLastName.value, studentEmail.value, studentTelephone.value)">
      update
    </button>
    <button title="patch"
            (click)="patch(student, studentFirstName.value, studentLastName.value, studentEmail.value, studentTelephone.value)">
      patch
    </button>
  </li>
</ul>