Angular2 - Associate simple events on component

Let's continue from our previous exercise to associate some events. Here's what we want to do. Display Contact information but hide Phone number and email. When the user taps on First name or last name, we display them. You click on it again, we hide phone number and email. This will introduce how events within the components can be wired. It's easy small exercise. Remember - one step at a time

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <div (click)="onSelect()"><b>{{contact.firstName}} {{contact.lastName}}</b></div>
        {{contact.designation}}<br />
        <input type="text" [(ngModel)]="contact.designation" />
        <ul *ngIf="showDetails == true">
            <li>Phone Number: {{contact.phoneNumber}}</li>
            <li>EMail Id: {{contact.emailId}}</li>
        </ul>
    `,
})
export class AppComponent {
    contact = new Contact("Krishnan", "Sriram", "Mobile Architect", "508 330 2744", "krishnan.srm@gmail.com");
    showDetails: Boolean = false;

    onSelect() {
        console.log("Header tapped");
        this.showDetails = !this.showDetails;
    }
}

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;
    }
}

We introduced quite a bit of changes from previous exercise. First, we changed the template. Modified top-most div tag to accept "select" event. Notice change in syntax. Later for "ul" element, we do a if on a class property to decide if we should show or hide more contact information. Also notice onSelect method. Pretty straight forward. that's it for now. Go ahead and try different events and have fun