How to open a modal in Ionic 5 automatically, just after loading of the page? - modal-dialog

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();
}
}

Related

ionic 4 deal with modal when users click phone back button

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();
}
}

Ionic 3: How make ionViewWillEnter only when back button pressed?

I have read Navigating Lifecycle Events
My use case here is. I had to refresh the content on page load as well as when back button pressed from another page.
ionViewDidLoad(){
this.getProjects();
}
ionViewWillEnter(){
this.getProjects();
}
this works fine but of course ionViewWillEnter runs on first page load as well. so two api requests triggered (ionViewDidLoad + ionViewWillEnter). Is there any way to restrict them like setting flag or something?
You can use events for this purpose. Whenever user clicks back button, publish the event like this:
onBackButtonPressed(){
this.events.publish('backPressed');
}
subscribe to this event from the page where you want to refresh the data:
constructor(public events: Events) {
events.subscribe('backPressed', () => {
this.getProjects();
});
}
Refer this: https://ionicframework.com/docs/v3/api/util/Events/
The problem with this issue is you have to publish the event from all the pages to which the navigation is possible from the current page.
use this:
ionViewDidLoad()
{
this.navBar.backButtonClick = this.onClickBackButton.bind(this);
}
onClickBackButton(event)
{
}

How do i listen for dismiss event inside Model Ionic

I have one .ts file for model. I want to execute some code when this model is dismissed(from model file itself).
All examples are about onDidDismiss() method which is written in model caller .ts file.I mean i have some db listeners in my model .ts file.
What i am trying to do is unsubscribe them when user dismisses the model window by clicking outside of model window.
You can use below method in your Model page :
dismiss() {
this.viewCtrl.dismiss();
}
and in this method you can write your code.
Ref Link : https://github.com/ionic-team/ionic/tree/v3/demos/src/modal
Ionic Ref : https://ionicframework.com/docs/api/components/modal/ModalController/
Hope this will helps!
You can publish event inside of onDidDismiss() and subscribe event from where you want.
Your modal page ts file:
import { ....., Events } from 'ionic-angular';
constructor(....,public events:Events){.....}
modal.onDidDismiss(()=>{
this.events.publish("modal:dismissed","data what you want to publish",Date.now());
})
subscription from anywhere:
import and inject again Events like in your modal ts file then;
this.events.subscribe('modal:dismissed', (value, publishTime) => {
//enter your code here
});

No ionic back button visable following view change via $state.go ionic

I have 2 views as follows
.state('tab.matches', {
url: '/matches',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches.html',
controller: 'MatchesCtrl'
}
}
})
.state('tab.matches-detail', {
url: '/matches/:matchId/:userId/:userName',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches-detail.html',
controller: 'MatchesDetailCtrl'
}
}
})
I have a button on a different view which on click calls a function in the controller as follows:
$scope.messageUser = function (postInfo) {
$state.go('tab.matches-detail', { matchId: var1, userId: var2, userName: var3 });
}
This redirects to the tab.matches-detail view as expected but a back button is not present. I would like the back button to redirect back to the parent view being tab.matches, or the view I originally redirected from. If I navigate from tab.matches to tab.matches-detail (when I have not redirected by $state.go) the back button is present. I however am going direct to tab.matches-detail when $state.go is called. As such I can no longer access tab.matches as if I click on another tab and then return to tab.matches it displays tab.matches-detail with no way to access the parent state of tab.matches. I can't figure out how to get the back button to display. I need this to be controlled from the controller rather than a href in the view as I need to call similar functionality from an Actionsheet where the logic is all controller side.
Apologies for the rather verbose explanation but I want to be clear on the issue.
Thanks in advance for your help.
Anthony
To resolve this issue I set the back button in the view as not visible by setting hide-back-button="true" in the <ion-view> tag, then added a button for the header as follows:
<ion-nav-buttons side="left" class="button-clear customButton">
<div class = "buttonMatchesInner" ng-click="matchesGoBack()">
<i class="ion-chevron-left matchLeftIcon"></i>
</div>
</ion-nav-buttons>
With the click event calling:
$scope.matchesGoBack = function() {
$state.go('tab.matches');
}

Summernote WYSIWYG : set code view as default view

I can't find anything about this on the web. Is there a way to set the default view of Summernote (WYSIWYG jQuery text editor) to be the code/html view. I want to see directly the HTML code when landing on the form page.
Thank you
You can simulate a click on the codeview button (after summernote initialization), it works for me :
$('.summernote').summernote({
oninit: function() {
$("div.note-editor button[data-event='codeview']").click();
}
});
From Summernote documentation:
After v0.7.0, every callbacks should be wrapped by callbacks object.
So, in order to work, the js should be like this:
$('.summernote_editor').summernote({
callbacks: {
onInit: function() {
$("div.note-editor button.btn-codeview").click();
}
}
});
Not very elegant and I don't know if there is a proper way to do it but give this a try if you like:
From what I can tell, and I didn't look very hard, the codeview button does this:
adds a 'codeview' class to div.note-editor
disables all the buttons
adds an 'active' class to the codeview button elemment.
You may discover that it does other things as well but this should put you on a workable path.
$('div.note-editor').addClass('codeview');
$('div.note-editor.codeview button').addClass('disabled');
$("div.note-editor.codeview button[data-event='codeview']").removeClass('disabled').addClass('active');
Well, you can use the init callback.
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
}).summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
});