253. Understanding the async Pipe

Jul 21, 2026 05:03 · 4:04 · English · Whisper Turbo · 2 اسپیکر

یہ نقل ختم ہو جاتا ہے 7 دن. دائمی محفوظہ کے لئے بہتری →

ليکشن

0:02

S… Speaker 1 (253. Understanding the async Pipe)

In this module,

0:03

S… Speaker 2 (253. Understanding the async Pipe)

we learned a lot about pipes,

0:04

S… Speaker 2 (253. Understanding the async Pipe)

what they are,

0:05

S… Speaker 2 (253. Understanding the async Pipe)

how to use them,

0:05

S… Speaker 1 (253. Understanding the async Pipe)

how to parameterize them,

0:06

S… Speaker 1 (253. Understanding the async Pipe)

how to chain them,

0:07

S… Speaker 1 (253. Understanding the async Pipe)

how to create our own pipes,

0:08

S… Speaker 1 (253. Understanding the async Pipe)

and how to maybe create an impure pipe forcing update on

0:12

S… Speaker 1 (253. Understanding the async Pipe)

each data change.

0:13

S… Speaker 1 (253. Understanding the async Pipe)

Now there's one built -in pipe I want to have a closer look at,

0:17

S… Speaker 1 (253. Understanding the async Pipe)

which does something different than all the other pipes.

0:20

S… Speaker 1 (253. Understanding the async Pipe)

It helps us with handling asynchronous data.

0:23

S… Speaker 1 (253. Understanding the async Pipe)

And to demonstrate how this works,

0:25

S… Speaker 1 (253. Understanding the async Pipe)

let's say we have another property right here at the top.

0:30

S… Speaker 2 (253. Understanding the async Pipe)

which says app status or which holds our

0:34

S… Speaker 2 (253. Understanding the async Pipe)

app status,

0:35

S… Speaker 1 (253. Understanding the async Pipe)

which could also be offline,

0:36

S… Speaker 1 (253. Understanding the async Pipe)

critical, whatever.

0:37

S… Speaker 1 (253. Understanding the async Pipe)

But here,

0:38

S… Speaker 1 (253. Understanding the async Pipe)

this will not be a string like offline.

0:41

S… Speaker 1 (253. Understanding the async Pipe)

Instead,

0:42

S… Speaker 1 (253. Understanding the async Pipe)

this should get loaded after,

0:44

S… Speaker 1 (253. Understanding the async Pipe)

let's say, two seconds.

0:45

S… Speaker 1 (253. Understanding the async Pipe)

And to simulate this,

0:46

S… Speaker 1 (253. Understanding the async Pipe)

I will set this equal to a promise.

0:48

S… Speaker 1 (253. Understanding the async Pipe)

And you can imagine this data being returned from a HTTP call

0:52

S… Speaker 1 (253. Understanding the async Pipe)

from a server or something like this.

0:54

S… Speaker 1 (253. Understanding the async Pipe)

So in this promise,

0:56

S… Speaker 1 (253. Understanding the async Pipe)

I will initialize this promise with a callback.

1:00

S… Speaker 1 (253. Understanding the async Pipe)

method passed to the constructor where this method itself takes

1:04

S… Speaker 1 (253. Understanding the async Pipe)

two arguments,

1:04

S… Speaker 1 (253. Understanding the async Pipe)

resolve and reject the two functions we can execute inside of this promise to resolve

1:09

S… Speaker 1 (253. Understanding the async Pipe)

or reject the promise.

1:10

S… Speaker 1 (253. Understanding the async Pipe)

And in the promise,

1:12

S… Speaker 1 (253. Understanding the async Pipe)

in this callback function,

1:13

S… Speaker 1 (253. Understanding the async Pipe)

I will then set up a timeout.

1:15

S… Speaker 1 (253. Understanding the async Pipe)

Let's say it triggers after two seconds,

1:18

S… Speaker 1 (253. Understanding the async Pipe)

so after 2000 milliseconds.

1:20

S… Speaker 1 (253. Understanding the async Pipe)

And then this method here will get executed.

1:23

S… Speaker 1 (253. Understanding the async Pipe)

This method I passed to the setTimeout method.

1:26

S… Speaker 1 (253. Understanding the async Pipe)

Now here in this function,

1:28

S… Speaker 1 (253. Understanding the async Pipe)

I want to simply set my app status.

1:32

S… Speaker 1 (253. Understanding the async Pipe)

So I want to resolve to,

1:35

S… Speaker 1 (253. Understanding the async Pipe)

let's say, stable,

1:36

S… Speaker 1 (253. Understanding the async Pipe)

whatever the status should be.

1:37

S… Speaker 1 (253. Understanding the async Pipe)

So what this will do is it will set app status to stable,

1:42

S… Speaker 1 (253. Understanding the async Pipe)

but only after two seconds.

1:44

S… Speaker 1 (253. Understanding the async Pipe)

So if we try to output this app status here,

1:47

S… Speaker 1 (253. Understanding the async Pipe)

let's add a line break or another line break to have a blank line

1:51

S… Speaker 1 (253. Understanding the async Pipe)

in between.

1:52

S… Speaker 1 (253. Understanding the async Pipe)

And then a heading where I say app status.

1:55

S… Speaker 1 (253. Understanding the async Pipe)

And then I try to output app status with string interpolation.

1:59

S… Speaker 2 (253. Understanding the async Pipe)

If we do this,

2:00

S… Speaker 2 (253. Understanding the async Pipe)

you see object object.

2:02

S… Speaker 1 (253. Understanding the async Pipe)

