Przerabiam ten https://videopoint.pl/kurs/angular-10-kurs-video-budowa-aplikacji-od-podstaw-rafal-sluja,vlara6.htm#format/w kurs 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>