how to use input values in it's own files in angular-CodePudding

I want to take the input value which is its city name. Then add URL (this.cityNameSearch) strings. but it does not work. How do I use input values on its file?

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

<form (submit) = "onSubmit()">
  <input type="text" name="cityname" placeholder="City Name" [(ngModel)]="cityname">
  <i class="fas fa-search-location"></i>
</form>
<app-posts [cityNameSearch]="cityname"></app-posts>

CodePudding user response：

have you tried using *ngIf on app-post to trigger the component,

<form (submit)="onSubmit()">
  <input
    type="text"
    name="cityname"
    placeholder="City Name"
    [(ngModel)]="cityname"
  />
  <i class="fas fa-search-location"></i>
</form>
<button (click)="onclear()">clear</button>

<app-post *ngIf="hidden" [cityNameSearch]="cityname"></app-post>

here is the sample sample