242. Deleting Ingredients and Some Finishing Touches

Jul 22, 2026 00:55 · 3:34 · English · Whisper Turbo · 2 المتكلمون

تنتهي مدة هذا النص في 8 أيام. تحسين التخزين الدائم →

فهرس المحاضرات

0:02

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

We're almost done fixing bugs.

0:03

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Our recipe service is now working as expected.

0:07

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

If we switch back and forth,

0:08

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

the spaghetti are there.

0:09

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

But now if we go back to recipe edit component,

0:13

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

this delete button,

0:15

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

this X here is not working.

0:17

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

First of all,

0:19

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

it's even submitting our form and we definitely don't want that.

0:22

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

So we should set the type to button.

0:24

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Then I'll also add a click listener and say on

0:28

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

delete ingredient.

0:31

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And here,

0:32

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

of course, I should pass the information which ingredients should get

0:36

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

deleted.

0:36

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

So I should pass the index i,

0:40

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

which is simply the index of the control we want to

0:44

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

remove.

0:45

S… Speaker 2 (242. Deleting Ingredients and Some Finishing Touches)

With that,

0:47

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

we can implement the onDeleteIncredient method in

0:51

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

our TypeScript file here.

0:53

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And I know that I will receive the index here.

0:57

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Number.

0:59

S… Speaker 2 (242. Deleting Ingredients and Some Finishing Touches)

Now with that,

1:00

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

I can get access to my recipe form to call

1:05

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

the get method and get access to my ingredients,

1:07

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

which I know is a form erasal.

1:09

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Let's cast it as we did earlier too.

1:12

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And now we can call the removeAt method and

1:16

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

pass the index to remove a specific form control,

1:19

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

the one at the position we want to delete.

1:21

S… Speaker 2 (242. Deleting Ingredients and Some Finishing Touches)

Now with that in place,

1:24

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

we can save this.

1:28

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And now if we open a recipe and edit it

1:32

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

and remove this,

1:34

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

now you see it indeed removed the ingredient.

1:37

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

So now we updated the recipe and therefore we only sent

1:42

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

the french fries to the shopping list.

1:43

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And again,

1:44

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

the other bug we had before is fixed.

1:47

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Our recipes survive.

1:49

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Now to clean this app up,

1:51

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

there's one other thing I forgot to do earlier.

1:54

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

In the recipe list component where we subscribe to our recipes

1:58

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

changed event here.

2:00

S… Speaker 2 (242. Deleting Ingredients and Some Finishing Touches)

Well,

2:01

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

we should unsubscribe if the component gets destroyed.

2:04

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

So let's implement on destroy and import this from at

2:08

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

AngularCore.

2:09

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And then I will add ng on destroy here.

2:14

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And I want to store the subscription in a property named

2:18

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

subscription of type subscription,

2:20

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

which needs to be imported from RxJS subscription.

2:25

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And then I can store it

2:29

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

by assigning it as a value here in onInit.

2:32

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

The subscription is assigned.

2:34

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

And in onDestroyed,

2:36

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

I can now unsubscribe again to make sure

2:41

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

I don't cause any memory leaks here.

2:45

S… Speaker 2 (242. Deleting Ingredients and Some Finishing Touches)

So with that,

2:46

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

with all these bug fixes we added,

2:48

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

our app is looking great.

2:50

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

It should work fine now.

2:52

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

We can add new recipes here.

2:55

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

We can edit existing ones.

2:58

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

We can remove the ingredients there and add

3:02

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

new ingredients if we want,

3:04

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

of course.

3:05

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

We can then use them and send them to the shopping list.

3:08

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

There we can delete them.

3:10

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

We can add new items or decide otherwise

3:14

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

and clear the form.

3:15

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

Our forms are working great here and use quite

3:19

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

a lot of useful tools you may use in your next application,

3:23

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

which are great to enhance it and to offer a great

3:27

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

user experience.

3:28

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

With that,

3:29

S… Speaker 1 (242. Deleting Ingredients and Some Finishing Touches)

let's move on to the next course section.

هذا النص تم إنتاجه بواسطة AI (التعرف الآلي على الكلام). قد يحتوي على أخطاء - التحقق من الصوت الأصلي للاستخدام الحرج. سياسة الذكاء الاصطناعي

❤️ هل تحب STT.ai؟ أخبر أصدقاءك!

موجز تنفيذي

انقر على ملخص لإنشاء ملخص للذكاء الاصطناعي لهذا النص.

اسأل AI عن هذا النص

وإذا سألت عن أي شيء في هذا النص، سيجد المحقق الخاص الأقسام ذات الصلة ويجيبك.

تفريغ آخر