Demos

import { Component, Input } from 'angular2/core';

@Component({
    selector: 'zippy',
    template: `
    <div class="panel panel-info">
    <div class="panel-heading" (click)="toggle()">
        <div class="panel-title" >
            {{ title }}

            <i class="pull-right" [ngClass]="{
        'ti-angle-down': !isExpanded,
        'ti-angle-up': isExpanded   
    }"></i>
        </div>

    </div>
    <div class="panel-body" *ngIf='isExpanded'>
        <ng-content></ng-content>
    </div>
</div>
    `
})
export class ZippyComponent { 
    @Input() title:string;
    isExpanded = false;

    toggle(){
        this.isExpanded = !this.isExpanded;
    }
}

In the host component

import {Component} from "angular2/core";
import {ZippyComponent} from './shared/zippy.component';

@Component({
    selector: "app",
    template: `
    <zippy title="My Title 1">
        I am zippy content 1
    </zippy> 
    <zippy title="My Title 2">
        I am zippy content  2
    </zippy> 
    `,
    directives: [ZippyComponent]
})

export class MyApp{}