224. Allowing the Selection of Items in the List

Jul 22, 2026 00:52 · 4:24 · English · Whisper Turbo · 2 वक्ता:

This transcript expires in 8 दिनानि। अद्यतनीकरणं स्थायी भण्डारणार्थम् →

वार्तालेखः

0:02

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So, time to make our items editable by clicking them.

0:05

S… Speaker 2 (224. Allowing the Selection of Items in the List)

In our shopping list component,

0:08

S… Speaker 2 (224. Allowing the Selection of Items in the List)

where we have our items,

0:09

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I want to add a click listener to the item so that we,

0:14

S… Speaker 2 (224. Allowing the Selection of Items in the List)

well, can click it.

0:15

S… Speaker 1 (224. Allowing the Selection of Items in the List)

Here,

0:16

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I want to call on added item,

0:18

S… Speaker 2 (224. Allowing the Selection of Items in the List)

of course, any name you like.

0:21

S… Speaker 2 (224. Allowing the Selection of Items in the List)

simply copy it.

0:23

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Now here though I also want to get the ID of the ingredient and I

0:27

S… Speaker 2 (224. Allowing the Selection of Items in the List)

need the ID so that I'm later able to replace the correct one in the array

0:31

S… Speaker 2 (224. Allowing the Selection of Items in the List)

of ingredients which is managed in a service.

0:33

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So let's extract the ID like this i equals

0:37

S… Speaker 2 (224. Allowing the Selection of Items in the List)

index to get the well index of the current iteration and

0:42

S… Speaker 2 (224. Allowing the Selection of Items in the List)

let's pass it here as an argument.

0:44

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Now I can copy this name and go into my TypeScript code.

0:48

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Here I want to add on edit item and I

0:52

S… Speaker 2 (224. Allowing the Selection of Items in the List)

know that I will get the index here which will be a number.

0:55

S… Speaker 2 (224. Allowing the Selection of Items in the List)

And now there are a couple of ways of getting this information,

0:59

S… Speaker 2 (224. Allowing the Selection of Items in the List)

this index to the shopping edit component.

1:01

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Which is in the end where I want to get it to because that is where we are editing.

1:06

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I will use the service or specifically a subject

1:10

S… Speaker 2 (224. Allowing the Selection of Items in the List)

in that service to which I can listen in the shopping edit component.

1:14

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So I will add a new subject in the shopping list service and

1:18

S… Speaker 2 (224. Allowing the Selection of Items in the List)

that I'll name started editing.

1:21

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Sounds like a fitting name.

1:22

S… Speaker 2 (224. Allowing the Selection of Items in the List)

It'll be a new subject and subject is

1:26

S… Speaker 2 (224. Allowing the Selection of Items in the List)

a generic type.

1:27

S… Speaker 2 (224. Allowing the Selection of Items in the List)

It will hold a number in the end.

1:29

S… Speaker 2 (224. Allowing the Selection of Items in the List)

That's all I need to change here.

1:31

S… Speaker 2 (224. Allowing the Selection of Items in the List)

With this subject created in onEditItem,

1:35

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I can reach out to the shopping list service,

1:37

S… Speaker 2 (224. Allowing the Selection of Items in the List)

which we already inject.

1:39

S… Speaker 2 (224. Allowing the Selection of Items in the List)

and then use started editing and emit a new value,

1:43

S… Speaker 2 (224. Allowing the Selection of Items in the List)

my index,

1:44

S… Speaker 2 (224. Allowing the Selection of Items in the List)

which will make sure that now we pass

1:48

S… Speaker 2 (224. Allowing the Selection of Items in the List)

on this index to our subject for

1:52

S… Speaker 2 (224. Allowing the Selection of Items in the List)

now so that we can listen to it in some other place.

1:55

S… Speaker 2 (224. Allowing the Selection of Items in the List)

That other place is going to be in the shopping edit component.

1:59

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Here in ng on init,

2:02

S… Speaker 2 (224. Allowing the Selection of Items in the List)

this sounds like a good place to do the listening.

2:05

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I'm already injecting the shopping list service.

2:08

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So here I will subscribe to my started

2:12

S… Speaker 2 (224. Allowing the Selection of Items in the List)

editing subject.

2:13

S… Speaker 2 (224. Allowing the Selection of Items in the List)

And of course,

2:14

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I should clean up the subscription if we destroy this component.

2:17

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So I will store it in a property

2:22

