Przekazywanie danych między komponentami nie działa

Question

"Przerabiam" kurs Angulara  i mam bardzo prostą aplikację, która ma tylko pobrać z komponentu header a dokładnie z pola <input> wartość podaną przez użytkownika i wyświetlić ją w komponencie main.
Niestety pobrana wartość nie wychodzi poza komponent header - console.log wyświetla ją tylko z tego właśnie komponentu a z innych już nie. Kompilator nie zgłasza żadnych błędów, jak również konsola przeglądarki
Dlaczego więc to nie działa? Czy coś pominęłam?

header.component.ts

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

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

export class HeaderComponent implements OnInit {  

@Output() myCity: EventEmitter<string> = new EventEmitter();  

constructor() { }  

ngOnInit(): void {}  

getCity(city: string){    
console.log("Header: ",city);   
this.myCity.emit(city);  
}
}

 

header.component.html

<div class="container">
<input #city type="text" class="input" placeholder="Sprawdź pogodę dla miasta..."/>
<button class="button" (click) = "getCity(city.value)">Sprawdź</button>
</div>

 

app.component.ts

import {Component, Input} from '@angular/core';

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

export class AppComponent {  
title = 'untitled';  

city: string;  

getCityFromUser(city: string){    
this.city = city;    
console.log("App: ", this.city);  
}
}

 

app.component.html

<app-header>(myCity)="getCityFromUser($event)"</app-header>
<app-main>[city] = "city"</app-main>

 

main.component.ts

import {Component, Input, OnInit} from '@angular/core';

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

export class MainComponent implements OnInit {  

@Input()  city: string;  

constructor() { }  

ngOnInit(): void {  

}
}

 

main.component.html

<p>City: {{city}}</p>

 

Comments

Czy możesz to wystawić na codesandbox.io? Będzie łatwiej przetestować.