Angular 6 CRUD Tutorial: Add, List, Edit and Delete Users

A complete, ready-to-download Angular 6 example that walks through a full user CRUD (Create, Read, Update, Delete) flow: a login screen backed by an HTTP service, a paginated user list pulled from an API, a detail view, a delete confirmation, and a validated form to add new users. Built with Angular Material and Angular Animations so you get a polished starting point instead of a bare-bones example.

Santiago vasquez olarte
Angular 6 CRUD form: add, list and delete users
Download Example View Demo


Technologies used

  • Angular 6
  • Angular Material
  • Angular Http
  • Angular Animations
  • Sass

Below I present a mini project that can be reused as a base. The project is very simple, allows a user to be able to access securely with an email (admin@admin.com) and a password (Admin123) Each text box has its respective validation against an exposed service, where only two parameters are sends that are electronic mail and password, If the service request is correct, it will respond with a status (correctly or failed)


This example can be seen how the parameters are sent to the service. This is also done by this log-in view.

{ "email": "admin@admin.com", "password": "Admin123" }

If the request is correct


{ "status": "success", "data": { "name": "Santiago", "lastname": "Vasquez Olarte", "imagen": "https://www.snippet-developer.com/img/users/default.png", "state": "active" } } //OR FAIL { "status": "fail", "data": [] }

If logging is correct


If logging is correct, it will automatically be redirected to the home page, On the main page you will find a list of users, which is obtained from a services (API)

{ "status": "success", "data": [ { "id": 1, "name": "Santiago", "lastname": "vasquez o", "email": "san.asdfg@hotmail.com", "state": "active" }, { "id": 2, "name": "Tatiana", "lastname": "alvarez q", "email": "tatys.alv@gmail.com", "state": "active" }, { "id": 3, "name": "Maria", "lastname": "mercedes e", "email": "mechas.as@gmail.com", "state": "active" } ] }

User list: paginated results pulled from the API

Once logged in, the list view fetches every user from the service shown above and renders it as a paginated Angular Material table, so it stays fast even with a large data set.

Angular 6 user list pulled from the API, shown in a paginated table

User detail view

Clicking a row opens the detail view with every field the API returned for that user, useful whenever you need a quick read-only lookup before editing or deleting a record.

Angular 6 user detail view showing all fields returned by the API

Deleting a user with a confirmation prompt

Delete actions are guarded by a confirmation alert, so a user can't be removed by accident.

Angular 6 delete-user confirmation alert

Adding a new user with field-level validation

The add-user form validates each field as you type, so it's impossible to submit incomplete or malformed data to the API.

Angular 6 add-user form with field validation

That wraps up this Angular 6 CRUD tutorial — download the source above and use it as a starting point for your own user management screens.

If this guide helped you, a click on the ad below goes a long way — thank you!