Iam using Ngx Translation to translate my app from EN to HI (hindi) everything works gr8 but when i close the app and restart it the app is translated back to english. Is their any way i can keep my changed language setting or any way to keep it stored as per the setting chose but the current user logged in?
Settings.html
<ion-item>
<ion-label>Change Language</ion-label>
<ion-select [(ngModel)]="language" (ionChange)="changeLanguage()" name="language" placeholder="Select Language">
<ion-option value="en" selected="true">English</ion-option>
<ion-option value="hi">Hindi</ion-option>
</ion-select>
</ion-item>
settings.ts
changeLanguage()
{
this.translateService.use(this.language);
}
i want to keep the changed language even if the app is restarted.
https://forum.ionicframework.com/t/how-to-save-the-translated-language-setting-in-the-app/172319/2?u=aditbharadwaj
the Answer to this question is using local storage to store the change value
changeLanguage()
{
this.translateService.use(this.language);
localStorage.setItem("myConfig", this.language);
}
And this to load (app.component.ts, first method or constructor):
this.platform.ready().then(() => {
this.translateService.use(localStorage["myConfig"]);
});
Related
I need a routine on Ionic that calls the cellphone's Keyboard to an ion-input when entering the page.
An example of a page would be:
<ion-content padding>
<form>
<ion-row>
<ion-col>
<ion-input #user name="user" type="text" placeholder="Usuário"></ion-input>
</ion-col>
</ion-row>
</form>
</ion-content>
What I want is to use the Navigating Lifecycle from Ionic (I believe that in this case using the ionViewDidEnter) to bring the focus and the Keyboard in the field automatically, I have already tried some codes but unfortunately sometimes it works and sometimes not, thank you right away.
You can set focus in your textarea in the method ionViewDidEnter and show the keyboard by using keyboard plugin of ionic.
#ViewChild('user') input ;
ionicViewDidEnter(){
setTimeout(() => {
this.input.setFocus();
},150);
this.keyboard.show();
}
I have referred the following links. Please go through it for more information:
https://ionicframework.com/docs/native/keyboard/
https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic/62789/4
Set focus on an input with Ionic 2
I tried to put it like this, like on the example
<ion-col col-md-6>
<ion-list>
<ion-item>
<ion-label floating>Type</ion-label>
<ion-select interface="popover" [(ngModel)]="userType">
<ion-option value="1">Type 1</ion-option>
<ion-option value="2">Type 2</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
but the output is not similar on the example on the ionic documentation.
here is the output
I want something like this
What you are seeing is actually a platform issue: Ionic styles elements according to the platform you are running on. See the docs on this here.
You can also easily reproduce your issue viewing the ion-select docs and changing between iOS and Android.
iOS output:
Android output:
So assuming your developing for the iOS platform you don't have to change anything in your app to get the look you want. Once you deploy your app on an iOS device everything will look as you expect.
While testing your app in browser (I'm assuming Chrome, other browser might have the same feature) you might want to use the dev tools (F12) and toggle the device mode. There you can choose to see the viewport of a iPhone or iPad and after refreshing the page (F5) you should see the correct controls.
I'm working with Ionic 3 on iOS 11. Ever since upgrading to iOS 11, my buttons don't work inside Modals. Specifically speaking, the (click) events don't trigger:
HTML:
<button ion-button (click)="logoutUser()">LOGOUT3</button>
JS:
logoutUser() {
console.log('Logout the user');
}
Does anyone have any idea what might be wrong here?
Make sure you add a z-index to the outer most box in which your button resides.
I am new to Ionic. I want to design a carsharing application. I want to make a "Choose a destination" dropdown menu, with frequent options (like "Here", "Home", or "Anywhere") and a special "Choose a destination" option.
This option would ideally look like another dropdown menu (with the little triangle) and would open a modal with an input that would allow to pick an address (I'm not there yet, I would have to interface with google map or OSM... anyway).
I tried the following code
<ion-card>
<ion-card-header>
Where are you going?
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label>Destination</ion-label>
<ion-select [(ngModel)]="destination">
<ion-option>Here</ion-option>
<ion-option>Home</ion-option>
<ion-option>Work</ion-option>
<ion-option>
<ion-item>
<ion-label fixed>Choose a destination</ion-label>
<ion-select [(ngModel)]="destination_chosen">
</ion-select>
</ion-item>
</ion-option>
<ion-option>Anywhere</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-card>
But it looks like it's not taken into account. What do I do wrong? Is it even possible? If not, would anyone have an idea of a good UX pattern to use in that case?
A simple solution would be to change the view of the modal to show the actual dropdown menu you want whan that option is selected as if it was a second step. A second different modal would not be ideal since putting a modal inside another modal is not a good UX practice. As it is part of a various-steps process, it won't feel odd.
So, instead of being part of the same view, you would have to createe a second one, should be simple enough with JS or even easier with Angular. A simple ng-show condition should do it.
the last time I used Ionic was like a year ago. Now I create a new proyect but I realize that all teh css components of ionic had changed but if a try to use something new I cant because I think i'm using an old version.
For instance - this code, I took it from the official docs:
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>
and they show up like plane buttons without style.
But if I write them as I used to, just works.
<button class="button button-positive">
Boton prueba 2
</button>
The thing is as Ionic changed their docs I don't have any reference now to look out so I don't have another alternative to update. Going nuts to accomplish this.
Thanks