Address Book - Part 2

A step further of the previous post.

In this post we will

• Save our html in another file
• Create a data structure to hold contact data

Our datastructure for contacts should hold the following information for now:

• name
• number
• address

Make the following changes in our application

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

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"; contact : Contact = { name : "Jon Snow", contactNumber : 111, address : "North" }; }

Line 4 gives a new datastructure to hold contact information. Line 14 tells that the view is in the html file.

Create a new file contacts.html in app folder ->

1 2 3 4 5 6 7 8 9

<h1>{{title}}</h1> <label>Name:</label> {{contact.name}} <br> <label>Contact :</label> <input [(ngModel)]="contact.contactNumber"> <br> <label>Address :</label> {{contact.address}} <br> <b>{{contact.name}} , {{contact.contactNumber}}</b>

Output:

Useful link: Angular Index