Search⌘ K
AI Features
Home
Courses
Angular: Designing and Architecting Web Applications

Submitting the Form

Explore how to handle form input and submission in Angular by tracking user input in real-time, preventing default page refresh on submit, and using event emitters to communicate data from child to parent components for further processing.

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.

TypeScript 3.3.4
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 updates in the DOM. This is beneficial ...