Angular cheatsheet: Simple input grabbing without formx

angular-cheat-simple-input-no-forms.md

Simple input without complex forms

The following is a quick example of how to simply grab input from user, without using Angular forms and form builder. Of course it is for very simple cases.

HTML Template

<form>

  <label for="firstName">First Name:</title>
  <input name="firstName" #firstName> <!-- create a template variable that binds to input element -->
  
  <br>
  
  <label for="lastName">Last Name</title>
  <input name="lastName" #lastName>
  
  <button (click)="submitName(firstName,lastName)"> <!-- pass the input element to click event -->
    Submit
  </button>
</form>

In Component Class

submitName(firstName: HTMLInputElement, lastName: HTMLInputElement) {
  // Then we can directly refer to elements as objects.
  console.log(`Submiting: ${firstName.value} ${lastName.value}`);
  return false; //returning false will stop event propagation, thus page does not reload.
}