Address Book - Part 3 (ngFor, ngIf and click)

In continuation with the previous post.

We will add the following features to our address book

• Multiple contacts
• Click on a contact on get contact information

In order to have multiple contacts, we need to store them in an array. Next to display all the contact names, we need a loop which will iterate over the contacts and display contact information(ngFor directive).

The app.component.ts will have an array of contacts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import { Component } from '@angular/core'; class Contact { name : String; contactNumber : Number; address : String; } @Component({ selector: 'my-app', templateUrl: './contacts.html' }) export class AppComponent { title = "Address Book"; contacts : Contact[] = [{ name : "Jon Snow", contactNumber : 111, address : "North" }, { name : "Cersie", contactNumber : 222, address : "Kings Landing" }, { name : "Daenerys", contactNumber : 333, address : "Meereen" }, { name : "Tyrion", contactNumber : 444, address : "Meereen" }, ]; }

In contacts.html use the ngFor directive:

1 2 3 4 5 6 7

<h1>{{title}}</h1> <ul> <li *ngFor="let contact of contacts"> {{contact.name}} </li> </ul>

Output:

On click of every contact name, we need to provide the details of the contact. To achieve this, we will make use of click and ngIf.

app.component.ts ->

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

import { Component } from '@angular/core'; class Contact { name : String; contactNumber : Number; address : String; } @Component({ selector: 'my-app', templateUrl: './contacts.html' }) export class AppComponent { selectedContact : Contact; title = "Address Book"; contacts : Contact[] = [{ name : "Jon Snow", contactNumber : 111, address : "North" }, { name : "Cersie", contactNumber : 222, address : "Kings Landing" }, { name : "Daenerys", contactNumber : 333, address : "Meereen" }, { name : "Tyrion", contactNumber : 444, address : "Meereen" }, ]; onSelection(contact : Contact) : void { this.selectedContact = contact; } }

contacts.html ->

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<h1>{{title}}</h1> <ul> <li *ngFor="let contact of contacts"> <span (click)="onSelection(contact)"> {{contact.name}}</span> </li> </ul> <div *ngIf="(selectedContact)"> <label>Name:</label> {{selectedContact.name}} <br> <label>Contact :</label> {{selectedContact.contactNumber}} <br> <label>Address :</label> {{selectedContact.address}} <br> </div>

Whenever you click on the contact name the onSelection method is called and the selectedContact value is set to that contact value. The ngIf condition is satisfied and the data is displayed.

Useful link: Angular Index