Simple Modals with Angular2

0-sweet-modals.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'sweet-modal',
  styleUrls: ['sweet-modal.component.css']
  templateUrl: 'sweet-modal.component.html'
})
export class LsModalComponent {
  @Input() width: string = '400px';

  display: false;
    
  open() {
    this.display = true;
  }

  close(val = null) {
    this.display = false;
  }
}

1-sweet-modal.component.html

<div class="overlay" *ngIf="display"></div>

<div *ngIf="display" [style.width]="width" class="modal-container">
    <div class="modal-header">
        <ng-content select=".sweet-modal-header"></ng-content>
    </div>
    
    <div class="modal-body">
        <ng-content select=".sweet-modal-body"></ng-content>
    </div>
    
    <div class="modal-footer">
        <ng-content select=".sweet-modal-footer"></ng-content>
    </div>
</div>

2-sweet-modal.component.css

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -10%);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.overlay {
  position: fixed;
  display: block;
  content: '';
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .4;
  z-index: 1000;
}

.modal-card {
  animation-name: fadeIn;
  animation-duration: .2s;
  position: fixed;
  left: 50%;
  top: 10%;
  transform: translate(-50%, 0);
  z-index: 1001;
}

3-usage.component.html

<!-- Button to open modal -->
<button (click)="modal.open()">Open Modal</button>

<!-- Define the modal and grab reference -->
<sweet-modal width="400px" #modal>
  <section class=".sweet-modal-header">The Header</section>
  
  <section class=".sweet-modal-body">The Body</section>
  
  <section class=".sweet-modal-header">
    <button (click)="modal.close()">Close</button>
  </section>
</sweet-modal>