i learnt this

Let us continue from where we left in the previous post . In this post we will Make our address book project modular. Having Input to our components Our app.component.ts is doing everything, it is holding all the data displaying all the components. If  in future, we have to add a few more features to the address book module, chances are the entire file will become a mess. (Here we need to note that atleast our contact.html is a different file, having it in the same class would reduce code readability) In Step 1 , we will convert our existing code into a modular code. We will create a contact.ts class, which will hold the class Contact. export class Contact { name : String ; contactNumber : Number ; address : String ; } Next, we will create a contact.dummy.ts which will hold the dummy data of the Contacts. import { Contact } from './contact' ; export var DUMMY_CONTACTS : Contact [] = [{ name : "Jon Snow" , cont...

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 : ...