The EventSpinner component is designed to subscribe to icons provided by the EventsService.
@Component({
selector: 'event-spinner',
template: `
<div class="col-xs-5">
Test <i class="fa fa-2x" [ngClass]="{'fa-check': icon == 'ok', 'fa-spin': icon == 'loading', 'fa-spinner': icon == 'loading', 'fa-times': icon == 'error'}" id="spin"></i>
</div>
`
})
export class EventSpinner implements OnInit {
icon: string;
constructor(public eventsService: EventsService) {
}
ngOnInit(): void {
this.eventsService.icons.subscribe((icon) => {
let old = this.icon;
this.icon = icon;
console.log("this.icon = " + this.icon + " (was " + old + ")");
});
}
}
When a web service request using @angular/http.get state changes ("loading"/"ok"/"error"), icons.next is called. However, there seems to be an issue where the class of the i tag doesn't get updated. Any ideas on how to resolve this?
EventsService.ts
@Injectable()
export class EventsService {
icons: Subject<string> = new Subject<string>();
constructor(public http: Http) {
}
subscribe(): Observable<Event[]> {
let url = (<any>window).__ext.API_URL + 'event/view';
let obs;
return Observable
.create((o) => {
obs = o;
obs.next();
})
.flatMap(() => {
this.icons.next("loading");
console.log("executing request");
return this.http.get(url)
})
.retryWhen(error => {
this.icons.next("error");
return error.delay(3000);
})
.map((response: Response) => {
this.icons.next("ok");
console.log("response received");
setTimeout(() => {
console.log("pushing next");
obs.next();
}, 1000);
return (<any>response.json()).map(item => {
return item;
});
});
}
}