Оценок пока нет Собственное дилоговое окно в Ionic

Создать собственное диалоговое окно появилось из-за потребности разместить на нем те элементы формы, которые небыло возможности вывести стандартным диалоговым окном из модуля AlertController. Можно было, конечно и выводить эти формы отдельной страницы, но нам нужно было именно выводить на одной странице все, чтобы после операций эти формы исчезали и появлялись, если мы хотим добавить что-то. Для начала нам нужна страница, любая, допустим, сгенерируем ее в проекте при помощи команды Ionic и назовем «content»:

ionic g page content

Далее в файл content.html добавляем в корень элемента ion-content следующий скелет кода xml:

<ion-content>
  <ion-card class="modal-dialog" [class]="dialogStatus">
    <ion-card-header>
      Add New Course
    </ion-card-header>
    <ion-card-content>
      <ion-list>
          <ion-item>
            <ion-input [(ngModel)]="courseTitle" placeholder="Title"></ion-input>
          </ion-item>
          <ion-item>
            <ion-textarea [(ngModel)]="courseDescription" rows="5" placeholder="Description..." maxLength="300"></ion-textarea>
          </ion-item>
          <ion-item>
            <ion-input [(ngModel)]="coursePrice" type="number" placeholder="Price, $"></ion-input>
          </ion-item>
          <ion-item>
            <ion-row>
              <ion-col col-6>
                <button full ion-button (click)="dialogButton('ADD_COURSE')">Ok</button>
              </ion-col>
              <ion-col col-6>
                <button full ion-button (click)="dialogButton('CANCEL')">Cancel</button>
              </ion-col>
            </ion-row>
          </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
  <ion-fab top right edge>
      <button ion-fab mini><ion-icon name="add"></ion-icon></button>
      <ion-fab-list>
        <button ion-fab><ion-icon name="list-box" (click)="openDialog()"></ion-icon></button>
      </ion-fab-list>
  </ion-fab>
  ...

</ion-content>

Далее добавляем в фай content.scss добавляем правило для нашего диалогового окна:

.modal-dialog{
    $modal-inset-min-width:0;
    $modal-inset-min-height-small:0;
    display: absolute;
    top: 0pt;
    left: 0pt;
    height: auto;
}
.modal-hide{
    height: 0pt;
}
.modal-show{
    height: auto;
}

В файле content.ts добавляем логику обработки событий кнопок:

@Component({
  selector: 'page-content',
  templateUrl: 'content.html',
})
export class ContentPage { 
  //Переменная для хранения состояния диалога
  dialogStatus = "modal-hide";
  //Переменные для хранения из форм
  courseTitle = "";
  courseDescription = "";
  coursePrice = "";
  
  ...
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
        
  }
  
  //Обработчик события нажатия на кнопки в диалоге
  dialogButton(action)
  {
    if(action == 'CANCEL')//Если нажата кнопка CANCEL
    {
      this.dialogHide();
    }
    if(action == 'ADD_COURSE')//Если нажата кнопка OK
    {
        //Сохраняем данные из форм
        let data = {
          'title': this.courseTitle,
          'icon': 'assets/icon/ui/course.svg',
          'description': this.courseDescription,
          'color': '#E63135',
          'price':this.coursePrice
        };
        //Обнуляем форму
        this.courseTitle = "";
        this.courseDescription = "";
        this.coursePrice = "";
    }
  }
  //Обработчик закрытия диалога
  dialogHide()
  {
    this.dialogStatus = "modal-hide";
  }
  //Обработчик открытия диалога
  dialogShow()
  {
    this.dialogStatus = "modal-show"; 
  }
}