Learn Angular Signals RxJS Interop From a Practical Example

[@akitoueu]

It's a good way to do it, but you can make it simple by doing this: userId = signal(undefined); posts$ = toObservable(this.userId).pipe( debounceTime(200), switchMap((userId) => this.postsService.get(this.userId())) ); posts = toSignal(this.posts$); You don't even need the behaviour subject or the effect.

[@CodeShotsWithProfanis]

That's a good alternative. Thanks for sharing that!

[@sampsonorson]

Why are you using the userId signal within the switchMap?

[@CodeShotsWithProfanis]

​@@sampsonorson It seems to be more like a typo private posts$ = toObservable(this.userId).pipe( debounceTime(500), switchMap((userId) => this.postsService.get(userId)) );

[@andresescorcia6587]

To do this, so what is the meaning of using signals ??? You have to change the chip, create your debounce method, and that's all. The correct way is the effect shown in the video, let die RXJS,

[@joaobentocandidobezerra6486]

The first one that gives an actual full view example on signals and http request. Was looking for something like this the whole day, thank you for that!🥰

[@luigidicarmino5849]

As always, a great overview and solutions on how signals can be used. More of them, please. Thanks for your great summary. 👍

[@CodeShotsWithProfanis]

Glad you liked it! Please feel free to suggest a use case where you would love to see how the Signals can be used

[@wiliamferraciolli5380]

just trying it out and got to the point where the toSignal function will create a read only Signal and not a WritableSignal so need to change it around a bit, but thanks for the tutorial, good explanation

[@aram5642]

Would you kindly consider making a video about SSR and hydration?

[@Nabulio85]

Great explanations. Thank you for sharing your knowledge

[@ugochukwuumerie6378]

Great video. What extension was used to label your parameter name and arguments?

[@CodeShotsWithProfanis]

Thanks! It's not an extension, it's this VSCode setting "typescript.inlayHints.parameterNames.enabled": "all"

[@giorgoskontis7185]

Amazing job as always!!

[@CodeShotsWithProfanis]

Oh thank you!

[@safiyudeen-m4f]

Could you tell me why do you put token inside the inject function please?

[@maciek77killer]

Hi, how can I typing posts: posts: Signal = toSignal() throw error, I can add Signal but it is good practice?

[@sanjivasen]

You are super star my friend

[@ridvancetin8393]

Hi, Fanis I'm Ridvan from Anixe; It's a good example for rxjs and signals as a real-world example. But it's looking like a bit nonreadable when there is more than one object 🤔

[@CodeShotsWithProfanis]

Can you elaborate a bit more? What do you mean by saying "when there is more than one object"?

[@ridvancetin8393]

@@CodeShotsWithProfanis I mean if I have another signals in the same component it will look a bit complex I think

[@g-luu]

I appriciate your videos but i am starting to doubt signals. Everything just looks like a mess and i dislike imperative code. The pinned comment makes it a lot cleaner but still though dont think im conviced signals are the future.

[@TayambaMwanza]

I've been using signals + rxjs for a couple weeks now, I believe it's the future, right now I have no more async pipe in my templates and that is really cool, no more ng-container + asynx just to create the normal variable and get the data.

[@additionaddict5524]

Imo, video is a bad example. Signal advantages are simple glitch free reactivity and ability to create computed properties. A typeahead is a clear cut case for using RxJs.

[@CodeShotsWithProfanis]

Thanks for your comment Bryan. Since Signals is all new to all of us we are learning new techniques/approaches. Are you saying that you prefer working with RxJS or do you have a different signals API in mind?

[@CodeShotsWithProfanis]

​@@additionaddict5524 I appreciate your comment! I believe the pinned comment suggests a better way of approaching this use case. Apart from the computed properties, the signals also offers a better change detection. If you would have to go with RxJS, you would have to use async pipe on the template. If you have something else in mind, please do share. We are all on the same boat trying to get things done on the right way ;)

[@additionaddict5524]

@@CodeShotsWithProfanis Should say, video is still useful, I would just do it differently. “Bad example” is no reflection on you. In fact I think trying /seeing this without RxJS is needed to understand boundaries of where signals do well and where RxJs should take over