And this is correct because it is an object.

2:04

S… Speaker 1 (253. Understanding the async Pipe)

It's a promise and a promise is an object.

2:06

S… Speaker 1 (253. Understanding the async Pipe)

But after two seconds,

2:08

S… Speaker 1 (253. Understanding the async Pipe)

we know that this is no longer an object.

2:12

S… Speaker 1 (253. Understanding the async Pipe)

It now is a string.

2:13

S… Speaker 1 (253. Understanding the async Pipe)

But Angular doesn't know because it doesn't watch our object.

2:17

S… Speaker 1 (253. Understanding the async Pipe)

It doesn't see if this object actually transforms to

2:21

S… Speaker 1 (253. Understanding the async Pipe)

something else or if this returns us a value.

2:24

S… Speaker 1 (253. Understanding the async Pipe)

It just knows it's a promise,

2:26

S… Speaker 1 (253. Understanding the async Pipe)

I'm done.

2:26

S… Speaker 1 (253. Understanding the async Pipe)

And it's good that it behaves like this,

2:29

S… Speaker 1 (253. Understanding the async Pipe)

saves us performance.

2:30

S… Speaker 1 (253. Understanding the async Pipe)

We should be explicit about how our app behaves.

2:33

S… Speaker 1 (253. Understanding the async Pipe)

But thankfully,

2:34

S… Speaker 1 (253. Understanding the async Pipe)

there is a nice little pipe we can use here to

2:38

S… Speaker 1 (253. Understanding the async Pipe)

make the transformation of this data easier.

2:43

S… Speaker 1 (253. Understanding the async Pipe)

We know that it will be a string after two seconds.

2:45

S… Speaker 1 (253. Understanding the async Pipe)

And we want to output this string.

2:47

S… Speaker 1 (253. Understanding the async Pipe)

Or it will resolve a string after two seconds,

2:50

S… Speaker 1 (253. Understanding the async Pipe)

I should say.

2:51

S… Speaker 1 (253. Understanding the async Pipe)

And we want to output the string.

2:52

S… Speaker 1 (253. Understanding the async Pipe)

So we can add the pipe symbol and then async.

2:56

S… Speaker 1 (253. Understanding the async Pipe)

This is a built -in pipe.

2:58

S… Speaker 1 (253. Understanding the async Pipe)

And by adding it,

3:00

S… Speaker 1 (253. Understanding the async Pipe)

well,

3:01

S… Speaker 2 (253. Understanding the async Pipe)

watch for yourself.

3:02

S… Speaker 2 (253. Understanding the async Pipe)

You see,

3:04

S… Speaker 2 (253. Understanding the async Pipe)

I will reload the app.

3:06

S… Speaker 1 (253. Understanding the async Pipe)

There's nothing there at the beginning.

3:08

S… Speaker 1 (253. Understanding the async Pipe)

But after two seconds,

3:10

S… Speaker 2 (253. Understanding the async Pipe)

you see stable.

3:11

S… Speaker 1 (253. Understanding the async Pipe)

And this is what async does.

3:13

S… Speaker 1 (253. Understanding the async Pipe)

It recognizes that this is a promise.

3:16

S… Speaker 1 (253. Understanding the async Pipe)

And as a side note,

3:17

S… Speaker 2 (253. Understanding the async Pipe)

it would also work with observables.

3:20

S… Speaker 1 (253. Understanding the async Pipe)

There it would subscribe automatically.

3:22

S… Speaker 1 (253. Understanding the async Pipe)

And after two seconds,

3:25

S… Speaker 1 (253. Understanding the async Pipe)

It will simply recognize that something changed,

3:29

S… Speaker 1 (253. Understanding the async Pipe)

that the promise resolved,

3:30

S… Speaker 1 (253. Understanding the async Pipe)

or in the case of an observable,

3:32

S… Speaker 1 (253. Understanding the async Pipe)

that data was sent through the subscription,

3:34

S… Speaker 1 (253. Understanding the async Pipe)

and it will print this data to the screen.

3:38

S… Speaker 1 (253. Understanding the async Pipe)

And this is the pipe with which I want to conclude this

3:42

S… Speaker 1 (253. Understanding the async Pipe)

section about pipes.

3:43

S… Speaker 1 (253. Understanding the async Pipe)

Now you should feel really comfortable about using them,

3:47

S… Speaker 1 (253. Understanding the async Pipe)

building your own pipes.

3:49

S… Speaker 1 (253. Understanding the async Pipe)

and as you see here,

3:50

S… Speaker 1 (253. Understanding the async Pipe)

working with async data with pipes.

3:52

S… Speaker 1 (253. Understanding the async Pipe)

Now we will see this async pipe being used in the HTTP section later,

3:57

S… Speaker 1 (253. Understanding the async Pipe)

but for now,

3:58

S… Speaker 1 (253. Understanding the async Pipe)

let's move on to some exercises regarding pipes.

یہ نقل AI (خودکار بولنے کی پہچان) سے بنائی گئی تھی. غلطیاں ہو سکتے ہیں - اہم استعمال کے لیے اصل آڈیو کے مقابلے میں جانچیں. AI پالیسي

❤️ STT.ai سے محبت؟ اپنے دوستوں کو بتاؤ۔

خلاصہ

اس نقل کا AI خلاصہ پیدا کرنے کے لئے خلاصہ کرو کلک کریں.

اس نقل کے بارے ميں AI سے پوچھو

اس نقل کے بارے میں کچھ پوچھو - AI متعلقہ حصوں کو تلاش کرے گا اور جواب دے گا۔

دوسرا نقل کریں