Toggle Ionic Modal View Without Destroying It


#1

Hello All,

I’m trying to hide or move a modal out of view but not close it. And then the ability to bring in back in position. Is it possible?

The reason is, I use a modal to show my video conversation, which works fine, but then I cannot continue chatting or interacting with my app anymore unless I dismiss the modal which closes the call.

Or maybe, I’m approaching this problem the wrong way? Is there another way to achieve this?

In all case, thanks for your answer(s).


#2

I would say a modal is not the best way as there is a backdrop area which tpu also need to dral with

Why not use a custom component which hides and views, or even resizes which I pu assign absolute position on the screen using css, and with a z-index which allows the component to overlay your main screen?


#3

Hello Tom. Thanks for your advice. I’ll look into it. This said, how could I change the class of the root div of my component?


#4

Add class=“…” to the element in your template?

Html basics???


#5

Let me rephrase. In the example of the modal, i need to access the base of
the component so i can slide it away.


#6

well, then you need to fiddle in the ionicframework code, as the modal is instantiated with the controller, which wraps your modal page template in a container.

That is why I believe the modal is not the proper way. You are better of creating a custom component that has percentage widht/height, z-index putting it on top of the screen and which you can slide and do anything with using css.


#7

I haven’t managed to create a dynamic custom component that iss accessible on all pages that I’m satisfied with yet. I will continue trying.

Meantime, I have manage to achieve what I wanted with the Ionic Modal Component using events if anyone is interested.

call-modal.ts

// call modal display
import {Component, Input, Renderer2, ElementRef} from '@angular/core';
import {NavParams, Events, ViewController, NavController, Platform} from 'ionic-angular';

import {AudioService} from '../../shared/services/audio.service';
import {CallService} from '../../shared/services/call.service';
import {ModalService} from '../../shared/services/modal.service';

@Component({
    selector: 'modal-call',
    templateUrl: 'call-modal.html',
    providers: []
})
export class CallModal {
    room;
    user;
    ref:ElementRef;
    
    constructor(
            public navCtrl: NavController,
            public audio: AudioService, 
            public navParams: NavParams, 
            public events: Events, 
            public callService: CallService,
            private modalService: ModalService,
            private platform: Platform,
            private rd: Renderer2,
            private viewCtrl: ViewController) {
       
        this.room = this.navParams.get("room"); 
        this.user = this.navParams.get("user"); 
        this.ref = this.viewCtrl.pageRef();

        // EVENTS
        this.events.subscribe('showModal', (room_id) => {
            console.log('REOPEN CLOSED CALL MODAL', room_id);
            this.showModal();
        }); 
        
        console.log(this.callService);
    }
 
    HangUp() {     
        this.callService.HangUp();
    }
    
    // SLIDE MODAL OFF VIEW
    hideModal(){
        console.log(this.ref);
        this.rd.addClass(this.ref.nativeElement, 'slideModalAway');  
    }
    
    // SLIDE BACK TO VIEW
    showModal(){
        console.log(this.ref);
        this.rd.removeClass(this.ref.nativeElement, 'slideModalAway');  
    }
    
}