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

Question

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>

try using this <app-posts [cityNameSearch]={{cityname}}></app-posts> — Nicho
– Nicho, Commented Nov 18, 2021 at 8:08
it gave error (emplate parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{cityname}}] in) — Alper Yıldırım
– Alper Yıldırım, Commented Nov 18, 2021 at 8:11

Nicho · Accepted Answer · 2021-11-18 09:04:33Z

1

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

answered Nov 18, 2021 at 9:04

Nicho

6061 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related