1
00:00:04,000 --> 00:00:06,100
Hello, everyone, and welcome back.

2
00:00:06,250 --> 00:00:10,350
In this lesson, we're going to introduce a new by the sink pipe.

3
00:00:10,360 --> 00:00:15,340
This pipe is great for handling asynchronous data, such as, for example, the course is data that

4
00:00:15,340 --> 00:00:16,460
we are receiving here.

5
00:00:16,540 --> 00:00:22,720
Notice first that what we are doing here is we are doing an HTP get call and we are manually subscribing

6
00:00:22,720 --> 00:00:26,740
to the observable that we get here as the result of the get call.

7
00:00:26,890 --> 00:00:32,740
The async pipe is going to allow us to implicitly subscribe to these observable from the template and

8
00:00:32,740 --> 00:00:36,730
it's going to allow us to build our components in a more reactive way.

9
00:00:36,760 --> 00:00:43,110
Notice that here we are defining a variable called courses that could leave the maintainer of this class

10
00:00:43,120 --> 00:00:46,240
to try to mutate this variable directly, for example.

11
00:00:46,360 --> 00:00:50,110
Now, in order to avoid that, we are going to alternatively define here.

12
00:00:50,170 --> 00:00:55,780
A course is observable variable and we are going to arrive here a dollar at the end of the variable

13
00:00:55,780 --> 00:00:58,750
to annotated as being an observable.

14
00:00:58,810 --> 00:01:02,890
And we are going to declare this as an observable, of course, three.

15
00:01:02,930 --> 00:01:10,000
This simply means that the values emitted by these observable over time are going to be each value an

16
00:01:10,000 --> 00:01:11,160
array of causes.

17
00:01:11,170 --> 00:01:18,310
So we are going to, instead of calling here the get observable, we are going to instead assign it

18
00:01:18,310 --> 00:01:19,380
to this variable.

19
00:01:19,390 --> 00:01:27,180
So these DOT courses is going to be identical to these observable here, returned by these get call.

20
00:01:27,190 --> 00:01:34,330
We can even have here a parametric type to the gate call in order to specify what type is getting written

21
00:01:34,340 --> 00:01:37,270
by these get coal, in this case, coarse array.

22
00:01:37,390 --> 00:01:42,910
Notice that at this point the course is member of variable is no longer being filled in by the components.

23
00:01:42,910 --> 00:01:45,700
So we are going to clear it from the component.

24
00:01:45,790 --> 00:01:50,110
Now let's see how in the template we can use the course is observable.

25
00:01:50,110 --> 00:01:55,240
If we switch here to the template, we are going to see that we are still expecting here a variable

26
00:01:55,240 --> 00:01:59,470
called causes and we want to iterate through a list of courses.

27
00:01:59,500 --> 00:02:05,870
We can obtain these courses variable from the courses of zero by subscribing to it.

28
00:02:05,890 --> 00:02:08,680
We are going to wrap these in parenthesis.

29
00:02:08,680 --> 00:02:12,470
We are going to take the courses observable and we are going to apply it.

30
00:02:12,550 --> 00:02:20,200
The async pipe via SINC Pipe is a special built-In angular pipe that is going to take the courses observable

31
00:02:20,320 --> 00:02:26,020
and it's going to subscribe to it via a sink pipe would also work with the promise.

32
00:02:26,200 --> 00:02:28,890
So we are going to subscribe to this observable.

33
00:02:28,900 --> 00:02:34,450
We are going to wait for the valley to get emitted and that will happen when the list of courses arrives

34
00:02:34,450 --> 00:02:35,370
from the back end.

35
00:02:35,410 --> 00:02:41,350
Once that happens, the value of this expression here is going to be replaced with the value that we

36
00:02:41,350 --> 00:02:42,430
got from the back.

37
00:02:42,430 --> 00:02:47,410
And so the list of courses, then we are going to iterate through it using energy for and we're going

38
00:02:47,410 --> 00:02:48,900
to display it on the screen.

39
00:02:49,030 --> 00:02:50,170
Let's try this out.

40
00:02:50,170 --> 00:02:55,390
If we reload here, the application, we are going to see that indeed we still have here our list of

41
00:02:55,390 --> 00:02:56,860
courses as expected.

42
00:02:57,040 --> 00:03:01,750
Now let's quickly see an alternative syntax for doing the same thing that we have here.

43
00:03:01,780 --> 00:03:05,470
We are going to be using here the NGF syntax.

44
00:03:05,470 --> 00:03:12,250
We are going to apply here these expression courses by a sink and we are going to give this expression.

45
00:03:12,250 --> 00:03:18,850
And the last name for that, we are going to use the NGF as syntax and we're going to provide here to

46
00:03:18,850 --> 00:03:22,390
this expression an alternative name courses.

47
00:03:22,540 --> 00:03:28,300
This means that here in our end for Loop, we can use courses to loop through the course.

48
00:03:28,300 --> 00:03:35,430
Karatz So if we try this out, as we can see, we still get here the same list of courses as expected.

49
00:03:35,560 --> 00:03:40,990
In general, if you are fetching data from a backend and you are receiving unobservable observable in

50
00:03:40,990 --> 00:03:47,200
return from a service in your service layer, I would recommend to pass the data to the template using

51
00:03:47,200 --> 00:03:53,350
the async pipe, because this has the big advantage that whenever the component gets destroyed, the

52
00:03:53,350 --> 00:03:57,730
async pipe will take care of unsubscribing from the observable.

53
00:03:57,940 --> 00:03:59,200
And this is very helpful.

54
00:03:59,200 --> 00:04:04,480
In order to prevent memory leaks, let's not continue to learn about angular services.

55
00:04:04,720 --> 00:04:08,530
Let's learn how to build our first custom angular service.