This post continues on from Angular CRUD 1: in-memory-web-api installation and configuration and its focus will be on the C in CRUD operations: Create.

To stop you from getting bogged down in too much detail I focus on the parts of the changes that are critical to understanding how the create method was implemented. If you want to look at all the changes in more detail, the GitHub repo for this post can be found here.

Before getting into the create method, a quick note on the user interface.

How awful is this user interface?

Very. I will not defend it. It’s dreadful.

However I want the focus on this series of posts to on the CRUD functionality.

Navigating to the Create form

I have added a Create button to the list of villains component along with a method which is used by the button to navigate to a new component called the CreateVillainComponent.

toCreateVillain() {
    this.router.navigateByUrl("/createvillain");
}

Now that routing has been introduced to application I have also changed app-routing.module.ts and introduced a new route: /createvillain.

...
const routes: Routes = [
  { path: "createvillain", component: CreateVillainComponent },
  { path: "", component: ListVillainsComponent }
];
...

The Create Villain form

The form allows the user to enter three attributes to create a new villain. After entering the information, pressing the Create button saves a new villain to the database. In the context of this series the villain is saved to the in-memory-web-api.

The create button invokes the createVillain method on the component create-villain.component.ts:

createVillain() {

    if (this.createVillainForm.valid) {      
      const id = this.createVillainForm.get('id').value;
      const name = this.createVillainForm.get('name').value;
      const episode = this.createVillainForm.get('episode').value;

      this.villainSubscription = this.villainService.addVillain(id, name, episode).subscribe();

      this.router.navigateByUrl("/");
    }
  }

This method obtains the values from the form which are then passed to the addVillain method of the villainService. This method returns an observable which a reference to is stored by the villainSubscription variable.

Using the ngOnDestroy lifecycle hook, the villainSubscription variable is used to unsubscribe from addVillain when it is no longer needed.

ngOnDestroy() {
    if (this.villainSubscription) {
      this.villainSubscription.unsubscribe();
    }    
  }              

A check is made before unsubscribing for instances whereby the user has navigated to the create villain form and has then pressed cancel to leave it.

The final step is to navigate back to the list of villains which is achieved using the router.navigateByUrl. Once the list of villains appears the newly created villain will be displayed.

The animated gif below illustrates the new create villain functionality.

Cancel Button

Pressing the cancel button will abandon any changes and return the user to the list of villains.

This is achieved by using the routerLink attribute in the cancel button definition.

The button’s definition is:

...
<button type="reset" class="btn btn-secondary"routerLink="/">Cancel</button>
...

What’s next?

The U in CRUD, Update, will be the subject of the next post.