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).
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?
1 Like
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?
Add class=“…” to the element in your template?
Html basics???
Let me rephrase. In the example of the modal, i need to access the base of
the component so i can slide it away.
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.
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');
}
}
1 Like