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


Adding A New Contact


Contact List With New Contact Added


Updating A Contact


Contact List With New Entries


4. Download

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