Adding, listing, removing, and searching users made easy with Angular 6 framework.

form angular 6 add, list, delete

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 ( 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": "", "password": "Admin123" }

If the request is correct

{ "status": "success", "data": { "name": "Santiago", "lastname": "Vasquez Olarte", "imagen": "", "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": "", "state": "active" }, { "id": 2, "name": "Tatiana", "lastname": "alvarez q", "email": "", "state": "active" }, { "id": 3, "name": "Maria", "lastname": "mercedes e", "email": "", "state": "active" } ] }

As you can see in the image, users are listed through a service (API)

form angular 6 add, list, delete

You as an administrator role you can see the detail with all the information I obtain from the service.

form angular 6 add, list, delete

You have a simple alert that allows you to delete a user.

form angular 6 add, list, delete

In this simple Form I show you how you can add user, each field has its respective validation, so that a user can not store without completing the data.

form angular 6 add, list, delete

Well, end of this simple tutorial, I hope you like it and most importantly, that has served you something.

If I help you, give me a click on the publicity, thank You Very Much.