S… Speaker 2 (224. Allowing the Selection of Items in the List)

named subscription,

2:23

S… Speaker 2 (224. Allowing the Selection of Items in the List)

which is of type subscription,

2:24

S… Speaker 2 (224. Allowing the Selection of Items in the List)

which I should import from RxJS subscription.

2:28

S… Speaker 2 (224. Allowing the Selection of Items in the List)

And I'll move up both these imports here

2:32

S… Speaker 2 (224. Allowing the Selection of Items in the List)

to the top of the file.

2:35

S… Speaker 1 (224. Allowing the Selection of Items in the List)

So with that,

2:36

S… Speaker 2 (224. Allowing the Selection of Items in the List)

we got our subscription property.

2:38

S… Speaker 2 (224. Allowing the Selection of Items in the List)

As I just said,

2:39

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I want to store my subscription in this property.

2:42

S… Speaker 2 (224. Allowing the Selection of Items in the List)

And now I will implement on destroy.

2:45

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Therefore,

2:46

S… Speaker 2 (224. Allowing the Selection of Items in the List)

you should import this interface from at Angular core.

2:49

S… Speaker 2 (224. Allowing the Selection of Items in the List)

And then also implement ng on destroy to clean

2:53

S… Speaker 2 (224. Allowing the Selection of Items in the List)

up the subscription.

2:54

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Just to be sure that you don't create a memory leak.

2:57

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So that's the cleanup work.

2:59

S… Speaker 2 (224. Allowing the Selection of Items in the List)

But what should happen inside of this?

3:02

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Well here we know that we will receive the number of

3:06

S… Speaker 2 (224. Allowing the Selection of Items in the List)

the item we're about to edit and This will be triggered

3:10

S… Speaker 2 (224. Allowing the Selection of Items in the List)

whenever we submit the well started editing information

3:15

S… Speaker 2 (224. Allowing the Selection of Items in the List)

We also know something else.

3:17

S… Speaker 2 (224. Allowing the Selection of Items in the List)

We only get here into this anonymous function if

3:21

S… Speaker 2 (224. Allowing the Selection of Items in the List)

started editing was triggered,

3:23

S… Speaker 2 (224. Allowing the Selection of Items in the List)

so if we are editing.

3:24

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So that is an important information when it comes to what we should

3:28

S… Speaker 2 (224. Allowing the Selection of Items in the List)

do once the form is submitted.

3:29

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Should we create a new item or edit an existing one?

3:32

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So I want to store the mode we're in here in a property.

3:36

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I'll name it edit mode and by default it's false.

3:40

S… Speaker 1 (224. Allowing the Selection of Items in the List)

Here, however,

3:41

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I will set edit mode to true because we are editing,

3:45

S… Speaker 2 (224. Allowing the Selection of Items in the List)

right? So with this,

3:48

S… Speaker 2 (224. Allowing the Selection of Items in the List)

we now get the index and we are editing.

3:50

S… Speaker 2 (224. Allowing the Selection of Items in the List)

I also want to store the index of the item we're editing.

3:54

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So edited item index could be a property

3:58

S… Speaker 1 (224. Allowing the Selection of Items in the List)

name.

3:59

S… Speaker 2 (224. Allowing the Selection of Items in the List)

It will be a number in the end and it will get initialized here.

4:03

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Edited item index will be the index we're

4:07

S… Speaker 2 (224. Allowing the Selection of Items in the List)

getting here as an argument.

4:10

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So with that we got a lot of important information.

4:13

S… Speaker 2 (224. Allowing the Selection of Items in the List)

Now with that information I want to load the item

4:17

S… Speaker 2 (224. Allowing the Selection of Items in the List)

we're about to edit.

4:18

S… Speaker 2 (224. Allowing the Selection of Items in the List)

So that is something I'll do in the next lecture.

अस्मिन् ध्वनिमुद्रणे AI (आटोमेटिक स्पीच रिकग्निशन) द्वारा निर्मितः अस्ति । त्रुटिः वर्तते । अतः त्रुटिः वर्तते । अतः त्रुटिः वर्तते । AI नीतिः

❤️ STT.ai लभते? वदतु मित्रेभ्यः!

सारांशः

सम्पादयतु

ॐ ऐं ह्रीं

यदा यदा कस्यापि विषये प्रश्नः भवति, तदा यन्त्रं तत्संबंधितं भागं सूचयति, तथा उत्तरं प्रदत्तं भवति ।

अन्यं लिखितम्