Questions tagged [angular-observable]
The angular-observable tag has no usage guidance.
angular-observable
273
questions
1875
votes
35
answers
829k
views
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?
- 18.8k
129
votes
8
answers
110k
views
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 ...
- 53.2k
69
votes
5
answers
107k
views
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....
- 3,421
64
votes
3
answers
46k
views
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 ...
- 1,763
42
votes
5
answers
74k
views
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 ...
- 17.6k
31
votes
3
answers
6k
views
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 ...
- 321
26
votes
2
answers
93k
views
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:
...
- 4,334
26
votes
2
answers
69k
views
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, ...
- 10.3k
25
votes
3
answers
7k
views
Putting two async subscriptions in one Angular *ngIf statement
I have the following in my component template:
<div *ngIf="user$ | async as user>...</div>
Within the above div I would like to use the async pipe to subscribe to another observable only ...
- 3,545
22
votes
8
answers
37k
views
Angular 6: Property 'catch' does not exist on type 'Observable<Response>'?
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 ...
- 9,227
21
votes
1
answer
31k
views
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 ...
- 3,120
14
votes
4
answers
55k
views
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")....
- 3,049
11
votes
1
answer
12k
views
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 ...
- 9,027
11
votes
5
answers
10k
views
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<boolean> or Promise<...
- 8,312
10
votes
2
answers
18k
views
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 ...
- 14.1k
10
votes
2
answers
7k
views
Angular5 HttpInterceptor depending on the result of an Observable
I am trying to implement using Angular5 an HttpInterceptor to inject an Authorization header in all HTTP requests.
I rely on a third party library (ADAL, here called AuthService) that exposes a ...
- 1,170
8
votes
1
answer
13k
views
Complete not getting called in Observable subscribe method
I am working on the angular application and I am trying to use RxObservable. Below is the sample code.
getMyData(){
console.log('get my account data called');
this.AccountService
....
- 305
8
votes
2
answers
13k
views
Patchvalue with null object
I am using Angular 6 and I am trying to perform patchValue to populate my form with data from an observable http call. Everything works great except I have a secondaryPhone value that can be null the ...
- 679
8
votes
3
answers
16k
views
RXJS Stop propagation of Observable chain if certain condition is met
Introduction
I'm trying to create a route guard in Angular2+ using Observable from the shared service which holds the string value of current user role.
The problem is obviously in shifting my mind ...
- 2,133
7
votes
1
answer
15k
views
Angular 4 Subscribing to observable is not updating after change
I have a service with an observable which is being subscribed to via a component. This seems to work as the subscriber is showing the initial value. I have another component which is then updating the ...
- 4,334
6
votes
2
answers
12k
views
Type 'void' is not assignable to type 'ObservableInput<any>'
I am getting the following error
Argument of type '(user: User) => void' is not assignable to parameter
of type '(value: User, index: number) => ObservableInput'. Type
'void' is not assignable ...
- 69
6
votes
4
answers
6k
views
Angular 5 - Promise vs Observable - performance context
I have an Angular 5 site that receives data from a REST API, something like 1-4 requests to the API each page,
and what happens is that the requests sometimes take a long time(and sometimes not).
Now,...
- 1,117
6
votes
3
answers
11k
views
Multiple subscriptions nested into one subscription
I find myself puzzled trying to set a very simple rxjs flow of subscriptions. Having multiple non-related subscriptions nested into another.
I'm in an angular application and I need a subject to be ...
5
votes
2
answers
4k
views
Can this PrimeNG data table take directly an Observable (emitting array of objects) instead the standard array of objects?
I am working on an Angular application using PrimeNG. In particular I am using a PrimeNG DataTable, this coponent: https://primefaces.org/primeng/showcase/#/table
I have no problem using it in the way ...
- 41.9k
5
votes
1
answer
9k
views
How to update subscribers of Angular Observable
In my angular app, I have created an Observable to provide data updates to multiple components. When user clicks on a button, all the Subscribers of the Observable should be updated with different set ...
- 599
5
votes
1
answer
6k
views
Render a Observable object property in Angular template
I have the following Angular 7 component:
export class PostComponent implements OnInit {
post$: Observable<PostModel>;
constructor(private postService: PostService) { }
ngOnInit() {
...
- 37.9k
5
votes
4
answers
20k
views
How i can display a MatSnackBar from a Service with Angular Material?
Im using: Angular V6.1.0, Angular Material V6.4.1
Im trying catch the HTTP errors and show them using a MatSnackBar. I seek to show this in every component of my application (where there is an http ...
- 742
5
votes
2
answers
5k
views
Observables for Angular-forms
I have a form on my site.(person.firstName, lastName, DOB, Gender, Citizenship, etc...). My question is how I can observe whole form changes and get from this observation 2 things:
formControl with ...
5
votes
2
answers
2k
views
Observable stops firing even when catching the error
I'm facing with a very strange behavior on my project, I have a simple Angular service with the below code:
seatClick$ = new Subject<Seat>();
and a method on the service that fires the ...
- 387
4
votes
3
answers
5k
views
Simplest syntax for exposing a property as an observable?
I've seen tutorials showing umpteen different ways to implement observables in Angular. Many of them seem overly complicated for my purposes. Others are for previous versions and no longer work.
...
- 1,919
4
votes
2
answers
8k
views
Angular 5 Get correct Observable type from http request (why is it always Observable<Object>?)
I'm having a little trouble getting the correct observable type from an http.get request. Here is the function I'm having trouble on:
getMovie(title:string, year:number): Observable<Movie> {
...
- 1,013
4
votes
1
answer
1k
views
How to use observable subscription in forloop angular 7
I have an array users:
[0: {id:123, firstname:'xyz', lastname:'abc'}, 1:{id:456, firstname:'foo', lastname:'bar'}, 3:{id:567, firstname:'bar', lastname:'baz'}]
I have to loop through this array and ...
- 4,905
4
votes
1
answer
3k
views
Angular - Combine params and queryParams observables
How can I combine these to observables into one? They have the same functionality.
this.sub = this.route.params.subscribe((params: any) => {
// functionality
});
this.sub = this.route....
- 6,776
4
votes
2
answers
474
views
angular assign different observable to template with async based on condition (any memory leak ?)
I need to render data from different ngrx stores based on some flag. Both stores gives same type of data.
Approach 1
<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
<ng-...
- 1,241
4
votes
1
answer
1k
views
Subscribing to observables in route guards and its implications
I have a router guard called PermissionGuard which is initiated here
const routes: Routes = [
{
path: ':company',
component: CompanyComponent,
canActivate: [PermissionGuard],
...
- 1,069
4
votes
2
answers
10k
views
Type 'boolean' is not assignable to type 'ObservableInput<{}>'
I am working on angular 6 project. I am using canDeactivate for my routeGuards and a popup to show route leave message. But the issue is coming at my price-list-guard-service on hover .flatMap(isAllow)...
- 2,579
4
votes
1
answer
3k
views
Angular2 Reactive Forms and BehaviorSubject
I am new to Angular and cannot figure out updating reactive forms with async calls.
I have a reactive form based on an object model. Any change in the form triggers an HTTP request that might send ...
- 73
3
votes
1
answer
3k
views
Why Angular component is just updating after click?
I am new to Angular so I wouldnt be surprised that I am missing basic things. I tried Angular docs and googling, but no clue so far of why my component just updates the UI after a click?
My scenario ...
- 2,025
3
votes
1
answer
2k
views
Angular 5 - Observable return error cannot read property of undefined
I'm starting to implement a simple pagination using Spring Rest and Angular 5 inside my angular service when I call my web service using httpClient a get a correct response with the requested page it'...
- 4,798
3
votes
2
answers
10k
views
Async custom validator not working and showing error message in Angular 8
I am new to Angular 8 and trying to create custom async validator. Below is my code:
In my typescript file I am creating form field like below. I am using only async validator(no sync validator so ...
3
votes
1
answer
3k
views
This import is black listed , import a sub-module instead
Query 1
Below is the import section of my app component with observable import that got the code working.
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Observable } from '...
- 1,321
3
votes
2
answers
830
views
How to test the side effects of a subscription in an Angular component
I have an Angular component, MyComponent, which calls a method returning an Observable and subscribes to it, something like
export class MyComponent {
someProperty;
constructor(service: MyService)...
- 17.5k
3
votes
1
answer
71
views
Bridging result of a Promise to an Observable
Apologies in advance if asking a dumb question. I did a search and could not find the answer I was looking for.
I need the value for index which is returned in the Promise to be passed to my ...
- 55
3
votes
2
answers
909
views
Angular 2 consecutive http requests
In my angular data service I am trying to make two http request, with the second request depending on data from the first request. The first request is working fine, but for some reason the second ...
- 1,072
3
votes
1
answer
354
views
Type 'Observable<UI[] | Promise<any>>' is not assignable to type 'Observable<UI[]>'. Type 'UI[] | Promise<any>' is not assignable to type 'UI[]'
I need to return a list of UI and I do this method:
getList(): Observable<UI[]> {
return this.httpClient.get("/api/listui").pipe(map(
(response:Response) => { return ...
- 1,397
3
votes
1
answer
2k
views
Observable.subscribe() not called after using Router.navigate()
I'm creating a little app which show books from a database.
My project looks like this:
| presentational
| ---> book-card
| ---> book-details
| containers
| ---> book-item
| ---> books
| ...
3
votes
1
answer
13k
views
Expected object to be a kind of ScalarObservable, but was Observable
In my Angular application, I was using Observables in the following way:
getItem(id): Observable<Object> {
return this.myApi.myMethod(...); // returns an Observable
}
and I unit tested it:
...
- 58.7k
3
votes
0
answers
911
views
How to create multiple behaviour subjects dynamically and subscribe to them?
I am new to angular and rxjs, I am working on an Angular project and my component has a Behaviour subject declared as follows:
therapySessions: BehaviorSubject<any[]> = new BehaviorSubject([]);
...
3
votes
0
answers
684
views
Angular 4 : fill a complex model with a json HttpClient response
I am trying to fill a model with the response of an API call using the new HttpClientModule. However, the attributes of the model aren't "json types" but complexe types.
Do you have any idea how can ...
- 31
2
votes
2
answers
3k
views
Check if Observable is empty is not possible, so what other option I have?
I write an angular 11 and I'm pretty new to Observables and Subjects.
I have a mat-autocomplete component and it's results are divided to categories. the last category is an articles category and i ...
- 31.4k