Cómo utilizar los valores de entrada en sus propios archivos en Angular.

Quiero tomar el valor de entrada que es el nombre de la ciudad. Luego agregar cadenas de URL (this.cityNameSearch), pero no funciona. ¿Cómo uso los valores de entrada en su archivo?

posts.component.ts

import { HttpClient } from ‘@angular/common/http’;
import { Component, OnInit, Input } from ‘@angular/core’;

@Component({
selector: ‘app-posts’,
templateUrl: ‘./posts.component.html’,
styleUrls: [‘./posts.component.css’]
})
export class PostsComponent {

@Input() cityNameSearch:string;

apikey:string = ‘f2b412c0e169b2dbc28e13691fc4566b’
url = ‘https://api.openweathermap.org/data/2.5/forecast?q=’ + this.cityNameSearch+ ‘&appid=’+this.apikey;

posts;
ngOnInit() {

}

constructor(private http: HttpClient) {

http.get(this.url).subscribe(response => {
  this.posts = response;
  console.log(this.posts)
  console.log(this._categoryId)
  })

}
}

app.component.ts

import { Component, } from ‘@angular/core’;

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

cityname:string;

onSubmit(){
console.log(this.cityname);
}
}

app.component.html