NG2 Modal

app.ts

import {Component} from 'angular2/core';
import Modal from './modal';

@Component({
  selector: 'ngc-app',
  template: `
<div class="p3">
  <p class="p4">
    <button class="btn btn-primary block col-6 mx-auto"
      (click)="showModal()">
      Show Modal
    </button>
  </p>
  <p class="center">
    Last Action Fired: <code class="bold">{{ firedAction }}</code><br/>
    Modal Visible: <code class="bold">{{ modalVisible }}</code>
  </p>
  <ngc-modal [(isVisible)]="modalVisible"
    title="Bacon with Header and Footer">
    <p class="m0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.</p>
    <button class="btn caps"
      (click)="action('Share')">
      Share
    </button>
    <button class="btn caps"
      (click)="action('Explore')">
      Explore
    </button>
  </ngc-modal>
</div>`,
  directives: [Modal]
})
export default class App {
  modalVisible: boolean = false;
  firedAction: string;

  showModal() {
    this.modalVisible = true;
  }

  action(type) {
    this.modalVisible = false;
    this.firedAction = type;
  }
}

modal.ts

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

@Component({
  selector: 'ngc-modal',
  template: `
<div class="fixed top-0 right-0 bottom-0 left-0 bg-darken-4 flex flex-center"
  *ngIf="isVisible">
  <div class="sm-col-12 md-col-8 lg-col-6 mx-auto overflow-hidden bg-white rounded">

    <div class="p2 flex">
      <h1 class="h2 m0 flex-auto">
        {{ title }}
      </h1>
      <button class="btn"
        (click)="close()">
        ✖
      </button>
    </div>

    <div class="p2">
      <ng-content></ng-content>
    </div>

    <div class="p2 bg-blue aqua">
      <ng-content select="button"></ng-content>
    </div>
  </div>
</div>
`,
  inputs: ['isVisible', 'title'],
  outputs: ['isVisibleChange']
})
export default class Modal {
  isVisible: boolean;
  title: string;
  isVisibleChange: EventEmitter = new EventEmitter();

  close() {
    this.isVisibleChange.emit(false);
  }
}