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
});
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();
}
}
I've been using events in my ionic application, where i subscribe in one page, and publish the event in the other page. Now I see a warning that Events are going to be changed with Observables and Redux state and effect.
I was using Events mainly to call for component function changes outside it, so I had a components for example:
Component1.ts
this.events.subscribe('event:addValue1', (data: any) => {
this.valueName = 'VALUE1';
});
this.events.subscribe('event:addValue2', (data: any) => {
this.valueName = 'VALUE2';
});
and than outside this component I was calling the publish methods from any page, like:
Page1.ts
this.events.publish('event:addValue1');
Page2.ts
this.events.publish('event:addValue2');
By this i was able to change the data (this.valueName) outside the Component1.ts from any other page, simply by publishing the desired event.
I know that this might not sound or be right approach, but It was the only way I was doing changes to my Component1.ts outside it from any page.
I have now changed this and just put separate functions and than i access them via ViewChild component name like
#ViewChild('component') component: any;
....
this.component.functionAddValue1().
and additionally I send additional params via Angular NavigationExtras if i need to calculate and call some function from the Component1.ts, lets say if I navigate to some route.
Before this I was just calling the events.publish and I was able to make the changes to the Component1.ts on the fly.
Create event service.
In the EventService.ts:
export class EventService {
private dataObserved = new BehaviorSubject<any>('');
currentEvent = this.dataObserved.asObservable();
constructo(){}
publish(param):void {
this.dataObserved.next(param);
}
}
For publishing the event from example page1:
constructor(public eventService:EventService){}
updatePost(value){
this.eventService.publish({name:'post:updated',params:value});
}
In page 2:
constructor(public eventService:EventService){
eventService.currentEvent.subscribe(value=>{
if(value.name=='post:updated'){
//get value.name
}else if(value.name=='another:event'){
//get value or update view or trigger function or method...
}
// here you can get the value or do whatever you want
});
}
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)
{
}
I have already designed the Ionic 3 modals. Now I would like to display some message ( Hello Modal ). How do I display the message inside the modal?
Below is my openModal code.
openModal() {
const myModal = this.modal.create('ModalPage');
myModal.present();
}
I would like to display the message using translate. In my case, the message will be set in en.json file, and from there I need to call the message in the HTML file. This is where I am stuck.
In ionic 1,I have something like ,
$translate(['USER_DATA']).then(function(translations) {
vm.userData=translations.USER_DATA;
}
And I will be calling vm.userData in my HTML which will display the message in modal. how do I achieve the same translate code in ionic 3
Its that simple.
import {TranslateService} from '#ngx-translate/core';
...
constructor(private translate : TranslateService)
...
this.translate.setDefaultLang('en');
This is just an overview. Please go-through this link to get a better idea.
They have clearly explained where to place en.json file and how to use it.
Happy Coding.
this.translate.get('here your message u want to translate').subscribe(res => {
const myModal = this.modal.create('ModalPage',res);
myModal.present();
})
In modalpage get the translated message by 'params.data()' and display as u want
After upgrading to durandal 2.0, I found I needed to convert my master list page to use the showDialog function instead of showModal.
Previously my master model looked like this:
define(['durandal/amd/require', 'durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router', 'durandal/lib/tableModel', 'viewmodels/product'], function (require, app, viewLocator, system, router, table, product) {
var tm = {
tableModel: new tableModel(),
createProduct: function (data) {
app.showModal(product, data);
}
}
//...
return tm;
}
Then in my product detail view page I could close the modal easily like so
data-bind="click: $root.modal.close">Close
Now in Durandal 2.0 it is much harder to get right.
The code in the masterpage is now
define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'plugins/router', 'lib/xhrs', 'lib/tableModel'], function (app, viewLocator, system, router, xhrs, table, product) {
var tm = {
tableModel: new tableModel(),
createProduct: function (data) {
app.showDialog(product, data);
}
}
//...
return tm; }
But the way to access the close function is annoying:
Firstly I have to require the 'plugins/dialog' into the product detail viewmodel; which I would prefer not to do as I don't think the detail viewmodel needs to know that it is a dialog, only the master list viewmodel needs to know that.
then in the compositionComplete event of the product detail view model I assign:
prodedit.close = function () {
dialog.close(prodedit);
}
(prodedit is the returned as the product detail vm)
In this way the product detail dialog can be closed using this:
data-bind="click: $root.close"
OK NOW HERE IS MY ISSUE:
This will work to popup the dialog once or twice, but then fails from then onward without an error. The only thing I can see is that dialogActivator.activateItem hits its fail line: dfd.resolve(false);
Interestingly if I do pause long enough on breakpoints the issue does not occur. But once it occurs once, it never works again to open the dialog.
Is there a better way to do this?
Thankyou.