A Detailed Guide on ion-model in Ionic Framework


Isn't it fun,

to instantly listen to a blog on the go? PLAY !

 
 

A_Detailed_Guide_on_ion_model_in_Ionic_Framework

Table of Content

What is ion-model?

A modal is a pop-up dialogue that appears on top of the app's content and must be closed before interaction may proceed.

It can be used as a select component when there are many options to choose from or to filter items in a list, among other things.

Dismiss

The dismiss() method on the modal controller can be used to dismiss the modal once it has been created.

After the modal has been dismissed, the onDidDismiss function can be used to do an action.

Customization

Using scoped encapsulation, Modal will automatically scope its CSS at runtime by adding an extra class to each of the styles.

In CSS, overriding scoped selectors necessitates a selector with higher specificity.

We recommend utilizing the create method to pass a custom class to cssClass and using it to add custom styles to the host and inner elements.

Multiple classes can be separated by spaces in this property.

To understand how to pass a class using cssClass, you can refer the Usage section.


.modal-wrapper {
    background: #222;
  }

This CSS class does not work.


.my-custom-class .modal-wrapper {
    background: #222;
  }



Works pass “my-custom-class” in cssClass to increase specificity.

Without the need of targeting specific elements, any of the provided CSS Custom Properties can be used to customize the Modal:


.my-custom-class {
    --background: #222;
  }



Usage


import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component({
  selector: 'modal-page',
  templateUrl: 'modal-page.html',
  styleUrls: ['./modal-page.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {
  }
  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      cssClass: 'my-customclass'
    });
    return await modal.present();
  }
}




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

@Component({
  selector: 'modal-page',
})
export class ModalPage {
  constructor() {}
}


Use a (div class="ion-page") as a wrapper element inside your modal component so that the component dimensions are still calculated correctly.

 

Passing Data

Data can be provided via componentProps during the establishment of a modal. The following data can be added to the preceding example


async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: 'my-customclass',
    componentProps: {
      'firstName': 'Douglas',
      'lastName': 'Adams',
      'middleInitial': 'N'
    }
  });
  return await modal.present();
}



To passed data into the componentProps, set it as an @Input:



export class ModalPage {

  // Data passed in by componentProps
  @Input() firstName: string;
  @Input() lastName: string;
  @Input() middleInitial: string;
}



Dismissing a modal

By invoking the dismiss method on the modal controller and optionally supplying any data from the modal, a modal can be dismissed.


export class ModalPage {
  ...

  dismiss() {
    
    this.modalController.dismiss({
      'dismissed': true
    });
  }
}


The data can be read in through the onWillDismiss or onDidDismiss linked to the modal after it has been dismissed:


const { data } = await modal.onWillDismiss();
console.log(data);



Lazy Loading

When lazy loading a modal, remember that the modal will be loaded when the module (that imports the modal's module) is loaded, not when the modal is opened.

Consider the case of a CalendarComponent and an EventModal.

By clicking a button in the CalendarComponent, the modal appears.

Because the modal is produced in the CalendarComponentModule, the EventModalModule must be included in the CalendarComponentModule in Angular:


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { CalendarComponent } from './calendar.component';
import { EventModalModule } from '../modals/event/event.module';
@NgModule({
  declarations: [
    CalendarComponent
  ],
  imports: [
    IonicModule,
    CommonModule,
    EventModalModule
  ],
  exports: [
    CalendarComponent
  ]
})
export class CalendarComponentModule {}





 

Searching for Reliable Angular Frontend Development Company ?

Your Search ends here.

 

Swipeable Models

Modals in iOS mode can be presented in a card-like format and swiped to close.

The card-style display and the swipe to close action aren't mutually exclusive, so you can employ whichever features you like.

On iPhone-sized devices, card-style models do not have a background. As a result, the --background-opacity parameter has no impact.

If you are building an application that makes use of ion-tabs, it is suggested to bring up ion-router-outlet using this.routerOutlet.parentOutlet.nativeEl, or else when the modal opens, the tab bar will not scale down.


import { IonRouterOutlet } from '@ionic/angular';

constructor(private routerOutlet: IonRouterOutlet) {}
async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: 'my-customclass',
    swipeToClose: true,
    presentingElement: this.routerOutlet.nativeEl
  });
  return await modal.present();
}





Using the ion-router-outlet element as the presentingElement is fine in most cases.

The top-most ion-modal element should be utilized as the presentingElement when showing a card-style modal from within another modal.



import { ModalController } from '@ionic/angular';

constructor(private modalController: ModalController) {}
async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: 'my-customclass',
    swipeToClose: true,
    presentingElement: await this.modalController.getTop() 
  });
  return await modal.present();
}



