Почему мой шаблон не обновляется (Angular 6)?

Question

Я получаю данные через Google API и отправляю эти данные в родительский компонент.Но данные в родительском компоненте teplate не обновляются.Пожалуйста, помогите.

app.html

<app-google-autocomplete (coordinates)="getWeather($event)"></app-google-autocomplete>
<button type="button" (click)="reload()" *ngIf="city">reload</button>
<div *ngIf="city">
    {{ city.name }}
</div>

app.component.ts

import {Component} from '@angular/core';
import {WeatherService} from '../../services/weather.service';
import {Weather} from '../../models/weather';
import {City} from '../../models/city';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    weather: Weather;

    city: City;

    constructor(
        protected weatherService: WeatherService,
    ) {

    }

    getWeather(data): void {

        this.city = data;

        this.weatherService
            .getByCoord(data.lat, data.lon)
            .subscribe((weather) => {

                this.weather = weather.main;
            });
    }

    reload(): void {

        this.getWeather(this.city);
    }
}

google-autocomplete.component.html

<input id="pac-input" class="controls" type="text" placeholder="Search Box" #pac_input>

app-google-autocomplete.ts

/// <reference types="@types/googlemaps" />
import {Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';

@Component({
    selector: 'app-google-autocomplete',
    templateUrl: './google-autocomplete.component.html',
    styleUrls: ['./google-autocomplete.component.css']
})
export class GoogleAutocompleteComponent implements OnInit {

    @ViewChild('pac_input') searchElement;

    @Output() coordinates: EventEmitter<any> = new EventEmitter<any>();

    public searchBox: google.maps.places.SearchBox;

    public places;

    constructor() {

    }

    ngOnInit() {

        this.searchBox = new google.maps.places.SearchBox((
            this.searchElement.nativeElement
        ));

        this.searchBox.addListener('places_changed', (event) => {

            this.places = this.searchBox.getPlaces();

            if (this.places[0]) {

                this.coordinates.emit({
                    lat: this.places[0].geometry.location.lat(),
                    lon: this.places[0].geometry.location.lng(),
                    name: this.places[0].name
                });
            }
        });

    }
}

Уважаемые коллеги, я буду рад, если вы поможетемне.Я не знаю, что я делаю неправильно.Я использую Angular 6 в проекте Py.