Angular 6 for Enterprise-Ready Web Applications

Child-parent relationships with event emitters

Your child component should be completely unaware of its parent. This is key to creating reusable components.

We can implement the communication between the city search component and the current weather component leveraging app component as a parent element and let the app module controller orchestrate the data.

Let's see how this implementation will look:

1. The city-search component exposes an EventEmitter through an @Output property:

src/app/city-search/city-search.component.tsimport { Component, Output, EventEmitter } from '@angular/core'export class CitySearchComponent implements OnInit {  ...  @Output() searchEvent = new EventEmitter<string>()  ... this.search.valueChanges.debounceTime(1000).subscribe((searchValue: ...