Today, we will see how we can use Signal with
Observable inside one application and use the power of RxJS and Power of Signal combined in
your application. So let's start the video. Hi everyone, this is Subrat, and you are
watching Fun of Heuristics. So on this channel, we make videos like this, which is related
to programming and web development. So please consider subscribing and hit the bell
icon if you haven't yet. On our last video, we have discussed what is Signal and how
you can use Signal in your application, and we have developed a to-do application
there. If you haven't watched that video, please go ahead and watch that one. I
will link them in the card. In this video, we'll discuss how you can use Observable and
Signal together to have a fuller application. So here, as you can see, we have an
application, which is just a to-do application, and this application we have
developed in our previous video. So here, you can add something, search the task if you
have any, or you can delete something. Okay, so this is the basic functionality, and
we have used Signal to achieve that. So today, we'll try to make this application
and try to plug that with a backend call. We'll simulate a backend call. I will not be
going to make an actual backend call here. I have created a data service here. If you go
here, it's just a mimic of a backend call. So here, what we need to do first, we need
to inject the data service and to change our Signal to an Observable. We have a method
called toSignal, which we can use either while instantiating a variable like this, or you
can use it inside a constructor. So first, we'll make a call to the server to have all
the tasks. So for that, we'll do this. So here, we are using toSignal, which will convert your
Observable to Signal. That's why the name is toSignal. And in that, we are passing our getTask.
If you go inside getTask, it is just returning an Observable of string array. So here, the strings
are our tasks, but think like this is mimicking you are calling a backend, getting the data as
a list of string or any format that matters. And if you remember, in a past video, we
saw that while instantiating a Signal, you need a default value. Suppose you are
instantiating a string Signal of type string, so you need to pass either an empty string or some
default value. Signal must contain some value. So here, we are saying that our initial value is
an empty array. And one thing to note here, and that's the benefit as well, when you do
this, Signal takes care of subscribing to this Observable and destroying that. That means
here, whenever our component will be destroyed, Signal will also be going to be destroyed,
and in turn, Observable will also be going to be unsubscribed. You can think this like
an async pipe, but you can use it everywhere. We are saying that we got our tasks, and
we are setting our old task array with the user task. Now, if you just save and you will
go to our application, and here you can see we are getting the data from the service,
and that is populated here. And everything else will be going to work because we haven't
done anything apart from calling the server, converting the Observable to Signal, and
assigning that value to our Signal here. Now we will see the addition scenario, how we're
going to add a task by calling our backend. So for that, the approach I have selected to create
an Observable here, I have just created an addSubject. So here, I will just comment this, and
inside this, I will just use this.addSubject.next and just emit some empty string. Here, I will
use this addSubject inside our constructor, and for that, we can do this. So what I am doing
here, I am using the addSubject, piping that with switchMap, calling our service addTask,
whichever data we are returning from that, I am just using a tap operator. You can use map or
tap according to your scenario, and just updating our tasks Signal here and assigning this Signal
to another variable just to use it in the future. And now, go and see how this works. Go to
our task, and I'll just try to do something, hit add, and see, after two seconds, it will be
added. And I have made a mistake here because I am emitting an empty string here instead
of the input value which we have entered there. So I'll just go ahead and update
this. Now, if you go to our application, and here you will see whenever I type something,
it will take 2 seconds to add, and it will be added. And why it's taking two seconds? Because
we have added a delay in our addTask. So this is what the power of toSignal with Observable. Now
you can pipe multiple operators. Like suppose I want to add a loader, so I will just create a
loader variable, and I will go here, tap operator, and just set the loader to true. Now, whenever our
subject will trigger, it will set loader to true. So one thing you can do here, you can use another
tap operator just to make this false. But here, we're going to use effects, and that you can
do like this. And what is an effect? Effect is similar to computed here. So if there is
any change or any trigger with the Signal, the computer will be going to execute. Similarly,
if there is any trigger in the Signal using inside effect, the effect will be going to execute.
So if I save, so here what we are doing, after this Signal will execute, we'll
set our loader to false. And in our HTML, we'll just add this. So when the loader
is true, an adding text will be visible. So now, if you go to our application
here, and I will try to add something, we are able to see the loading screen or
including text, and the thing is getting added. And to delete a task, we have added
a deleteSubject similar to our addSubject, and we'll use this deleteSubject inside
our delete function. So instead of this, we'll use this. So we are using our deleteSubject
and passing the index as a next value. And I will just comment this. We'll use this deleteSubject
inside our constructor as well. So here, similar to our addTask, what we are doing, we are
using toSignal, and here one point you can notice that I am just using toSignal here so that it
will subscribe to this, and it will also be going to unsubscribe to the deleteSubject or to
addSubject whenever our component is destroyed. So what you're doing here in our deleteSubject
is we are piping it with our switchMap and a tap operator. Here we are using switchMap and
calling our deleteTask, but here you can also use concatMap because switchMap is not a good
scenario here. And if you want to know where to use concatMap, where to switchMap, I have a
video. I will link them in the card, so you'll be more clear to that. So here we are using
concatMap because you can delete multiple items before you get a response back from the server.
We're using concatMap, and you are calling our deleteTask from our data service, and whichever
index we are getting back from our data service, we are going, and we are updating our task
Signal similar to which we have done here. And we'll go to our application, and here you will
see I will try to delete something, it is deleted, and I'll try to add, we are adding it. And now
we'll see how you can use toObserver method to use that. Suppose in this scenario, what we
can do, if you have an autocomplete service, so whenever you are typing, you want to give
some delay timeout, and that is very easy in the case of Observable where we have debounce time
operator. We can pipe that with our input field, and we are done. What we can do here,
we already have our task string Signal, so I will just use a temp variable
here. So just temp Observable, and I will say equals to toObservable, and I will
pass our Signal. So this will be this.taskString. And now our temp Observable is an Observable
of our task string Signal. What you can do, you can directly pipe it here, or you can use
the variable to pipe. So I will just pipe our debounce time, and I will give some time as a 300
milliseconds. And then you can use your switchMap, exhaustMap, concatMap, or any map that matters.
And you can use a switchMap, and you can pass the data to a server, call your server, get the
response back, and update whatever you want. So that's it, guys. Today we saw how
you can use toSignal or toObservable method to combine use with our existing
Signal so that our application will be fuller. And fuller means now you can call your
server, and as our HTTP calls are Observable, so you get an Observable back and pipe that
with various operators which RxJS provides and use the power of RxJS and power of
Signal combined in your application. So please hit the like button if you like
the video till now. Please do subscribe to the channel and don't forget to hit
the bell icon so that you'll be notified for the future videos. Please do share
this video among your friends, family, colleagues. We're going to meet in the next
video. Or till then, stay happy. Bye-bye.