Events

 
Name Description
ionModalDidDismiss After the modal has been discarded, this is emitted.
ionModalDidPresent After the modal has been provided, this is emitted.
ionModalWillDismiss Before the modal has been discarded, this is emitted.
ionModalWillPresent Before the modal has appeared, this is emitted.
 

Methods

1) dismiss():
  1. After the modal overlay has been provided, dismiss it.
  2. Signature:
dismiss(data?: any, role?: string | undefined) => Promise
2) onDidDismiss():
  1. When the modal was dismissed, this method returns a promise that resolves.
  2. Signature:
onDidDismiss<t>() =&gt; Promise<overlayeventdetail<t>&gt;</overlayeventdetail<t></t>
3) onWillDismiss():
  1. Returns a promise indicating when the modal will be dismissed.
  2. Signature:
<t><overlayeventdetail<t>
onWillDismiss<t>() =&gt; Promise<overlayeventdetail<t>&gt;
</overlayeventdetail<t></t></overlayeventdetail<t></t>

4) Present():
  1. After the modal overlay has been generated, present it.
  2. Signature:
<t><overlayeventdetail<t><t><overlayeventdetail<t>
present() =&gt; Promise<void>
</void></overlayeventdetail<t></t></overlayeventdetail<t></t>

CSS Custom Properties:

   Name Description
---backdrop-opacity The opacity of the backdrop
--background Background of the model content
--border-color Border color of the model content
--border-radius Border radius of the model content
--border-style Border style of the model content
--border-width The border width of the model content
--height Height of the model
--max-height Maximum height of the model
--min-height Minimum height of the model
--max-width Maximum width of the model
--min-width Minimum width of the model
--width Width of model
 

Conclusion

In this blog, we have seen what is ion-model in the Ionic framework and how to use ion-model in your project. As we see above We can use ion-model as a select component when there are many options to choose from or to filter items in a list.

A Detailed Guide on ion-model in Ionic Framework

A_Detailed_Guide_on_ion_model_in_Ionic_Framework

Table of Content

What is ion-model?

A modal is a pop-up dialogue that appears on top of the app's content and must be closed before interaction may proceed.

It can be used as a select component when there are many options to choose from or to filter items in a list, among other things.

Dismiss

The dismiss() method on the modal controller can be used to dismiss the modal once it has been created.

After the modal has been dismissed, the onDidDismiss function can be used to do an action.

Customization

Using scoped encapsulation, Modal will automatically scope its CSS at runtime by adding an extra class to each of the styles.

In CSS, overriding scoped selectors necessitates a selector with higher specificity.

We recommend utilizing the create method to pass a custom class to cssClass and using it to add custom styles to the host and inner elements.

Multiple classes can be separated by spaces in this property.

To understand how to pass a class using cssClass, you can refer the Usage section.


.modal-wrapper {
    background: #222;
  }

This CSS class does not work.


.my-custom-class .modal-wrapper {
    background: #222;
  }



Works pass “my-custom-class” in cssClass to increase specificity.

Without the need of targeting specific elements, any of the provided CSS Custom Properties can be used to customize the Modal:


.my-custom-class {
    --background: #222;
  }



Usage


import { Component } from &amp;#39;@angular/core&amp;#39;;
import { ModalController } from &amp;#39;@ionic/angular&amp;#39;;
import { ModalPage } from &amp;#39;../modal/modal.page&amp;#39;;

@Component({
  selector: &amp;#39;modal-page&amp;#39;,
  templateUrl: &amp;#39;modal-page.html&amp;#39;,
  styleUrls: [&amp;#39;./modal-page.css&amp;#39;]
})
export class ModalExample {
  constructor(public modalController: ModalController) {
  }
  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      cssClass: &amp;#39;my-customclass&amp;#39;
    });
    return await modal.present();
  }
}




import { Component, Input } from &amp;#39;@angular/core&amp;#39;;

@Component({
  selector: &amp;#39;modal-page&amp;#39;,
})
export class ModalPage {
  constructor() {}
}


Use a (div class="ion-page") as a wrapper element inside your modal component so that the component dimensions are still calculated correctly.

 

Passing Data

Data can be provided via componentProps during the establishment of a modal. The following data can be added to the preceding example


async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: &amp;#39;my-customclass&amp;#39;,
    componentProps: {
      &amp;#39;firstName&amp;#39;: &amp;#39;Douglas&amp;#39;,
      &amp;#39;lastName&amp;#39;: &amp;#39;Adams&amp;#39;,
      &amp;#39;middleInitial&amp;#39;: &amp;#39;N&amp;#39;
    }
  });
  return await modal.present();
}



To passed data into the componentProps, set it as an @Input:



export class ModalPage {

  // Data passed in by componentProps
  @Input() firstName: string;
  @Input() lastName: string;
  @Input() middleInitial: string;
}



Dismissing a modal

By invoking the dismiss method on the modal controller and optionally supplying any data from the modal, a modal can be dismissed.


