229. Allowing the Deletion of Shopping List Items

Jul 22, 2026 00:51 · 2:52 · English · Whisper Turbo · 3 གསལ་བཤད་

This transcript expires in ༡༢ ཟླ་ ༡༢ ཚེས་ ༢༠༡༢ 8 ཉིན། གནས་བརྟན་གྱི་གནས་བཞག་གོང་འཕེལ་བཏང། →

སློབ་ཁྲིད་ཀྱི་ཐོ་

0:02

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

So we added the resetting and the clear mechanism.

0:05

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Let's now make sure we can delete items.

0:07

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

For this,

0:08

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

of course, I need another click listener here and definitely try solving this on

0:12

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

your own if you want.

0:13

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

So that is your chance to pause the video.

0:16

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

If you don't want to

0:20

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

solve it on your own or if you are already finished with it now,

0:23

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

well,

0:23

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

we can definitely go ahead and do it together.

0:25

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

So I'm calling on the lead here when I click the delete button.

0:29

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

And I'll add this method to my shopping edit component.

0:33

S… Speaker 2 (229. Allowing the Deletion of Shopping List Items)

Well,

0:34

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

in onDelete,

0:35

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

what do we need to do here?

0:37

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

We need to inform the service that it should remove

0:41

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

one of the items in the array.

0:43

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

That is basically almost all.

0:45

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

We also need to make sure that we call this onClear.

0:50

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Because we definitely also want to clear the form if we delete the item which

0:54

S… Speaker 2 (229. Allowing the Deletion of Shopping List Items)

was loaded.

0:55

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Now in a shopping list service,

0:57

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

I need to add a method,

0:59

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

delete ingredient,

1:01

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

and I expect to get the index where I should delete it.

1:05

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

With that information,

1:07

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

I can simply use my ingredients array and splice one of

1:11

S… Speaker 2 (229. Allowing the Deletion of Shopping List Items)

the elements.

1:11

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Splice allows us to start at a specific point,

1:15

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

for example at the index here,

1:16

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

and then splice one element,

1:18

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

thus removing it.

1:20

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

And then of course,

1:21

S… Speaker 2 (229. Allowing the Deletion of Shopping List Items)

as always,

1:22

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

we should call ingredients changed.

1:24

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

And of course, you could refactor this in its own method.

1:27

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

But I think that's okay like this too.

1:29

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

So here I will slice or simply pass

1:33

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

a copy of my ingredients.

1:34

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

And with that,

1:36

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

the final step is before we clear everything,

1:39

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

I will reach out to my shopping list service,

1:42

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

call delete ingredient and simply pass

1:46

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

the edited item index as a value.

1:50

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Now this will throw an error if we click delete without loading

1:55

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

an item So therefore I will simply add ngif

1:59

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

to the button and I'll just restructure to make it easier to read ngif

2:04

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

to only display the button if we are in edit mode So

2:09

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

now I do default we don't see delete

2:11

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

If I switch to an item,

2:13

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

I can see and I click it,

2:15

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

it resets the form and it deleted the item.

2:18

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Now no more items are left.

2:21

S… Speaker 3 (229. Allowing the Deletion of Shopping List Items)

Of course,

2:21

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

I can still add new ones and delete them again.

2:24

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

So that is our shopping list form working with the template

2:28

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

-driven approach and a lot of other nice features like the service.

2:32

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

really showing you how you could set up something like this,

2:36

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

how you can use set value,

2:38

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

how you can reset the form and therefore hopefully build the form you

2:42

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

need.

2:42

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

Now in the next lectures,

2:44

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

I will move on to the recipe edit form,

2:47

S… Speaker 1 (229. Allowing the Deletion of Shopping List Items)

which we will create using the reactive approach.

ཡིག་སྒྱུར་འདི་ བཅོས་མའི་བློ་རིག་ (སྒྲ་ངོས་འཛིན་བྱེད་པའི་འཕྲུལ་རིག་) གིས་བཟོ་སྟེ་ཡོདཔ་ཨིན། འཛོལ་བ་འབྱུང་སྲིད་པ་ལ་ — གལ་སྲིད་ཁག་ཆེ་བའི་དོན་ལས་ ངོ་མ་གི་སྒྲ་སྐད་དང་འཕྱད་ཞིབ་འབད་དགོཔ་ཨིན། བཅོས་མའི་བློ་རིག་གི་སྲིད་བྱུས་

❤️ STT.ai ལ་དགའ་བ་ཡིན་ནོ? སླབ་པར་བགྱི!

བཅུད་དོན་

ཡིག་ཆ་འདི་གི་ AI བཅུད་བསྡུ་ཐོན་ནི་གི་དོན་ལས་ བཅུད་བསྡུ་ ཟེར་བའི་བསྒང་འདི་བསྒང་བསྒ

དྲན་ཤེས་ལ་དྲི་བ་དྲིས་ལན་ཞུ།

ཡིག་ཆ་འདི་གི་སྐོར་ལ་དྲི་བ་ཅི་རིགས་ཞུས་ནའང་ བཅོས་མའི་བློ་རིག་གིས་ འབྲེལ་བ་ཡོད་པའི་དོན་ཚན་ཚུ་ འཚོལ་ཞིབ་ དང་ལན་འདེབས་ འབད་འོང་།

གཞན་ཞིག་བསྒྱུར།