Angular 2 return data from RxJs subscribe Angular 2 return data from RxJs subscribe typescript typescript

Angular 2 return data from RxJs subscribe


I used Observables and Observers to build my solution. Since @Injectable creates a singleton class, I declared an Observable inside of it which I then exposed to my component. When I put any data into it, all subscribers get notified of the event. Warning: if you use this with zone.js 0.5, it won't work. Works with 0.6.

import {Observable} from 'rxjs/Observable';import {Observer} from 'rxjs/Observer';import 'rxjs/add/operator/share';import 'rxjs/add/operator/map';import 'rxjs/Rx';@Injectable()export class AuthService {    // expose to component    notification$: Observable<Notification>;    private observer: Observer<Notification>;    ....    constructor(private http: Http) {        this.notification$ = new Observable(observer => this.observer = observer).share();    }    authenticate({username, password}) {        let packet = JSON.stringify({            username: username,            password: password        });        let headers = new Headers();        headers.append('Content-Type', 'application/json');        this.http.post(`${this.baseUri}/authenticate/`, packet, {            headers: headers        })        .map(res => res.json())        .subscribe(            data => {                if (data.success && data.token) {                    this.saveJwt(data.token);                } else {                    this.deleteJwt();                }                // put data into observavle                 this.observer.next({                    message: data.message,                    type: data.success                });            },            err => {                // put data into observavle                  this.observer.next({                    message: 'Error connecting to server',                    type: false                })            },            () => {}        );    }}export class AuthComponent implements OnInit {    observable: Observable<Notification>;    ...    ngOnInit() {        // subscribe to the observable        this.observable = this.authService.notification$;        this.observable.subscribe(            data => {                ...            }        )    }}


You need to return the observable corresponding your request directly:

authenticate(username: string, password: string) {  let ret;  let packet = JSON.stringify({    username: username,    password: password  });  let headers = new Headers();  headers.append('Content-Type', 'application/json');  return this.http.post('http://localhost:5000/api/authenticate/', packet, {    headers: headers  })  .map(res => res.json());}

And the caller of the authenticate method must subscribe on it to receive the result:

this.service.authenticate('username', 'password').subscribe(  (result) => {    console.log('Result received');    console.log(result);  });