angular2-services

I'm trying to bind a src attribute of images inside an ngFor directive that looks like this: <div *ngFor="imageId of imageIds"> <img [attr.src]="imageSrc(imageId)" alt="{{imageId}}"> </div> the imageSrc method inside the component looks like this: imageSrc(imageId: string){ var hostUrl = "http://192.168.0.101:3000/"; var imageUrl = hostUrl+"images/"+imageId; var imgSrc = ""; this._imageService.getImage(imageId) .subscribe(image => { imgSrc = hostUrl + image.url }); return imgSrc; } The getImage function in the Injectable ImageService looks like this: getImage(id: string) { var _imageUrl =

I want to create a service which detects all keyboard input, translates the key strokes into actions based on a configurable mapping, and exposes observables which various elements can bind to to react to specific key presses. The following is a simplification of my code so far, it worked when HostListener was in a component, but now I've moved it into a service it never fires even though it is definitely initialised. Is it not possible to detect input like this in a service? import { Injectable, HostListener } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export

According to my understanding of Angular 2 rc5 , to make a service from another module (not AppModule ) available as a singleton to every component, even those lazy-loaded, we don't include the service in the providers array of that other module. We instead export it with RouterModule.forRoot() and import the result in AppModule According to the docs : The SharedModule should only provide the UserService when imported by the root AppModule. The SharedModule.forRoot method helps us meet this challenge...the SharedModule does not have providers ...When we add the SharedModule to the imports of

getHeroes (): Observable<Heros[]> { return this.http.get(this.heroesUrl) .map(this.extractData) .catch(this.handleError); } Where I add the headers and how? looking for a simple example. HuntedCodes You can define a Headers object with a dictionary of HTTP key/value pairs, and then pass it in as an argument to http.get() and http.post() like this: const headerDict = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Access-Control-Allow-Headers': 'Content-Type', } const requestOptions = { headers: new Headers(headerDict), }; return this.http.get(this.heroesUrl, requestOptions

My Angular 2 app has a logout feature. We want to avoid doing a page reload if we can (i.e. document.location.href = '/'; ), but the logout process needs to reset the app so when another user logs in there's no residual data from the previous session. Here's our main.ts file: import 'es6-shim/es6-shim'; import './polyfills'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { ComponentRef, enableProdMode } from '@angular/core'; import { environment } from '@environment'; import { AppModule } from './app/app.module'; if (environment.production === true) {

I was looking to experiment with a forkJoin mainly using the accepted answer here: Angular2 Observable.forkJoin of observable variables - ReferenceError: Observable is not defined I'm getting the above error message as forkJoin isn't available. Anyone know why? Angular 6 changes this up a bit. forkJoin has been converted to a regular function so, instead of: import {Observable} from 'rxjs/Observable'; ... return Observable.forkJoin( this.http.get('someurl'), this.http.get('someotherurl')); Use: import {forkJoin} from 'rxjs'; ... return forkJoin( this.http.get('someurl'), this.http.get(

I've a simple question about change detection. I have a component and a (global) service with a boolean inside. How can I make the component listen to that boolean and execute a function if that boolean changes? Thanks! Depending on how that boolean changes you could expose it as an Observable<boolean> on your service, and then subscribe to that stream in your component. Your service would look something like: @Injectable() export class MyBooleanService { myBool$: Observable<boolean>; private boolSubject: Subject<boolean>; constructor() { this.boolSubject = new Subject<boolean>(); this.myBool$

So I am trying to subscribe to a simple service that return data from a local JSON file. I have managed to get the service working, I can log it out in the function, but when I subscribe to the service in the angular 2 component, it is always undefined. I'm not sure why? Any help would be much appreciated. API service export class ApiService { public data: any; constructor(private _http: Http) { } getData(): any { return this._http.get('api.json').map((response: Response) => { console.log('in response', response.json()); //This logs the Object this.data = response.json(); return this.data; })