I am currently facing a challenge in passing a value from the HTML file to my component and then incorporating it into my JSON feed URL.
While I have successfully transferred the value to the component and displayed it in the HTML file, I am struggling to append it to the end of my JSON feed URL.
It's worth noting that both the component and HTML file are generated directly from Angular 2 CLI.
app.component.ts
import { Component } from '@angular/core';
import {Http} from '@angular/http';
import {HTTP_PROVIDERS} from '@angular/http';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
values = '';
onKey(value: string) {
this.values = value + ''; // pass this value to the URL below
}
people: Array<Object>;
constructor(http: Http) {
http.get('http://myurl.com/json_feed.php?q=' + this.values) // retrieve the value from above
.subscribe(res => {
this.people = res.json();
})
}
}
app.component.html
<h1>
{{title}}
</h1>
<input #box (keyup)="onKey(box.value)">
{{values}}
<ul *ngFor="let person of people">
<li class="text">
{{person.model}}
</li>
</ul>