How to dismiss an inline modal?

Ionic Framework
1

Hey guys,

how can I dismiss an Inline Modal by a button action?

Do I somehow have to use “ViewChild”?

Thanks in advance,
Oliver

1 Like
2

Well works with the @ViewChild, but the Inline Modal is only triggered once because of the ID – and all item have the same. Any idea how to use inline Modal in this case?

<ion-header collapse="fade" [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
        color="dark"
        defaultHref="/"
        [text]="platform.is('ipad') ? 'Settings':''"
      ></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-no-padding">Manage Categories</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" forceOverscroll="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Manage Categories</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-list class="ion-margin-top">
    <ion-item
      *ngFor="let category of categoriesService.categories"
      button
      id="openModal"
    >
      <ion-label class="ion-text-wrap">
        <ion-text class="bold">
          <p class="ion-label">{{ category.name }}</p>
        </ion-text>
        <ion-note>{{ category.description }}</ion-note>
      </ion-label>
      <ion-toggle
        slot="end"
        [checked]="category.active_flg === 1"
        (ionChange)="setActive(category.id)"
      ></ion-toggle>
    </ion-item>
  </ion-list>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-modal trigger="openModal" #inlineModal>
    <ng-template>
      <ion-header class="ion-no-border">  
        <ion-toolbar>
          <ion-buttons slot="end">
            <ion-button (click)="dismissModal()">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
    
      <div class="ion-padding">
        My Inline Modal
      </div>
    </ng-template>
  </ion-modal>
</ion-content>

import { Component, OnInit, ViewChild } from '@angular/core';
import { Platform, ModalController } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { CategoriesService } from '../../../services/connector/categories.service';
import { ICategoryItem } from '../../../types';

@Component({
  selector: 'app-events-categories',
  templateUrl: './events-categories.page.html',
  styleUrls: ['./events-categories.page.scss'],
})
export class EventsCategoriesPage implements OnInit {
  @ViewChild('inlineModal') inlineModal!: ModalController;
  private categories:ICategoryItem[] = null; 

  constructor(
    public platform: Platform,
    private route: ActivatedRoute,
    private modalController: ModalController,
    private categoriesService: CategoriesService,
  ) { 
    console.log(this.route);
  }

  ngOnInit() {
  }

  setActive(id: number) {
    this.categoriesService.setCategoryItem(
      id,
      'active_flg',
      (this.categoriesService.getCategory(id)).active_flg === 1 ? null : 1);
  }

  showCategoryDetails(item: ICategoryItem) {
    console.log(item);
  }

  dismissModal() {
    this.inlineModal.dismiss();
  }
}
3

I think the code below will be sufficient. This method closes the modal on top of the stack.
No need to use ViewChild.

this.modalController.dismiss()
3 Likes
4

Sure? Since it is an inline modal anyway?