This particular service is designed to return an array of 1, 2, 3 for testing purposes.
import {Injectable} from '@angular/core';
@Injectable()
export class CitiesService {
getCities() {
return ['1', '2', '3'];
}
}
The AppComponent serves as an autocomplete box. It utilizes Formbuilder to access the input field and obtain the value entered by the user.
The primary objective behind using CitiesService is to extract a list of cities from a JSON file.
import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs/RX';
import { FormBuilder, FormGroup, FormsModule } from '@angular/forms';
import { CitiesService } from './cities.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CitiesService]
})
export class AppComponent {
form: FormGroup;
searchTerm: string;
constructor(@Inject(FormBuilder) private _CitiesService: CitiesService, private _fb: FormBuilder){
var a = this._CitiesService.getCities();
this.form = _fb.group({
search: []
});
var search = this.form.controls['search'];
search.valueChanges
.subscribe(data => this.searchTerm = data);
}
}
However, I am encountering the following error:
EXCEPTION: this._CitiesService.getCities is not a function