collapsableAddress.html

<div>
  <div [hidden]='!collapsed()' (click)="collapseAddress()">
    <h4>1 Address:</h4>
    {{user.address.street}} <br />
    {{user.address.city}}<br />
    {{user.address.planet}}
  </div>
  <div [hidden]='collapsed()' (click)="expandAddress()">
    <h4>2 Address:</h4>
    {{user.address.planet}}...
  </div>
</div>

collapsableAddress.js

import {Component, View, bootstrap, Attribute} from "angular2/angular2";

@Component({
  selector: 'collapsable-address',
  // properties: {
  //   'address' : 'address'
  // }
  bind: {
      address: 'address'
  }
})
@View({
  templateUrl: './templates/collapsable-address.html'
})
export class CollapsableAddress {
  constructor() {
    this.isCollapsed = false;
    console.log(this.address);
  }
  collapsed() {
    console.log(1);
    return false;
    // return this.isCollapsed;
  }
  expandAddress() {
    console.log(2);
    this.isCollapsed = !this.isCollapsed;
  }
  collapseAddress() {
    console.log(3);
    this.isCollapsed = !this.isCollapsed;
  }
}

main.html

<div>
  <h1>Hello {{ name }}</h1>
  {{users}}
  <div *ng-for="#user of users">
    <collapsable-address [thedata]="hi"></collapsable-address>

    USER: {{user}}
  </div>
</div>

main.js

import {NgFor, Component, View, bootstrap, Attribute} from "angular2/angular2";
import {users} from "./users"
import {CollapsableAddress} from "./collapsableAddress";
// console.log(users);
// console.log(CollapsableAddress);
console.log(NgFor);



@Component({
  selector: 'my-app' // Defines the <my-app></my-app> tag
})
@View({
  templateUrl: './templates/main.html', // Defines the inline template for the component
  directives: [CollapsableAddress, NgFor]
})
class MyAppComponent {
  name: string;
  constructor() {
    this.users = [1,2,3];
    // this.users = users;
    console.log(this.users);
  }
}



bootstrap(MyAppComponent).then(function(success) {
    console.log(success);
  }, function(err) {
    console.log(err);
});