238. Adding a Delete and Clear (Cancel) Functionality

Jul 22, 2026 00:53 · 4:47 · English · Whisper Turbo · 2 स्पीकर

या ट्रान्सक्रिप्टची मुदत संपते 8 दिवस. स्थायी संचयीका करीता अद्ययावत करा →

वाचन अनुक्रमणिकाName

0:02

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Well, there are two things we should definitely do.

0:04

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

Three, actually.

0:05

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

We should enable this delete button.

0:08

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And when editing a recipe,

0:11

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

no matter if creating a new one or editing an existing one,

0:15

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

we should make the cancel button work.

0:17

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And upon hitting save,

0:19

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

we should navigate away.

0:20

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Actually,

0:21

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

that's the same which should happen when hitting cancel.

0:23

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So that would be a challenge for you again.

0:26

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Make all three buttons work.

0:28

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Save and cancel to simply navigate away.

0:31

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And then also the delete button to delete

0:36

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

our recipe.

0:36

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

Here

0:42

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

is my approach.

0:43

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

What I want to do is I want to start with the delete button.

0:47

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

For this I'll start in the recipe service and add a delete recipe

0:51

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

method.

0:52

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

Recipe.

0:54

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Where I will get the index of the recipe which should get deleted.

0:59

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And in here,

1:00

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

I will then use my recipes array,

1:02

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

call the splice method and splice at the index

1:06

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

one element to remove it.

1:08

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

Thereafter,

1:09

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

I'll call recipes changed and emit a copy of

1:14

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

the updated recipes like this.

1:16

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

That's the first step.

1:19

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Now I can call delete recipe from

1:23

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

the recipe detail component,

1:24

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

which is where we have this delete button,

1:27

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

by adding a click listener.

1:29

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

on the lead recipe and here i will copy

1:34

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

that and implement it in the typescript file here on

1:38

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

the lead recipe

1:40

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And I simply want to reach out to the recipe service called delete

1:44

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

recipe.

1:44

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And now we also need the ID here.

1:47

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So we used it early in this course to have this more complicated

1:51

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

way of navigating,

1:52

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

but for deleting,

1:54

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

now we really need it.

1:56

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So here we should add this ID as an argument.

2:00

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So before we test this,

2:02

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

let's also make the cancel and save button work and let

2:06

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

them navigate us away.

2:07

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

So in the recipe edit component,

2:09

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

which is where we have these buttons,

2:11

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

here we should hook them up to an event

2:15

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

listener.

2:15

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So cancel we should hook up.

2:19

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

The other one already is automatically triggering the submission event.

2:22

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

When we hit cancel,

2:24

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

I want to execute on cancel.

2:26

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And in the recipe edit component TypeScript

2:30

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

file,

2:31

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

We don't need that import anymore,

2:33

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

so we can remove it.

2:34

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

But the thing I wanted to do is I will add the onCancel

2:39

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

method.

2:40

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And in onCancel,

2:42

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

well,

2:43

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

here I simply want to navigate away.

2:46

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

So for that,

2:47

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

we need the router of type router.

2:51

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So let's inject it here.

2:52

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

Make sure to import the router type from at AngularRouter.

2:58

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

And with that injected and on cancel,

3:00

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

I can simply access the router and navigate

3:05

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

and I want to go up one level.

3:08

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

If we were editing,

3:09

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

this will take me back to the detail page.

3:12

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

If we clicked on the new button,

3:13

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

it will take me back to the recipes page.

3:17

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

So for this to work,

3:18

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

we need to tell Angular what our current route is

3:22

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

and we do already inject it here,

3:25

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

the activated route.

3:27

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So with that we can pass the second parameter relative

3:31

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

to this route.

3:33

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So that happens if we click the cancel button.

3:37

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

I actually want the same to happen once I submit the form.

3:40

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

So here I will call on cancel even though it sounds

3:45

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

wrong.

3:45

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

But we are done at this point.

3:47

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

We can simply navigate away.

3:49

S… Speaker 1 (238. Adding a Delete and Clear (Cancel) Functionality)

Let's see if that all works.

3:52

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

If I click cancel we're back to our recipe.

3:55

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

The same.

3:57

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

for this one and if i do change

4:01

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

something and hit save we're also back to the updated recipe

4:05

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

and if we create a new one and i hit cancel we're back

4:09

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

to the please select the recipe state which makes sense and if i enter something here and click

4:13

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

save we're back to this state too so this

4:17

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

is our application working fine here all these

4:22

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

buttons working let's see if we can delete this recipe now

4:26

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

looks almost okay but we still see it here in the detail view

4:31

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

even though we deleted it can demonstrate this again for the schnitzel

4:35

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

see it it's still here even though we removed it so that

4:39

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

is something we need to update before we are finally done with

4:43

S… Speaker 2 (238. Adding a Delete and Clear (Cancel) Functionality)

this section

हे transcript AI (स्वयंचलित वक्तृत्व ओळख) द्वारे बनविले गेले आहे. त्रुटी असू शकते - गंभीर वापर करीता मूळ ऑडिओशी तुलना करा. AI करार

❤️ ला प्रेम करा STT.ai? आपल्या मित्रांना सांगा!

सारांश

या कोशाच्या संपादनासाठी त्यांनी एक स्वतंत्र कोशकार मंडळ स्थापन केले.

या प्रतविषयी AI ला विचारा

या योजनेत काही गोष्टींचा समावेश असतो - योजनेत सहभागी होण्यासाठी आवश्यक कागदपत्रे व माहिती.

दुसरे प्रतलेखन करा