# Part 15: Creating Note c.r.u.D. — Delete

The last of the crud, to create the Delete [action](https://media.giphy.com/media/26xBIUj4Y6K2LcIz6/source.gif). Using the Angular CLI create the note-delete component.

Type:

```
ng g c components/note/note-delete --no-spec
```

## Step 1. Note Service

Like always we will start at the **NoteService**, we will create a **deleteNote(:id: number)** method, and we will pass in the id of the note that we would like to get rid of. Based on our docks [here](http://kcpelevennoteapie.azurewebsites.net/swagger/ui/index#!/Notes/Notes_Delete).

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8qu9tX1z3sjEhhjw%2F00.PNG?generation=1524162339010777\&alt=media)

Let’s add the path to this while we are at it, in the **app.modules.ts** file

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8qugckY321uajzhE%2F01.PNG?generation=1524162338416322\&alt=media)

## Step 2. Setting up the form in the Note Delete Controller

In our **controller**, there are going to be similarities between our **note-details** and **note-update**, and that’s getting the id from the params of the **URL**

In our constructor we will just copy and paste.

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8qvhbJgy_SHNorcV%2F02.PNG?generation=1524162338894464\&alt=media)

What will be new is how we delete the note. We are going to do it through a button click action, so we will need a **onDelete()** method that calls our **deleteNote()** service method.

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8qwQC5ILw4jbIsFE%2F03.PNG?generation=1524162328562965\&alt=media)

## Step 3. Creating the HTML for the Note Create

Let’s present the data to our users, which looks just like our **note-details** component view, so another copy and paste job.

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8qxISqgGK6Qs_y8A%2F04.PNG?generation=1524162328900608\&alt=media)

Step 4. Finishing the path in the NoteIndex

Next we will add the **routerLink** to the **delete icon**

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8qyDXfqnOt0Flqll%2F05.PNG?generation=1524162338930846\&alt=media)