Questions tagged [angular-observable]

270 questions
1848
votes
34 answers

What is the difference between Promises and Observables?

What is the difference between Promise and Observable in Angular? An example on each would be helpful in understanding both the cases. In what scenario can we use each case?
Rohit
  • 18,575
  • 3
  • 11
  • 9
121
votes
8 answers

flatMap, mergeMap, switchMap and concatMap in rxjs?

Someone, please explain the difference between SwitchMap and FlatMap in terms of Javascript ( in angular perspective, rxjs 5) In my understanding. SwitchMap only emits the latest observable value and cancels the previous observable. flatMap collects…
xkeshav
  • 53,360
  • 44
  • 177
  • 245
67
votes
5 answers

why should we use subscribe() over map() in Angular?

I am trying to take advantage of observables in angular2 and got confused on why should i use map() over subscribe(). Suppose i am getting values from a webApi, like this this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry') Now…
Lijin Durairaj
  • 3,341
  • 11
  • 31
  • 50
64
votes
3 answers

Could not use Observable.of in RxJs 6 and Angular 6

import { Observable, of } from "rxjs"; // And if I try to return like this return Observable.of(this.purposes); I am getting an error stating, Property 'of' does not exist on type 'typeof Observable'
Harish Krishnan
  • 1,693
  • 4
  • 17
  • 25
42
votes
5 answers

Angular 6 RXJS Import Syntax?

I'm migrating an Angular 5 app to the latest CLI and Angular 6 RC and all of my Observable imports are broken. I see that Angular 6 changes the way the imports work, but I can't find any definite reference as to how the syntax works. I had this in 5…
Rick Strahl
  • 17,302
  • 14
  • 89
  • 134
29
votes
3 answers

Why Angular uses Observable for HttpClient?

As per https://angular.io/tutorial/toh-pt6 In general, an observable can return multiple values over time. An observable from HttpClient always emits a single value and then completes, never to emit again. Which is indeed true, Http…
Namit
  • 301
  • 3
  • 6
26
votes
2 answers

Subscribe is not a function error

I am trying to subscribe to an observable from a service, it builds without error but I get the error "this.service.getBanners(...).subscribe is not a function" when viewing in the browser. Service: import { Injectable } from '@angular/core'; import…
Steve
  • 4,314
  • 3
  • 16
  • 21
25
votes
3 answers

Putting two async subscriptions in one Angular *ngIf statement

I have the following in my component template:
Sammy
  • 3,395
  • 7
  • 49
  • 95
25
votes
2 answers

How does HTTP error-handling work with observables?

I see a lot of tutorials doing something like this: http.get("...").subscribe( success => console.log('hello success'), error => console.log('bye error') ); I don't know how this works, since there aren't any types or anything, however I tried…
codepleb
  • 10,086
  • 14
  • 69
  • 111
22
votes
8 answers

Angular 6: Property 'catch' does not exist on type 'Observable'?

I am upgrading my app to Angular 6. I am upgrading from Angular 4, but the code below is causing errors in Angular 6, where it worked fine in Angular 4. The errors I am getting: Property 'of' does not exist on type 'typeof Observable' Error:…
Shubham Verma
  • 8,783
  • 6
  • 58
  • 79
21
votes
1 answer

Detect Click outside element in angular 4 using directives

I have used a custom directive to detect click outside an element in angular 2 but the same is not possible in angular 4. [plunkr] https://plnkr.co/edit/aKcZVQ?p=info When I try using the same code in angular-4 I get the following errors: 1.…
12
votes
4 answers

Angular Reactive forms : change vs valueChanges

I am using reactive forms in Angular 7. I have many fields that are dependent on other fields. What I am curious about of what should I use (change) or this.form.get("control_name").valueChanges? For ex. if both will work on inputs then I want to…
10
votes
4 answers

Execute Multiple Asynchronous Route Guards in Order

I know angular route guards execute in the specified order when the canActivate function returns a simple boolean, however, what if the guards return type Observable or Promise? Example in route: { path: 'confirm', …
Kevin LeStarge
  • 8,142
  • 4
  • 21
  • 34
9
votes
2 answers

Angular using the observable complete vs next handler and when to use each appropriately

Question - based on the Angular doc, when is it more appropriate to use next vs complete for my observable? I'm looking through someones Angular 7 project and I see a lot of code that looks like this below where some calls use next and some just use…
chuckd
  • 13,460
  • 29
  • 152
  • 331
9
votes
1 answer

Angular HTTP Interceptor subscribing to observable and then returning next.handle but throwing TypeError: You provided 'undefined'

I have a HTTP interceptor and before every request I check if the access token is expired, if it is, I subscribe to a http.post call from my service and then subscribe to it and when I get a new access token I call next.handle(request) like this: …
1
2 3
17 18