Angular: Designing and Architecting Web Applications/

...

/

Submitting the Form

Submitting the Form

In this lesson, we'll focus on submitting the form.

We'll cover the following...

The first thing we’ll handle is the form submission. The Cocktail DB API requires that we provide it with a search query to filter the results of beverages. We have a form that will allow the user to input a search query. We’ll need to store the query and then submit it when the form is submitted.

Storing the query

We’ll create a property, called query, in the form.component.ts class file.

Press + to interact
import { Component, OnInit } from '@angular/core';



@Component({

  selector: 'app-form',

  templateUrl: './form.component.html',

  styleUrls: ['./form.component.css']

})

export class FormComponent implements OnInit {

  query = '';



  constructor() { }



  ngOnInit(): void {

  }

}

Next, we’ll update the query property whenever the user types in the form. Alternatively, we can retrieve the value the minute the user submits the form. However, we want to keep track of the latest value to be aware of the latest ...