Prepopulate phone book in angular using components and class?

Hi Gcobani,

It seems like this is an assignment question. Anyways see below for the steps to create a phone book in Angular

Step 1: Set up a new Angular project using the Angular CLI by running the command ng new phone-book in the terminal.

Step 2: Create a new component for the phone book form by running the command ng generate component phone-book-form.

Step 3: In the phone-book-form.component.html file, create a form that includes inputs for the first name, last name, and phone number, as well as a submit button. Here's an example:

  
    First name:
    
  
  

  
    Last name:
    
  
  

  
    Phone number:
    
  
  

  Submit

Step 4: In the phone-book-form.component.ts file, define properties for the firstName, lastName, and phoneNumber inputs and create a method called submit() that adds the entered information to an array of contacts. Here's an example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-phone-book-form',
  templateUrl: './phone-book-form.component.html',
  styleUrls: ['./phone-book-form.component.css']
})
export class PhoneBookFormComponent {
  firstName: string;
  lastName: string;
  phoneNumber: string;
  contacts: { firstName: string, lastName: string, phoneNumber: string }[] = [];

  submit() {
    this.contacts.push({ firstName: this.firstName, lastName: this.lastName, phoneNumber: this.phoneNumber });
    this.firstName = '';
    this.lastName = '';
    this.phoneNumber = '';
  }
}

Step 5: Create a new component for the phone book list by running the command ng generate component phone-book-list.

Step 6: In the phone-book-list.component.html file, use an *ngFor directive to display the list of contacts. Here's an example:

  

    {{ contact.lastName }}, {{ contact.firstName }} - {{ contact.phoneNumber }}
  

We have used sortByName pipe for sorting the contact list by the last name.

Step 7: In the phone-book-list.component.ts file, define an input property called contacts and create a sortByName pipe that sorts the contacts by last name. Here's an example:

import { Component, Input, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sortByName'
})
export class SortByNamePipe implements PipeTransform {
  transform(contacts: { firstName: string, lastName: string, phoneNumber: string }[]) {
    return contacts.sort((a, b) => a.lastName.localeCompare(b.lastName));
  }
}

@Component({
  selector: 'app-phone-book-list',
  templateUrl: './phone-book-list.component.html',
  styleUrls: ['./phone-book-list.component.css']
})
export class PhoneBookListComponent {
  @Input() contacts: { firstName: string, lastName: string, phoneNumber: string }[];
}

Step 8: In the app.component.html file, add the phone book form and list components to the page. Here's an example:
 

Step 9: Test the application by running