Angular || How To Create A Simple Personal Contact List Using Angular

Print Friendly, PDF & Email

The following is an implementation which demonstrates how to create a simple personal contact list using Angular.

This project allows you to add a new contact, update an existing contact, and delete a contact. All contacts are retrieved and updated using web request calls on a mock API.


1. Get Started

To get started, make sure you have a package manager like Node.js installed. Node.js is used to install packages.

You’ll also want to have Angular cli installed. Visit the official documentation for more information on how this is done.

Next, navigate to the project directory in the terminal, then run the following commands (Node.js):

Project Setup


npm install

Compiles and hot-reloads for development


npm run start


2. Features

This project implements a simple personal contact list which demonstrates how to:

  1. Work with data, methods, conditional statements, and events
  2. Create, update, view, and delete contacts from the system
  3. Make API calls for each of the above actions
  4. Use tables, forms, and form validation

3. Screenshots

Initial Contact List Fetched From API

Sample

Adding A New Contact

Sample

Contact List With New Contact Added

Sample

Updating A Contact

Sample

Contact List With New Entries

Sample


4. Download

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?
👍 YesNo

Leave a Reply