229. Allowing the Deletion of Shopping List Items

Jul 22, 2026 00:51 · 2:52 · English · Whisper Turbo · 3 സ്പീക്കറുകള്‍

ഈ തീയതിയുടെ കാലാവധി അവസാനിക്കുന്നു 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.

ഈ അക്ഷം AI (സ്വയമുണ്ടായി അക്ഷരാനുഗ്രഹം) ഉണ്ടാക്കിയത്. പിശകുകള്‍ ഉള്‍ക്കൊള്ളാം. അല്ലെങ്കില്‍ മൂല ഓഡിയോ ഉപയോഗിക്കുന്നതിനു് മുന്‍കൂട്ടിയുള്ള പിശകുകള്‍ സ്ഥിതീകരിക്കാം. ഐഐ നയം

❤️ സ്നേഹം STT.ai? കൂട്ടുകാരോട് പറയൂ!

സാരാംശം

ഈ അക്ഷരമാലയുടെ AI സമ്മറി ഉണ്ടാക്കാന്‍ കെസ്റ്റെല്‍ ക്ലിക്ക് ചെയ്യുക.

ഈ ട്രാന്‍സ്പെക്റ്റിനെ കുറിച്ച് AI ചോദിയ്ക്കുക

ഈ പുസ്‌തകത്തെക്കുറിച്ച് എന്തെങ്കിലും ചോദിക്കുക — AI - ന്‌ ആവശ്യമായ ഭാഗങ്ങൾ കണ്ടെത്തുകയും ഉത്തരം നൽകുകയും ചെയ്യും.

വീണ്ടും എഴുതുക