Angular2 TypeScript Modal files

app.ts

import {Input, Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

interface Model {
	name: string
}

@Component({
	selector: 'modal'
})

@View({
	directives: [CORE_DIRECTIVES],
	template: `
		<div *ng-if="show">
			{{ track() }}
			<ng-content></ng-content>
		</div>
	`
})

class Modal {
	@Input() show: bool;
	
	track() {
		console.log("from modal's view")
	}
}

@Component({
	selector: 'app'
})

@View({
	directives: [CORE_DIRECTIVES, Modal],
	template: `

		<modal [show]="model">
			Modal Dialog: 
			{{ track() }} 
			<div id="myModal" class="modal fade in" tabindex="-1">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button (click)="emptyModal()" type="button" class="close">
							<span aria-hidden="true">×</span></button>
							<h4 class="modal-title" id="myModalLabel">{{model.title}}</h4>
						</div>
						<div class="modal-body">
							<p>{{model.message}}</p>
						</div> 
						<div class="modal-footer">
							<button (click)="emptyModal()" type="button" class="btn btn-default" data-dismiss="modal">{{model.noLabel | uppercase}}</button>
							<button (click)="model.modalCallback(); emptyModal()" type="button" class="btn btn-primary">{{model.yesLabel | uppercase}}</button> 
						</div> 
					</div> <!-- end modal-content -->
				</div> 
			</div>
		</modal>
		
		<button (click)="showModal('Save', 'Canel', 'Would you like to save your changes?', otherCallback)">Show Modal</button>
	`,
	styleUrls: ['//gist.githubusercontent.com/mikeumus/d4361ad0edb1d2f6bb4c04d16a4750f9/raw/6e5f3730a5711013d50100186f8266b87955086b/modal.css'] // ['modal.css'] 
}) 

export class App { 
	model: Model; 

	showModal(yesLbl, noLbl, msg, callback) {  
		this.model = { 
			title: "Bloomberg Modal Title",
			yesLabel: yesLbl || "Save",
			noLabel: noLbl || "Cancel",
			message: msg || "DEFAULT MODAL COPY. PLEASE INSERT YOUR OWN COPY.",
			id: "1",
			name: "NgFor"
			modalCallback: callback || function() {
				console.log("Yes");
			}
		}  
	}
	
	emptyModal() {
		this.model = "";
	}
	
	otherCallback() {
		alert("Called me back!");
	}
	
	track() {
		console.log("from app's view")
	}
}

main.ts

//main entry point
import {bootstrap} from 'angular2/angular2'
import {App} from '//gist.githubusercontent.com/mikeumus/d4361ad0edb1d2f6bb4c04d16a4750f9/raw/44c1bd62aa7a9cd7836304506fd16fc106cfc5ee/app.ts' // './app'

bootstrap(App)
	.catch(err => console.error(err));

modal.css

.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}

.modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	background: rgba(0,0,0,0.333);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	/*display: none;*/
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}

.modal-content {
	position: relative;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 6px;
	outline: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
	box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal-dialog{
	padding: 33px;
	width: 633px;
}

.modal-header {
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
}

.modal-body, .modal-footer{padding: 33px;}
	.modal-footer{text-align: right;}
	.close{float: right;}

@media (min-width: 768px){
	.modal-dialog {
		width: 600px;
		margin: 30px auto;
	}
	.modal-dialog {
		position: relative;
		width: auto;
		margin: 10px;
	}
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
		box-shadow: 0 5px 15px rgba(0,0,0,.5);
	}
}