Custom Modal By Typescript And Scss for Ionic 4

HTML

<ion-content class="ion-padding">



  <div class="wrapper" [ngClass]="status ?  'show' : '' " (click)='modalClose()'></div>
  
<div class="modal" [ngClass]="status ?  'show' : '' ">
    <button class="close" (click)='modalClose()'> close</button>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit aperiam eum labore! Nihil consequuntur sequi
      placeat quasi fuga a, quia numquam corrupti exercitationem ut nostrum doloribus dolorem quis vitae vero?</p>

  </div>

  <button (click)='modalOpen()'> click me</button>

</ion-content>

SCSS

ion-content {
    .wrapper {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 56%);
        top: 0px;
        left: 0px;
        overflow: hidden;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;

        &.show {
            visibility: visible;
            opacity: 1;
        }
    }

    .modal {
        position: fixed;
        z-index: 9;
        background: white;
        padding: 10px;
        left: 0;
        right: 0;
        top: 40px;
        margin: 0 auto;
        width: 90%;
        border-radius: 10px;
        transition: 0.3s;

        visibility: hidden;
        opacity: 0;
        transform: translateY(50px);
        &.show {
            visibility: visible;
            opacity: 1;
            transform: translateY(0px);
        }
    }
}

TypeScript

  status: boolean = false;

  modalOpen() {
    this.status = true;
  }


  modalClose() {
    this.status = false;
  }