Skip to main content

Ionic 4 + 5 Modal Window With Custom Height and Width

Create A New Ionic Project

ionic start blank CustomModal blank --type=angular

Now create a new modal page as per your need 

ionic g page modal_page_name



Open index.html and add this style tag in your header


<style>
    ion-modal {
      margin-top: 50%;
      margin-bottom: 20%;
      margin-right: 10px;
      margin-left: 10px;
      border-radius: 10px;
      --background-color: rgba(255, 255, 255, 0.7);
    }
  </style>

Open home.module.ts and Import Your Modal Page


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
//here is my modal page component
import { DetailsPageModule } from '../details/details.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    //add here your modal page module
    DetailsPageModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }



Open home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-button (click)="presentModal()" expand="full">Open</ion-button>
</ion-content>

home.page.ts


import { Component, HostListener } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { DetailsPage } from '../details/details.page';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  disabled: boolean = false;
  constructor(public modalController: ModalController) {

  }

  async presentModal() {
    const modal = await this.modalController.create({
      component: DetailsPage,
      cssClass: 'pricebreakup',
      backdropDismiss: true
    });

    return await modal.present();
  }
}



Open your modal page module file here my modal page name is Details and add entryComponents



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import { DetailsPage } from './details.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule
  ],
  declarations: [DetailsPage],
  //add your page name in here
  entryComponents: [DetailsPage]
})
export class DetailsPageModule { }

Here i am showing simple list in my modal page you can add what you want in your modal page




Modal Page HTML

<ion-content>
  <ion-list class="list-bg">
    <ion-item color="secondary" *ngFor="let item of items">
      <ion-label>{{item.item}}</ion-label>
    </ion-item>
  </ion-list>
  <ion-button (click)="dismiss()" expand="full" color="light">Close</ion-button>
</ion-content>

Modal Page css

.list-bg{
    background-color: lightblue;
    border-color: lightcoral;
    border-radius: 0rem;
}


Modal Page Typescript file
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {

  items = [
    {
      "item": "Item 1"
    },
    {
      "item": "Item 2"
    },
    {
      "item": "Item 3"
    },
    {
      "item": "Item 4"
    },
    {
      "item": "Item 5"
    },
    {
      "item": "Item 6"
    },
    {
      "item": "Item 7"
    }
  ]
  constructor(public modalCtrl: ModalController) {
  }

  ngOnInit() {
  }


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

  ionViewWillLeave() {
    console.log("ionViewWillLeave");
  }
}




Comments

Post a Comment

Popular posts from this blog

Check Internet Connectivity In Ionic 5 App

Hi all, in this example you can set a condition to check your internet is connected or not please follow the below steps First Create A new Project      ionic start AppName blank --type=angular           Note: In this example i used Tabs in App Now Create a Modal Page     ionic g page /modals/modal-page Now Create a Provider       ionic generate provider ConnectivityProvider     Note: Make sure your provider is present in Provider Array in app.module.ts file ConnectivityProvider: import { Injectable } from '@angular/core' ; import { Observable , fromEvent , merge , of } from 'rxjs' ; import { map } from 'rxjs/operators' ; @ Injectable ({ providedIn : 'root' }) export class ConnectivityProvider { public appIsOnline$ : Observable < boolean >; constructor () { this . initConnectivityMonitoring (); } private initConnectivityMonitoring () { if (! window || ! navigator ...
Post a Comment
Read more

Chat App With Elastic Textarea - Ionic 4

Create A Project And Install This Packages ionic start blank chatApp blank --type=angular  For Elastic Textarea Install AutosizeModule npm install ngx-autosize  Optional  npm install @ionic/labs  Open home.module.ts and Import AutosizeModule import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; import {AutosizeModule} from 'ngx-autosize'; @NgModule({   imports: [     CommonModule,     FormsModule,     IonicModule,     AutosizeModule,     RouterModule.forChild([       {         path: '',         component: HomePage       }     ])   ],   declarations: [HomePage] ...
1 comment
Read more