Hello, everyone, and welcome back.
In this lesson, we're going to introduce a new by the sink pipe.
This pipe is great for handling asynchronous data, such as, for example, the course is data that
we are receiving here.
Notice first that what we are doing here is we are doing an HTP get call and we are manually subscribing
to the observable that we get here as the result of the get call.
The async pipe is going to allow us to implicitly subscribe to these observable from the template and
it's going to allow us to build our components in a more reactive way.
Notice that here we are defining a variable called courses that could leave the maintainer of this class
to try to mutate this variable directly, for example.
Now, in order to avoid that, we are going to alternatively define here.
A course is observable variable and we are going to arrive here a dollar at the end of the variable
to annotated as being an observable.
And we are going to declare this as an observable, of course, three.
This simply means that the values emitted by these observable over time are going to be each value an
array of causes.
So we are going to, instead of calling here the get observable, we are going to instead assign it
to this variable.
So these DOT courses is going to be identical to these observable here, returned by these get call.
We can even have here a parametric type to the gate call in order to specify what type is getting written
by these get coal, in this case, coarse array.
Notice that at this point the course is member of variable is no longer being filled in by the components.
So we are going to clear it from the component.
Now let's see how in the template we can use the course is observable.
If we switch here to the template, we are going to see that we are still expecting here a variable
called causes and we want to iterate through a list of courses.
We can obtain these courses variable from the courses of zero by subscribing to it.
We are going to wrap these in parenthesis.
We are going to take the courses observable and we are going to apply it.
The async pipe via SINC Pipe is a special built-In angular pipe that is going to take the courses observable
and it's going to subscribe to it via a sink pipe would also work with the promise.
So we are going to subscribe to this observable.
We are going to wait for the valley to get emitted and that will happen when the list of courses arrives
from the back end.
Once that happens, the value of this expression here is going to be replaced with the value that we
got from the back.
And so the list of courses, then we are going to iterate through it using energy for and we're going
to display it on the screen.
Let's try this out.
If we reload here, the application, we are going to see that indeed we still have here our list of
courses as expected.
Now let's quickly see an alternative syntax for doing the same thing that we have here.
We are going to be using here the NGF syntax.
We are going to apply here these expression courses by a sink and we are going to give this expression.
And the last name for that, we are going to use the NGF as syntax and we're going to provide here to
this expression an alternative name courses.
This means that here in our end for Loop, we can use courses to loop through the course.
Karatz So if we try this out, as we can see, we still get here the same list of courses as expected.
In general, if you are fetching data from a backend and you are receiving unobservable observable in
return from a service in your service layer, I would recommend to pass the data to the template using
the async pipe, because this has the big advantage that whenever the component gets destroyed, the
async pipe will take care of unsubscribing from the observable.
And this is very helpful.
In order to prevent memory leaks, let's not continue to learn about angular services.
Let's learn how to build our first custom angular service.