angular2-simple-ui/sui/sui.modal/sui.modal.component.ts

Angular 2 Simple Material Design UI Components customisable with Simple 30 KB CSS with LESS support and full features support , just plugin up and run for clarity look at sample examples

import { Component, OnInit, Input, Output,
         OnChanges, EventEmitter, trigger,
         state, style, animate, transition } from '@angular/core';

@Component({
  selector: 'sui-modal',
  templateUrl: '/sui.modal.component.html',
  animations: [
    trigger('modal', [
      transition('void => *', [
        style({ transform: 'scale3d(.3, .3, .3)' }),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
      ])
    ])
  ]
})
export class ModalComponent implements OnInit {
  @Input() closable = true;
  @Input() visible: boolean;
  @Input() headerText: string;
  @Input() headerIcon: string= '';
  @Input() cssClassHeader: string= 'sui-theme';
  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();


  constructor() { }

  ngOnInit() { }

  close() {
    this.visible = false;
    this.visibleChange.emit(this.visible);
  }
}