I've got a component that shows a list of items fetched from a service, well from a remote API.
when you open the "add new item" modal and add a new item, and then OK button and closes this modal, no change in the list of items - the newly created item not seen on the list.
also checked - ionViewWillEnter() not firing after closing the modal and inside ionViewWillEnter() is the fetching from db:
this.feedingService.fetchFeedingListByBabyIdFromAPI(this.babiesService.getChosenBabyID())
.subscribe((response) => {
this.feedings = response;
});
You need to use ModalController API onDidDismiss.
await modal.onDidDismiss();
//call feedingServiceSubscribe to reload list
Or you can even return data from the modal using onDidDismiss and set in your list.
const item = await modal.onDidDismiss();
this.feedings.push(item);
Showing a modal does not really change the navigation stack. So dismissing the modal does not fire lifecycle events of the parent.
Related
I'd like to open a modal in Ionic 5 just opening a page. Without any action, just load the page and hop! you get your modal.
I've been reading the documentation at https://ionicframework.com/docs/api/modal#events but is too cryptic for me. Need some more elaboration...
I´ve fount severals examples out there of opening the modal with a click event, but that's not what I need.
Thanks in advance!
Look into Ionic's lifecycle hooks which let you execute code at different moments during a component's existence. You'll probably want to call a modal creating method inside of the ionViewDiDEnter hook within the component where you want the modal to appear.
Something like this:
export class YourPage {
constructor(public modalController: ModalController) { }
ionViewDidEnter() {
this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: YourModalComponent
});
return await modal.present();
}
}
Currently I am having an ion-button with click event which calls a method.
<ion-button expand="full" color="primary" (click)="sendMsg()">Tap</ion-button>
sendMsg method contains the statements to push the objects to an array and opens modal on some condition.
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
this.openModal();
}
async openModal() {
const myModal = await this.modalController.create({
component: ModalPage,
componentProps: {
firstAction: this.firstAction,
secondAction: this.secondAction,
thirdAction: this.thirdAction
},
cssClass: 'modal-css',
backdropDismiss: false
});
It's a chat page where we get the messages on click of TAP button and while tapping in between we show an ion modal . The issue here is when we tap super fast and modal comes up in one of the click event and since we are clicking fast I could see the messages displaying which are suppose to display after the modal comes up..
To avoid this , I thought of adding debounceTime which can have some time delay and considers the latest click event and this was working in normal angular world.
I have followed https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular but it didn't work under ionic..
Any thoughts are really appreciated..
use a subject as event emitting source and control the click rate from there
const openModalAction=new Subject()
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
openModalAction.next()
}
const openModal=defer(()=>from(this.modalController.create({
component: ModalPage,
componentProps: {
firstAction: this.firstAction,
secondAction: this.secondAction,
thirdAction: this.thirdAction
},
cssClass: 'modal-css',
backdropDismiss: false
})))
const openModalAction.pipe(dounceTime(1000),switchMap(_=>openModal)
What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
I want to show password by clicking help indicator in control sap.m.input.
As per code valueHelpRequest method must fired but not fired when clicking help indicator.
Its working fine for me. Share some code.
jsbin sample
js view code
createContent: function(oController) {
// button text is bound to Model, "press" action is bound to Controller's event handler
return new sap.m.Input({text:'{/actionName}',press:oController.doSomething,showSuggestion:true,showValueHelp:true,valueHelpRequest:oController.onVHR});
}
I got solution :
var oInput = this.getView().byId("idName"); oInput.attachValueHelpRequest(function(){
console.log("You click on value helper.")
});
I would like to create a multiple step modal dialog - like a wizard. A series of screens that follow on from one another.
I'm using the code from NativeScript's site to display a modal (https://docs.nativescript.org/core-concepts/navigation#modal-pages)
var modalPageModule = "./modal-views-demo/login-page";
var context = "some custom context";
var fullscreen = true;
mainPage.showModal(modalPageModule, context, function closeCallback(username, password) {
// Log the user in...
}, fullscreen);
The code works, but I'm unsure how to change the modalPageModule once the modal is displayed.
Possible duplicate
Nativescript: How to use navigation in modals
https://github.com/NativeScript/NativeScript/issues/3753