224. Allowing the Selection of Items in the List

Jul 22, 2026 00:52 · 4:24 · English · Whisper Turbo · 2 Mga Speaker

Ang transcript na ito ay magtatapos sa 8 Mga araw. Upgrade para sa permanenteng imbakan →

Talaan ng mga lektura

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.

Ang transcript na ito ay ginawa ng AI (automatic speech recognition). Maaaring may mga pagkakamali — suriin ang orihinal na audio para sa kritikal na paggamit. Patakaran ng AI

❤️ Pag-ibig STT.ai? Sabihin sa iyong mga kaibigan!

Buod

I-click ang Summarize upang makabuo ng isang AI buod ng transcript na ito.

Magtanong sa AI Tungkol sa Transcript na Ito

Magtanong ng anumang bagay tungkol sa transcript na ito - ang AI ay makahanap ng mga kaugnay na mga seksyon at sagot.

Isalin ang isa pang