angular2-observables

So I'd normally write my http requests like so Service getData(){ return this.http.get('url') } Component getTheData() { this.service.getData().subscribe( (res) => { //Do something }, (err) => { console.log('getData has thrown and error of', err) }) But looking through Angular documentation they seem to format it like so in a Service getHeroes(): Observable<Hero[]> { return this.http.get<Hero[]>(this.heroesUrl) .pipe( catchError(this.handleError('getHeroes', [])) ); } What's the implicit upside of this as it seems quite verbose to me and I've personally never had the need to pipe my errors. 1

I have a method that needs to wait for an observable to finish. I know observable are great for returning single pieces of data over time but I need to know when this observable has completely finished returning all of its data so I can run validation code on the object it has returned. The method getCustom subscribes to an observable run on the supplied url which then returns the observable. I am not too sure if this is the best way to approach this situation so I would appreciate if anyone could give me any advice or a direction to handle this. private validateQuoteRetrievalAnswers(reference

I need help as I am a bit lost right now. So, I have a component that dynamically injets a child component into its template using componentFactoryResolver , here is my HTML <div class="dialog"> <div #container></div> <button (click)="move('back')">Back</button> <button (click)="move('forwards')">Forwards</button> </div> also in my component I have an observable that captures the click of the buttons like so, here is my (edited / reduced) code // parent-component.ts @ViewChild('container', {read: ViewContainerRef}) public dialogContainer: ViewContainerRef; public navigationClick$: Observable

I'm trying to set up my router config using a Resolve that returns an Observable from a BehaviorSubject. I've tried this in both angular 4.0.0-beta8 and angular 2.4.8+router 3.4.8 Here's my service: @Injectable() export class MyService { private _data: BehaviorSubject<Array<string>> = new BehaviorSubject(undefined); constructor() {} public getData(): Observable<Array<string>> { this._data.next(['test1', 'test2', 'test3']); let asObservable = this._data.asObservable().delay(1000); asObservable.subscribe((myData) => { console.log([myData, 'this console message DOES show up']); }); // if I return

I am trying to learn reactive programming using RxJS. I was trying to create an observable from an array using Observable.from() method, but I am getting an error: Property 'from' does not exist on type 'typeof Observable' I scaffolded an Angular application using Angular CLI, so all the dependencies including RxJS package was imported correctly. In app.component.ts I added below import statements: import { Observable} from 'rxjs/Observable' import 'rxjs/observable/from' And my AppComponent class looks like this: export class AppComponent { numbers: number[] = [1, 2, 3, 4, 5]; callMyObservable

From my understanding of Angular and RxJs there are two ways to terminate Observables. You can unsubscribe() from them or use takeUntil() and complete() . Below are examples of each approach (in pseudocode). The unsubscribe() approach private _id: number; private _subscriptions: Subscription[] = []; constructor(private _route: ActivatedRoute) { this._getId(); } public ngOnDestroy(): void { this._subscriptions.forEach( subscription => subscription.unsubscribe() ); } private _getId(): void { this._subscriptions.push( this._route.params.subscribe(params => this._id = +params['id']) ); } The

I am trying to build a simple blog with Angular 2 and Firebase and I am having issues using async pipe in component. I get the error in the console. zone.js:344Unhandled Promise rejection: Template parse errors: The pipe 'async' could not be found (" [ERROR ->]{{ (blog.user | async)?.first_name }} "): BlogComponent@6:3 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: The pipe 'async' could not be found (" blog.component.ts import {Component, Input} from "@angular/core"; @Component({ selector: 'blog-component', templateUrl: './blog.component