238. Adding a Delete and Clear (Cancel) Functionality

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

इस हस्तलिपि का समय ख़त्म हो गया. 8 दिन. स्थायी भंडारण के लिए अद्यतन करें →

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

यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति

❤️ क्या आपको STT.ai पसंद है? अपने दोस्तों को बताइए!

सारांश

इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.

एआई के बारे में पूछें इस ट्रांसमिशन के बारे में

इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।

एक और अनुवाद