I'm working under Ionic 4.
I'm developping an app that allows a firm to visualize and keep up to date well being indicator of their services. In order to do so, managers are giving a forecast of how their service is doing. They have to do that once a month.
I want to set the current month by default in the picker, for better UI experience and economy of clicks, but i'm not able to find a solution.
For now, the picker only displays the current month, but the user still have to click and select it.
Any help is much appreciated
Try with below solution :
home.page.html
<ion-content>
<ion-item>
<ion-label>MMMM</ion-label>
<ion-datetime displayFormat="MMMM" [value]="myDate"></ion-datetime>
</ion-item>
</ion-content>
home.page.ts
export class HomePage {
myDate: String = new Date().toISOString();
constructor(private modalCtrl: ModalController, private alertCtrl: AlertController) {}
}
Result :
Related
I want to show the ionic date picker when I click string. But instead of that date picker is showing in the page without clicking anything
here is the stackBlitz
here is my code :
<ion-datetime placeholder="pick the date"></ion-datetime>
in TS file I just use above code. I wanted to see the date picker when i click the "pick the date " string
You could wrap an ion-input or ion-button in ion-datetime.
something like that:
<!-- Datetime in overlay -->
<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal trigger="open-modal">
<ng-template>
<ion-content>
<ion-datetime></ion-datetime>
</ion-content>
</ng-template>
</ion-modal>
more in the documentation:
https://ionicframework.com/docs/api/datetime
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"]);
});
I am working in my Ionic 4 app and I have added a back button in my toolbar and I want to show the back button only on some particular pages.
This is app.component.html:
<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>
I want to show the back button only on some particular pages.
I have added the CSS for displaying the back button on some particular pages but it is not working.
I have also added the [hidden]="menuIsHidden" and make it false by default and true on some particular pages but this is also not working.
Any help is much appreciated.
Create a page by executing the following command:
ionic generate page SharedToolbar
Then inside that page use the #Input() directive, example:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<div *ngIf="showBackButton== 'true'">
<ion-back-button></ion-back-button>
</div>
</ion-buttons>
typescript:
#Component({
selector : 'shared-toolbar',
templateUrl : './shared-toolbar.page.html',
styleUrls : ['./shared-toolbar.page.scss'],
})
export class SharedToolbar implements OnInit
{
#Input() showBackButton: string = 'false';
constructor() { }
ngOnInit(){}
}
Then in any page you create, you can add the following in the html:
<shared-toolbar showBackButton="true"></shared-toolbar>
and send the following attribute as above to show the back button.
Note:
In the module of each page you might have to add the following:
schemas : [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
to be able to use a template URL of a specific page.
more info here:
https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding
You can create a css class such as:
.back-hide {
display: none;
}
And then use a ngClass on the back button that applies the style if needed.
<ion-back-button class="btnmy11" defaultHref="/" [ngClass]="{'back-hide': menuIsHidden==true}"></ion-back-button>
where you want to show back button you can use ion-nav instead use of ion-toolbar.
By default ion-nav animates transition between pages based in the mode (ios or material design).
I'm struggling to develop a card that, when clicked, open any Maps app from the device, mainly using this tutorial: https://www.youtube.com/watch?v=BHBLjRuzb7s
Although I coded the same code it's not working since nothing happens when I click the button.
This is my html file:
<div>
<ion-card>
<div>
<img src="{{UnitLocal}}">
</div>
<ion-item>
<button ion-button block (click)="navToMaps()">Universidade Tiradentes</button>
</ion-item>
</ion-card>
</div>
And this is my ts file:
import { Component } from '#angular/core';
import { LaunchNavigator, LaunchNavigatorOptions } from '#ionic-native/launch-navigator/ngx';
#Component({
selector: 'unitmap',
templateUrl: 'unitmap.html'
})
export class UnitmapComponent {
private UnitLocal: string;
private UnitEndereco: string;
constructor(private launchNavigator: LaunchNavigator) {
this.UnitLocal = this.getMap();
this.UnitEndereco = "Universidade Tiradentes, Aracaju";
}
navToMaps() {
console.log('Navegando para mapas');
this.launchNavigator.navigate(this.UnitEndereco);
}
}
When I run the app through the browser I'm able to get the console log, so I'm assuming the button references navToMaps correctly.
You have mentioned you are using Ionic 3 and Angular 5( Check your ionic.config.json file Your project type must be ionic-angular ), and you seem to be using the plugin whose #ionic-native/launch-navigator whose version>=5.0.0 which is supported for Ionic 4 and Angular 6 and the project type angular.
You need to use the lower version of the native plugin for the application to work correctly.
Uninstall the plugin first
npm uninstall #ionic-native/launch-navigator
and install the proper version for your project type.
npm i -s #ionic-native/launch-navigator#4.20.0
And since you are not using Angular 6, you don't need to append ngx and the end of the import.
Like below
import { LaunchNavigator, LaunchNavigatorOptions } from '#ionic-native/launch-navigator';
And also, don't forget to add the plugin to your app module's provider array.
Reference : https://stackoverflow.com/a/54474247/6617276
I want to take the values from database such as name,email and photo for a particular user and when he clicks the view button the same details should be seen in popup can i achieve in ionic2..
Any help will be appreciated..
You cannot do it using Alert component.If you need to do that then you have to use page component.On page component where you can show your images and all other db fetched stuff.
.html
<ion-content padding>
<img src="{{imageUrl}}" alt="image">
</ion-content>
.ts
this.imageUrl = imageUrl;