21,340 questions
Advice
0
votes
3
replies
46
views
Handling and error checking with RxJs HTTP calls
I'm working with Angular 21 and I've added an interceptor like this:
export const httpErrorInterceptor: HttpInterceptorFn = (req, next) => {
return next(req).pipe(
catchError((error: ...
- 41
-3
votes
0
answers
32
views
request is not generating properly for websocket | Angular
getLiveGraph(uid: number, timeOut: number) {
const config = this.configStore.getData();
return webSocket<LiveGraph>(
`${config.wsBaseUrl}/subscriber/${uid}/live_graph/${timeOut}`
...
0
votes
0
answers
84
views
Angular 21 Vitest, FakeTimers and RxJS debounceTime
I could successfully migrate my Angular 20/Jasmine/Karma app to Angula r21/Vitest
All my tests are running correctly, except the ones that use debounceTime from RxJS
As a workaround for now, ny unit ...
- 66
1
vote
0
answers
43
views
Angular table fails to update after CRUD success
My app uses a facade service (singleton injectable) with signals for state management and RxJS for API calls.
I'm experiencing an inconsistent UI update problem with a table after a successful create ...
- 11
1
vote
1
answer
60
views
Is it possible to read stale data from an object passed by reference between parent and child components?
I'm working with Angular and have a scenario where a parent component passes an object (e.g., product) to a child component via property binding ([product]="product").
The child component ...
- 55
1
vote
1
answer
55
views
How to prevent RxJS to stop pipeline execution on the first exception
I'm trying to make 3 sequential GET requests using RxJS ajax operator. If one of the ajax requests throws an error(404 status code, for example), the rest won't execute. Is it possible pipeline to ...
- 374
-3
votes
1
answer
90
views
Usage of tap({ error }) vs. catchError for side effects [closed]
In Angular/RxJS, when should you use tap({ error }) and when catchError for side effects? How do you best separate the two logically or combine them?
For example, does resetting the UI to its previous ...
0
votes
1
answer
73
views
Strange behavior in compiled Angular 18 application TypeError: this._serviceXXXXXXXX is not a function
We are facing strange error in our application, some users facing problems with export functionality. Code below is what we have in our codebase:
exportProcess = this.exportProcessSubject.pipe(
...
- 101
1
vote
1
answer
98
views
Duplicate requests to backend API while implementing autosuggest functionality
I am trying to implement autosuggest functionality in my Angular app.
The desired flow should be as:
user types in something
an autosuggest list will populate
user may select one item from the list ...
3
votes
1
answer
34
views
RxJS switchmap-like operator that gives me the result of the first observable too
Suppose I want to do the following
this.http.get(...).pipe(
switchMap(httpResult => this.database.storeValue(httpResult.objectA)
).subscribe((databaseResult) => {
// I have lost the ...
1
vote
1
answer
177
views
How to understand and fix this npm dependency issue with rxjs when updating Angular
I spent hours reading about npm dependencies issues here, but I still don't really understand most dependencies error messages, they often don't really make sense and sometimes the dependency ...
- 3,930
0
votes
1
answer
108
views
After DELETE callback works in same file but not in a service
I am making an Angular frontend and got really unexpected behaviour after an HTTP DELETE call.
When in component code I call directly HttpClient.delete, it logs 'test'.
If I call the delete in a ...
1
vote
2
answers
119
views
How can I run a concurrent mergeMap in RxJS with a variable batch size?
I have a stream of predicates I want to send to an API to execute. I only need to identify the first four (for example) that return true.
Although I can send API requests in parallel, each API call is ...
- 1,176
4
votes
1
answer
84
views
Should we use NgZone.runOutsideAngular() when handling fromEvent with filters in Angular
I came across this implementation of the outsideCLick directive
ngOnInit() {
this._ngZone.runOutsideAngular(() => {
fromEvent<MouseEvent>(document, DomEventsEnum.MOUSEDOWN, { ...
- 121
1
vote
1
answer
107
views
TS2740: Type '{}' is missing the following properties from type 'ExpenseModel[]': length, pop, push, concat, and 26 more
[ERROR] TS2740: Type '{}' is missing the following properties from type 'ExpenseModel[]': length, pop, push, concat, and 26 more. [plugin angular-compiler]
src/app/modules/expenses/pages/expenses-...
- 66.2k
1
vote
1
answer
175
views
Angular API data not loading on page refresh unless user triggers interaction
I have an Angular 20+ application with a route /explore-developers that should load a list of developers from my backend API when the page is opened.
I have an Angular 16 application with a route /...
- 11
2
votes
2
answers
107
views
How should I make series of API calls with the middle one needing time?
I need to make a series of calls to an API. Here is what should happen:
Call 1: Make the first call which returns an ID.
Call 2: Use the ID to make the second call. The second call will come back ...
- 33
1
vote
1
answer
122
views
Test coverage not detected with toSignal and debounceTime
I have a component in my Angular project (v18.2.13) that has a reactive form to change a price field & an observable with the product info. I want to make a signal to know if the price form field ...
- 83
1
vote
1
answer
106
views
Multiple Requests at the same time from the same user
I'm facing an issue when submitting the verifyPINForm form. In some cases, the request for verifyOtp is being sent twice at the same time, which is causing issues on the backend side.
the component ...
1
vote
1
answer
232
views
Multiple resource API calls in Angular
I am trying to understand the new Angular resource API. One typical problem is to fetch several HTTP endpoints, combine the data and use it.
My current approach looks like this:
name = rxResource({ ...
- 672
1
vote
1
answer
230
views
Why do I get timeout error while fetching HTTP request inside Angular App?
I am using trying to create a small project based on Angular 20, where I provide front-end for data and charts from Fintacharts API, using SSR (Server-side Rendering), because CORS policies didn't ...
2
votes
1
answer
322
views
Angular 20 claims async pipe result to be unknown despite it being properly typed [closed]
I recently tried upgrading my project from Angular 19 to Angular 20. Now Angular throws the following error for all my async pipes:
Type 'unknown' must have a '[Symbol.iterator]()' method that returns ...
- 4,309
0
votes
0
answers
52
views
Tracking when dynamic structure of components is fully rendered in Angular
I have a nested structure of components in form of JSON that I get from an API.
componentStructure$ = apiCall();
The JSON looks like this:
structure = {
component,
innerComponents: [{
...
- 140
2
votes
4
answers
102
views
How to remove following RxJS antipattern?
I have some common code which needs to be executed as a callback in either of (if/else) aysnc function call. Following is the hypothetical snippet of my code.
if(condition1) {
asyncFun1()....
- 471
2
votes
0
answers
98
views
Angular BehaviorSubject emits twice when updating state used with ngModel and async pipe
I have an Angular(v20) standalone component that loads paged data from a server.
I use a BehaviorSubject to manage query state (search text, category, pagination).
Problem:
Whenever I type even one ...
- 388
0
votes
1
answer
45
views
Making flowing text with RxJS - pass string to another observable
I created a function which makes some text flowing:
private createFlowingText(message: string): Observable<string> {
const intrvl = interval(180);
const text = from(message);
...
- 4,684
4
votes
1
answer
58
views
How to make one MergeMap Observable sequence to start a new one after one is completed?
I need to upload a list of files while ensuring no more than 5 files are uploaded simultaneously.
While my code already limits concurrent uploads to 5, it waits for all 5 files in a batch to finish ...
- 1,856
2
votes
1
answer
47
views
How is 'next' functioning when called on a Subscription?
Due to a bug in my code, I accidentally called next on a RxJs subscription in a way that the compiler wasn't able to catch. In essence though, here's a MCVE:
import { Subject } from 'rxjs';
const sub ...
- 46.6k
0
votes
2
answers
78
views
in rxjs how can I make a new observable wait another observable before it continues?
Long story short, I have an async concurrency issue with an Authorization system.
I'm using rxjs to do these operations with observables.
In my application should be handled only one at a time that's ...
- 65
1
vote
1
answer
86
views
Angular displaying Observable Array
I have an API (Node.js) and an Angular frontend.
Now I want to loop through the data and display it. Therefore I perform an HTTP Request to the backend and get back an Observable which i then want to ...
- 75
0
votes
1
answer
87
views
How can I test that this public PDF exists in Angular?
In Angular 18, I want to return true or false whether a public PDF exist or not. For example, it should return true for :
https://sigesbre.brgm.fr/files/fiches/MDO_AgenceEau/MDO_AgenceEau_FRGG015.pdf
...
- 867
1
vote
1
answer
148
views
Async pipe not updating HTML
This might be a common problem but somehow i keep hitting wall with it
HTML
@if(data$ | async; as data) {
<span>{{data.status}}</span>
}
TS
dataId = input.required<string>();
data$ =...
- 8,592
1
vote
1
answer
95
views
How do you listen to disabled form control changes?
I have 2 form control text fields, one visible and the other disabled. Based on the value of the disabled field, I want to toggle buttons on visible text field. The value of the disabled field can be ...
- 166
2
votes
2
answers
168
views
How to use an Angular Route Title Resolver to wait on an observable?
I have an Angular 19 app and I am trying to add a route title resolver that gets the page title by looking up some data in the results of an Observable.
The issue is that when the app first loads, the ...
- 34.7k
1
vote
1
answer
167
views
How to cache query results during re-computation in Angular (19+) Signals?
This is actually a follow-up question of Is there a way to dynamically compute rxResource() or resource() in Angular (19)
We have a list of queries that is computed based on some component state. We ...
- 3,407
1
vote
2
answers
70
views
Prevent last emission - causes duplicate message
I need the LAST emission to call signals.onResponse(), thus the tap, so that my deep chat ui completes and re-enables the submit button after last message. I have to hack deep chat and use the ...
- 463
1
vote
1
answer
366
views
Is there a way to dynamically compute rxResource() or resource() in Angular (19)
Our use case: in a component, we compute queries for data that should be fetched based on some config. I tried creating rxResource() within a compute to get the data - but also loading status and ...
- 3,407
1
vote
2
answers
72
views
Rethrowing Errors When Using forkJoin
I'm working on an Angular (v18) SPA app. I have an API service with a get call:
public get(route: string, params?: HttpParams): Observable<any> {
const headers = {
method: 'GET'
}...
- 145
2
votes
1
answer
94
views
Why is it easy to check .closed on manual RxJS subscriptions, but not with takeUntilDestroyed() in Angular?
I am using RxJS for subscriptions in Angular. I noticed that when I manually subscribe to an observable and store the Subscription, I can easily check if it was unsubscribed using .closed, especially ...
- 6,653
2
votes
2
answers
83
views
I update a shown value from a subscription, why is my new value not shown? [duplicate]
I have an Angular component that shows a member variable of its TypeScript class. I subscribe to an rxjs Observable to update the value. I see that my rxjs Subscription is executed, but the new value ...
- 751
0
votes
1
answer
73
views
How to execute angular http calls in order
I have to make a couple of optional calls to upload files to get ids before I can send a post to a different route with those file ids.
const body = ...
const updateFile1Reference = map((file: File | ...
- 24.8k
1
vote
2
answers
107
views
Manipulate Observable data prior to subscribe method call
I've been using Angular with RxJS for about a year and a half now. I feel pretty comfortable in most areas, but I'm struggling a bit with RxJS. Several times now I've found myself wanting to ...
- 5,046
1
vote
1
answer
48
views
Error object undefined in Angular project built version
I'm handing errors in my Angular app using RxJS like this:
public downloadInClient(fileName: string) {
return (source: Observable<Blob>) =>
source.pipe(
map((blob: Blob) =&...
- 107
2
votes
2
answers
65
views
Angular NGRX test a selection subscription with pipe skip
My method works the way I want it to, however, the test is failing when I add the pipe(skip(1))
How do I test an observable with a pipeable skip. Here is my method:
getSomething() {
this.store....
- 179
2
votes
2
answers
115
views
Using forkJoin for nested API calls
I am struggling to understand the best way to implement nested calls to a API, using forkJoin (without using nested observables).
I have three APIs:
API to create student (/student/)
API to add ...
- 132
0
votes
1
answer
72
views
I am updating the angular component properties inside a if block and I feel it is not updating
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
if (event.url === '/common/time') {
this.zone.run(() => {
...
- 77
1
vote
1
answer
115
views
Data not being displayed on template but data is fetched
I am trying to display data using rxResource. However, data returned is always undefined. However, inspecting the network tabs shows the data is indeed being fetched and I'm just doing something wrong ...
- 435
2
votes
1
answer
80
views
How do I return two http requests sequentially in rxjs and use data from first in second call?
I've written a http function that works using switch map to get the value from one http request and use it as a parameter in the second, but how do I return not only the final http request but also ...
- 1,817
1
vote
1
answer
96
views
Retry HTTP request
I have Angular service which is used in the Angular pipe. The job of that service is to do a HTTP request and fetch translations. Idea is to have a pipe which returns a Observable that only first ...
- 315
0
votes
1
answer
207
views
How do I set an empty array as default value in toSignal?
I have a DataHandler service that calls a database service and returns the value to the calling component. The database service returns an observable of an array, while I'd like the data handler to ...