export class ModalPage {
  ...

  dismiss() {
    
    this.modalController.dismiss({
      &amp;#39;dismissed&amp;#39;: true
    });
  }
}


The data can be read in through the onWillDismiss or onDidDismiss linked to the modal after it has been dismissed:


const { data } = await modal.onWillDismiss();
console.log(data);



Lazy Loading

When lazy loading a modal, remember that the modal will be loaded when the module (that imports the modal's module) is loaded, not when the modal is opened.

Consider the case of a CalendarComponent and an EventModal.

By clicking a button in the CalendarComponent, the modal appears.

Because the modal is produced in the CalendarComponentModule, the EventModalModule must be included in the CalendarComponentModule in Angular:


import { NgModule } from &amp;#39;@angular/core&amp;#39;;
import { CommonModule } from &amp;#39;@angular/common&amp;#39;;
import { IonicModule } from &amp;#39;@ionic/angular&amp;#39;;

import { CalendarComponent } from &amp;#39;./calendar.component&amp;#39;;
import { EventModalModule } from &amp;#39;../modals/event/event.module&amp;#39;;
@NgModule({
  declarations: [
    CalendarComponent
  ],
  imports: [
    IonicModule,
    CommonModule,
    EventModalModule
  ],
  exports: [
    CalendarComponent
  ]
})
export class CalendarComponentModule {}





 

Searching for Reliable Angular Frontend Development Company ?

Your Search ends here.

 

Swipeable Models

Modals in iOS mode can be presented in a card-like format and swiped to close.

The card-style display and the swipe to close action aren't mutually exclusive, so you can employ whichever features you like.

On iPhone-sized devices, card-style models do not have a background. As a result, the --background-opacity parameter has no impact.

If you are building an application that makes use of ion-tabs, it is suggested to bring up ion-router-outlet using this.routerOutlet.parentOutlet.nativeEl, or else when the modal opens, the tab bar will not scale down.


import { IonRouterOutlet } from &amp;#39;@ionic/angular&amp;#39;;

constructor(private routerOutlet: IonRouterOutlet) {}
async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: &amp;#39;my-customclass&amp;#39;,
    swipeToClose: true,
    presentingElement: this.routerOutlet.nativeEl
  });
  return await modal.present();
}





Using the ion-router-outlet element as the presentingElement is fine in most cases.

The top-most ion-modal element should be utilized as the presentingElement when showing a card-style modal from within another modal.



import { ModalController } from &amp;#39;@ionic/angular&amp;#39;;

constructor(private modalController: ModalController) {}
async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: &amp;#39;my-customclass&amp;#39;,
    swipeToClose: true,
    presentingElement: await this.modalController.getTop() 
  });
  return await modal.present();
}



Events

 
Name Description
ionModalDidDismiss After the modal has been discarded, this is emitted.
ionModalDidPresent After the modal has been provided, this is emitted.
ionModalWillDismiss Before the modal has been discarded, this is emitted.
ionModalWillPresent Before the modal has appeared, this is emitted.
 

Methods

1) dismiss():
  1. After the modal overlay has been provided, dismiss it.
  2. Signature:
dismiss(data?: any, role?: string | undefined) => Promise
2) onDidDismiss():
  1. When the modal was dismissed, this method returns a promise that resolves.
  2. Signature:
onDidDismiss<t>() =&gt; Promise<overlayeventdetail<t>&gt;</overlayeventdetail<t></t>
3) onWillDismiss():
  1. Returns a promise indicating when the modal will be dismissed.
  2. Signature:
<t><overlayeventdetail<t>
onWillDismiss<t>() =&gt; Promise<overlayeventdetail<t>&gt;
</overlayeventdetail<t></t></overlayeventdetail<t></t>

4) Present():
  1. After the modal overlay has been generated, present it.
  2. Signature:
<t><overlayeventdetail<t><t><overlayeventdetail<t>
present() =&gt; Promise<void>
</void></overlayeventdetail<t></t></overlayeventdetail<t></t>

CSS Custom Properties:

   Name Description
---backdrop-opacity The opacity of the backdrop
--background Background of the model content
--border-color Border color of the model content
--border-radius Border radius of the model content
--border-style Border style of the model content
--border-width The border width of the model content
--height Height of the model
--max-height Maximum height of the model
--min-height Minimum height of the model
--max-width Maximum width of the model
--min-width Minimum width of the model
--width Width of model
 

Conclusion

In this blog, we have seen what is ion-model in the Ionic framework and how to use ion-model in your project. As we see above We can use ion-model as a select component when there are many options to choose from or to filter items in a list.

Author Bio

Author

Author Name: Hemanshu Kalsariya

Hemanshu Kalsariya is an adept and creative Angular Developer. With great exposure to design patterns and frontend development, he frequently shares incredible Angular insights on various platforms.