Angular 2 - contact to contacts list

It's great that we now can display contact information. But we seldom deal with single contact in real life. What we want to in here is to have a list of contacts. When the the user taps on a particular contact, we display more details in our case that is phone number & email Id. We could do all of that in app.component.ts. But that will not just bloat this file, but will also parse our capabilities to re-use. We don't want that do we?. It is better for us to break this into app.component to multiple components and have app.component as an aggregator. With multiple components, code gets better and we promote re-usability, with that comes communication issues. That's what we will learn in coming exercises

In the “Dev” directory, I created a new directory “Contacts” and added 2 files for our 2 new components
1. contact-list.component.ts
2. contact-details.component.ts

ContactList component, will list from array of contacts. Tap on any contact, ContactDetails component will show details. Like I said earlier, the most interesting part of this exercise is not just splitting one component into multiple components, it allows us to explore ways for components to communicate with each other. For the moment this communication is one way, in course of time, we will see how 2 way communication happens.

Take a look at "directives". It plays an important role in component development. Look at directives like #includes or imports. When JS parser hits on "<contact-details>", it immediately looks for directive information, in the process, it's definition. Also note, every directive component should also have its corresponding import statement too 

contact-list.component.ts
 

/**
 * Created by krishnansriram on 5/13/16.
 */
import {Component} from 'angular2/core';
import {ContactDetailsComponent} from "./contact-details.component";

@Component({
    selector: 'contact-list',
    template: `
        <ul *ngFor="#contact of contacts">
            <li (click)="onSelect(contact)">{{contact.firstName}} {{contact.lastName}}</li>
        </ul>
        <contact-details [contact]="selectedContact"></contact-details>
    `,
    directives:[ContactDetailsComponent]
})
export class ContactListComponent {
    contacts = [
        new Contact("Krishnan", "Sriram", "Mobile Architect", "508 330 2744", "krishnan.srm@gmail.com"),
        new Contact("Rohit", "Sharma", "Mobility Director", "508 330 2745", "rohit.sharma@gmail.com"),
        new Contact("Amit", "Khanna", "Cloud Director", "508 330 2746", "amit.khanna@gmail.com"),
        new Contact("Bhagwan", "Kommadi", "Enterprise Architect", "508 330 2747", "bhagwank@gmail.com")
    ];
    public selectedContact = {};

    onSelect(contact) {
        console.log("Header tapped");
        this.selectedContact = contact;
    }
}

class Contact {
    firstName: string;
    lastName: string;
    designation: string;
    phoneNumber: string;
    emailId: string;

    constructor(fname, lname, dsgn, phone, email) {
        this.firstName = fname;
        this.lastName = lname;
        this.designation = dsgn;
        this.phoneNumber = phone;
        this.emailId = email;
    }
}

contact-details.component.ts

/**
 * Created by krishnansriram on 5/13/16.
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'contact-details',
    template: `
       <div>
            Designation: {{contact.designation}}<br>
            Phone Number: {{contact.phoneNumber}}<br>
            EMail Id: {{contact.emailId}}
        </div>
    `,
    inputs:["contact"]
})
export class ContactDetailsComponent {
    public contact = {};
}

app.component.ts 

import {Component} from 'angular2/core';
import {ContactListComponent} from "./Contacts/contact-list.component";

@Component({
    selector: 'my-app',
    template: `
        <h3>Contacts</h3>
        <contact-list></contact-list>  
    `,
    directives: [ContactListComponent]
})
export class AppComponent {
    
}

Now look at how beautiful our AppComponent is. CLEAN.

By now you know how to run your changes. Run the code and have fun building more components