Skip to main content

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.
Labels:
Location: Mauritius

Comments

Post a Comment

Popular posts from this blog

Car Wash System vb.net

This software consists of a database that save the registration number of every vehicle being wash along side with the date, type of wash made and price Screen Shot Source Code To view records in the database: Dim conn As OleDbConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\washRcd.accdb;Persist Security Info=False") Dim sql As String sql = " SELECT * FROM tblwash" conn.Open() Dim dt As New DataTable Dim cmd2 As New OleDb.OleDbDataAdapter(sql, conn) cmd2.Fill(dt) DataGridView1.DataSource = dt DataGridView1.Refresh() conn.Close() To insert new record in the database: Private Sub insert() Dim conn As OleDbConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\washRcd.accdb;Persist Security Info=False") Dim updateSql As String = String.Format(...
10 comments
Read more

C# Windows Form : PetCare

A desktop application using C# as technology. the application is titled as "PETCARE" a system that a pet shop or veterinary can use it to store basic information about the pet's owner, details about the pet and the purpose of the visit to the veterinary or pet shot. The system also contained a stock management module that is used to track pet food purchased by a particular customer Screen Shot You can login both as a staff or as the admin. the admin has the privilege to register new staff and view details about transaction and other sensitive information. The system encrypt user password using MD5 algorithm The home screen of the application You can either add a new pet with its owner details or add another pet belonging to the same owner. both can be done using the same form below. and each pet owner will be given a reference number. Veterinary can use the application to store information about treatment done for a particular pet Can t...
1 comment
Read more

Student Information System - AngularJS , ASP.NET API, C#

Web based application the student information system is a small application that allows user to register and login to view information about a particular student and can perform several actions like Login and register to the application View students  Add new student Delete a particular student Update user information Screen Shot Project architecture routing.js, config.js and app.js allow the application to route from one partial view to another and config.js is used to save all the endpoint needed to access the API.   For separation of concerns, in the solution panel separate partial views, controller and services in different directories and reference it in index.html to enable angular to load all the files required Login process login.html LoginController.js Using $resource from AngularJS to make an API call and response  with a user details model UserViewModel and UserDetailsViewModel Using Unity fo...
2 comments
Read more