I am currently working on implementing a search functionality in my Angular app. In my app.component.html, I have the following code snippet:
<input type="text" [(ngModel)]="keystroke">
{{keystroke}} <!-- prints out each keystroke -->
In addition, I have an app.component.ts file where I store the keystroke value:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
keystroke = '';
}
So far, everything is functioning as expected and I can see each keystroke displayed in my search box.
However, my challenge now is to pass this keystroke data to the getResults() function within my task.service.ts (as shown below). The goal is to use the keystroke value for an API call.
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class TaskService {
constructor(private http: Http) {
console.log("Task service initialized...");
}
//get our result for each keystroke, return it as an observable (json)
getResults() {
return this.http.get('http://localhost:8080/api/KEYSTROKES')
.map(res => res.json());
}
}
I would appreciate some guidance on how I can transfer my keystroke data to my task.service.ts in order to execute the API call successfully.
Furthermore, as I am striving to develop this Angular 2 app using best practices, any feedback or suggestions are highly welcomed.