Learn Front-End Development and Automated Testing with Angular/

...

/

Add Google Places Autocomplete

Add Google Places Autocomplete

Let's use our Google API key to autocomplete the location field of the event form.

We'll cover the following...

Below is the updated code so far:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Updated create event form

Update event creation form

Address the location input.

  1. Uncomment the HTML for location.
  2. On the input element, add the template variable #city. We’ll reference this shortly once we implement the autocomplete for Google Places.
  3. Add autocorrect="off" to prevent the browser from attempting to autocorrect any text within this input, because Google will handle it for us.
Press + to interact
<!--src/app/event/event-create/event-create.component.html-->
<div class="form-group">
  <label>Location</label>
  <input class="form-control"
         #city
         autocorrect="off"
         formControlName="location">
</div>

Adding autocomplete functionality

From here, update our imports from @angular/core, adding NgZone, ElementRef, and ViewChild.

Press + to interact
// src/app/event/event-create/event-create.component.ts
import { Component, OnInit, NgZone, ElementRef, ViewChild } from '@angular/core';
  1. ViewChild allows us to get an element from our view so that we have a reference to that element within our component.
  2. Because ViewChild is a reference to an element within our view, we’ll set its type as ElementRef.
  3. We’ll cover what NgZone does soon, when we add the Google
...