Angular : simple contact list

Introduction

In this blog post, I will demonstrate how to create a simple contact list application using Angular. This application allows users to add, view, and delete contacts. It is a great project for those looking to get started with Angular and understand the basics of data binding, event handling, and component interaction.

Features

• Add new contacts
• View the list of contacts
• Delete contacts

Getting Started

To get started, ensure you have Angular CLI installed. You can create a new Angular project using the following command:

   ng new contact-list-app

Navigate to your project directory

   cd contact-list-app

Code Snippet

Below is a snippet of the main component code for the contact list application. This includes the component decorator and the logic for managing the contacts.

import { Component } from '@angular/core';
import {FormsModule} from "@angular/forms";
import {NgForOf} from "@angular/common";

interface Contact {
  name: string;
  email: string;
}

@Component({
  selector: 'scl-add-contact',
  standalone: true,
  imports: [
    FormsModule,
    NgForOf
  ],
  templateUrl: './add-contact.component.html',
  styleUrl: './add-contact.component.sass'
})
export class AddContactComponent {
  newContact : Contact = { name: '', email: '' };
  contacts: Contact[]= [];

  addContact() {
    if (this.newContact.name && this.newContact.email) {
      this.contacts.push({ ...this.newContact });
      this.newContact = { name: '', email: '' };
    }
  }

  removeContact(contact: Contact) {

  }
}
 

HTML Template

Here is the HTML template for the contact list component. This template provides the structure for displaying the list of contacts and includes forms for adding and removing contacts.html

<div class="container">
  <h1>Contact List</h1>
  <form (submit)="addContact()">
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" id="name" [(ngModel)]="newContact.name" name="name" required class="form-control">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" [(ngModel)]="newContact.email" name="email" required class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Add Contact</button>
  </form>

  <h2>Contacts</h2>
  <ul class="list-group">
    <li *ngFor="let contact of contacts" class="list-group-item">
      <div class="contact-info">
        <span>{{ contact.name }}</span> - <span>{{ contact.email }}</span>
      </div>
      <button (click)="removeContact(contact)" class="btn btn-danger btn-sm">Remove</button>
    </li>
  </ul>
</div>

Styles

Add some basic styles to your component:css

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.contact-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  margin-top: 10px;
}

Screenshot

Below is a screenshot of the application in action.

Repository

You can find the complete source code for this project on GitHub: GitHub Repository

Conclusion

This simple contact list application demonstrates how to use Angular to manage a list of items, handle user input, and update the view dynamically. It's a great starting point for building more complex applications with Angular.