Add Font awesome to toast
I can't find a way to add font awesome to toast message on ionic 4 because ionic 4 is shadow Dom for all web controller
you can follow the next code to add custom font to toasts.
import { Component } from "#angular/core";
import { ToastController } from "#ionic/angular";
#Component({
selector: "app-home",
templateUrl: "home.page.html",
styleUrls: ["home.page.scss"]
})
export class HomePage {
constructor(private toastController: ToastController) {}
async showToast() {
let toast = await this.toastController.create({
message: "Your settings have been saved.",
duration: 2000
});
toast.present();
}
async showCustomToast() {
let toast = await this.toastController.create({
message: "Your settings have been saved.",
duration: 2000,
cssClass: "CustomToast"
});
toast.present();
}
}
On documentation of Toast component there are a property to define your custom css styles.
This class need to be on src/global.css
.CustomToast {
font-family: Verdana, Geneva, Tahoma, sans-serif, Helvetica, sans-serif;
}
Generally when you need to custom a component (alerts, loaders, etc.), you need follow this process.
I hope I've helped :)
put the html for your fontawesome in the message parameter.
async showCustomToast() {
let toast = await this.toastController.create({
message: "<i class="fas-fa-edit"></i> Your settings have been saved.",
duration: 2000,
cssClass: "CustomToast"
});
toast.present();
}
Related
How does the PopoverController work in Ionic 4?
The current documentation is incorrect and there's no breaking changes for it?
const popover = this.popoverCtrl.create({
component: 'PopupMenuComponent',
ev: event
});
popover.present();
I've created a Component and when I try to present it, I receive the below error...
[ts] Property 'present' does not exist on type 'Promise<HTMLIonPopoverElement>'. Did you forget to use 'await'?
Thanks.
In your example, you didnt await it. As of Alpha-7 the create method returns a promise. You can find the latest documentation here. Take alook at this example:
import { Component } from '#angular/core';
import { PopoverController } from '#ionic/angular';
#Component({
template: `
<ion-list no-margin>
<ion-item (click)="onDismiss()">Dismiss</ion-item>
</ion-list>
`
})
export class PopupMenuComponentPopover {
constructor(private popoverCtrl: PopoverController) {
}
async onDismiss() {
try {
await this.popoverCtrl.dismiss();
} catch (e) {
//click more than one time popover throws error, so ignore...
}
}
}
And here is how to open it:
async openPopover(args) {
const popover = await this.popoverController.create({
component: PopupMenuComponentPopover,
ev: args,
translucent: false
});
return await popover.present();
}
Edit: here is you can call it:
#NgModule({
...
declarations: [DashboardWebsiteMorePopover],
entryComponents: [DashboardWebsiteMorePopover],
...
})
export class PopupMenuComponentModule {}
I use Ionic 3 version and I try to add a page into my app, to display a map with markers.
I already use for my app a Google Map Id for Autocomplete (Google places...).
I went to Google APIs and I added Map Embed, Javascript etc... to my API Key.
But The page appears with "Google" in the bottom and the display button", but the map is empty.
See attached file...
Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="AIzaSyB6mEnxH4vC+++++++++9wnXXNNmK2co" --variable API_KEY_FOR_IOS="AIzaSyB6mEnxH4v++++++++++++++wnXXNNmK2co"
$ npm install --save #ionic-native/google-maps
Home.ts:
import { NavController } from 'ionic-angular';
import { Component, ViewChild, ElementRef } from '#angular/core';
import { GoogleMaps, CameraPosition, GoogleMapsEvent, GoogleMap, MarkerOptions, Marker } from "#ionic-native/google-maps";
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) {
}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
// <ion-content>
// <div #map id="map" style="height:100%;"></div>
// </ion-content>
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
}
);
// create CameraPosition
let position: CameraPosition = {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
};
// move the map's camera to position
}
}
Home.HTML
Home.html :
<ion-header>
<ion-navbar>
<ion-title>
Map
</ion-title>
<ion-buttons end>
<button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div #map id="map" style="height:100%;"></div>
</ion-content>
Home.scss
page-home {
}
Do not use the ngAfterViewInit.
You must wait platform.ready()
// Wait the native plugin is ready.
platform.ready().then(() => {
this.loadMap();
});
Full code is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md
Repo: https://github.com/mapsplugin/ionic-google-maps
The current official document page is wrong. I sent a pull request, but it's waiting now.
https://github.com/ionic-team/ionic-native/pull/1834
Please try below code and make sure you are using correct API key, write following code in your .ts file:
ionViewDidLoad() {
this.loadMap();
}
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = this.googleMaps.create('map_canvas', mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
alert('clicked');
});
});
});
}
In your .html file define map like below
<ion-content>
<div id="map_canvas" style="height: 100%;"></div>
</ion-content>
In my Ionic 2 app, I have i have component that GET to fetch data.
i want to maker loader and dismiss it after data is ready.
i tried to look on other posts around the stack overflow but my issue is different.
i did something but the loader is forever and its not helps me.
It looks like following:
import { Component,ViewChild } from '#angular/core';
import { NavController,LoadingController,AlertController,ViewController} from 'ionic-angular';
import { Facebook } from 'ionic-native';
//import pages
import {LoginPage} from "../../pages/login/login";
import {User} from '../../models/user'
import { Storage} from '#ionic/storage';
//import provider
import { ProfileData } from '../../providers/profile-data';
import { NotesData } from '../../providers/notes-data';
import firebase from 'firebase'
import {AddNote} from "../add-note/add-note";
/*
Generated class for the NotesList page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-notes-list',
templateUrl: 'notes-list.html'
})
export class NotesList {
//facebook user
userProfile: any = null;
uid: any = null;
fireUid:any=null;
name:string=null;
photo: any =null;
user:User=null;
photos:any=null;
currentUser:any=null;
photonew:any=null;
//notes list
notes:any=null;
data:any;
pages: Array<{title: string, component: any}>;
constructor(public navCtrl: NavController,public profileData:ProfileData,private viewCtrl: ViewController,public notesData:NotesData,private loadingCtrl: LoadingController,private alertCtrl: AlertController,public storage:Storage) {
this.data={};
this.data.title="";
this.data.desc="";
}
ionViewDidLoad() {
//if i do that the loader is forever
/*
let loader = this.loadingCtrl.create({
dismissOnPageChange: true,
});
loader.present();
*/
// here i want the loader to be until the data is ready.
this.getNotesList(); //this functions not returns data so i can't do this.getNotesList().then(()=>
}
getNotesList(){
console.log("get event");
var that=this;
this.notesData.getNotesLIst().on('value', snapshot => {
let notesList= [];
snapshot.forEach( snap => {
console.log("id note"+snap.val().id);
notesList.push({
id: snap.val().id,
title: snap.val().title,
desc: snap.val().desc,
color:snap.val().color,
photo:snap.val().photo,
});
});
that.notes = notesList;
});
}
addNote(){
this.navCtrl.push(AddNote);
}
logOutFacebook(){
Facebook.logout().then((response)=>
{
this.navCtrl.push(LoginPage);
alert(JSON.stringify(response));
},(error)=>{
alert(error);
})
}
}
At first, you should show how do you implement your loading page. Is it a splash screen with cordorva? Or just as div displaying some image?
If it is a splash screen, you can add this code in your component after you get data, (it is from starter template, you can see the detail by creating a new project with ionic start):
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
And, if you use a div in your index page, it is similar, you can just get that element and remove it, with pure js.
okay it succeed to do that
this is my answer
ionViewDidLoad() {
let loader = this.loadingCtrl.create({});
loader.present();
this.getNotesList().then((x) => {
if (x) loader.dismiss();
});
}
getNotesList(){
return new Promise(resolve => {
var that=this;
this.notesData.getNotesLIst().on('value', snapshot => {
let notesList= [];
snapshot.forEach( snap => {
console.log("id note"+snap.val().id);
notesList.push({
id: snap.val().id,
title: snap.val().title,
desc: snap.val().desc,
color:snap.val().color,
photo:snap.val().photo,
});
});
that.notes = notesList;
resolve(true);
});
})
}
Using ion-slides component (4 slides) on app welcome page/slides. I need ability for user to skip to last slide. Docs say ion-slides implementation of Swiper API. I need to access methods like: mySwiper.slideTo(index, speed, runCallbacks);
Tips on how to implement?
You can pass a function within the options property.
Original answer.
#Component({
selector: 'my-component',
template: '<ion-slides [options]="options">
<ion-slide>Slide1</ion-slide>
<ion-slide>Slide2</ion-slide>
</ion-slides>',
directive: [IONIC_DIRECTIVES]
})
export class MyComponent {
public slider: any;
constructor() {
this.options = {
onlyExternal: false,
onInit: (slides: any) =>
this.slider = slides
}
}
click() {
this.slider.sliderNext(true, 250);
}
}
For further options have a look at the swiper api.
If you are looking for a simple solution without custom directives, you can try this
constructor(
private _app: IonicApp
){}
ngAfterViewInit() {
this._slider = this._app.getComponent('my-slider');
}
goToSlide(slideIndex){
this.slider.slider.slideTo(slideIndex);
}
You can make a service with your Swiper
#Injectable()
export class HomeSwiper {
swiper = null;
initSwiper(selector) {
this.swiper = new Swiper(selector, {
pagination: '.home-swiper-pagination',
speed: 400,
spaceBetween: 100,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
}
goTo(index) {
this.swiper.slideTo(index);
}
}
And use it into your #Page
#Page({
templateUrl: 'build/pages/home/home.html',
providers: [HomeSwiper]
})
export class Home {
constructor(private swiperService: HomeSwiper) {
this.swiperService.initSwiper('.home-modal-swiper-container');
}
skipSlides() {
this.swiperService.goTo(indexOfTheLastSlide);
}
}
I would like to raise an alert on Ionic2 when the device does not have a Camera.
When i launch : ionic serve
then i try to display the message as follow :
let alert = Alert.create({
title: 'Camera not found',
subTitle: 'It seems your camera is not working on your device',
buttons: ['Ok']
});
this.nav.present(alert);
i have a javascript error
Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: rootNav.getActive is not a function
ORIGINAL STACKTRACE:
TypeError: rootNav.getActive is not a function
at Tab.NavController.present (http://localhost:8100/build/js/app.bundle.js:46996:36)
at SmartScan.takePicture (http://localhost:8100/build/js/app.bundle.js:60864:23)
at AbstractChangeDetector.ChangeDetector_SmartScan_0.handleEventInternal (eval at <anonymous> (http://localhost:8100/build/js/app.bundle.js:14578:17), <anonymous>:185:36)
at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:13892:25)
at AppView.dispatchEvent (http://localhost:8100/build/js/app.bundle.js:18772:46)
at AppView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:18766:22)
at DefaultRenderView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:33592:39)
at eventDispatcher (http://localhost:8100/build/js/app.bundle.js:33258:22)
at http://localhost:8100/build/js/app.bundle.js:33329:40
In alert.js:
import {Page, Alert, NavController} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/alert/alert.html'
})
export class AlertPage {
static get parameters() {
return [[NavController]];
}
constructor(nav) {
this.nav = nav;
}
showAlert() {
let alert = Alert.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
}
}
In alert.html:
<button block dark (click)="showAlert()">test</button>
Try this:
with this structure of folder and files
In:
home.html
<ion-header>
<ion-navbar>
<ion-title>Ionic 2 Notifications</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button block dark (click)="showAlert()">Alert</button>
</ion-content>
In:
home.ts
import {Component} from "#angular/core";
import {NavController, AlertController} from 'ionic-angular';
#Component({
templateUrl: 'home.html'
})
export class HomePage {
constructor(public alertCtrl: AlertController) {
}
showAlert() {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['OK']
});
alert.present();
}
}
I got this information from the documentation site:
https://ionicframework.com/docs/v2/components/#action-sheets
I am also working on ionic2 and was in the need to implement "PopUp" window in my existing application.
I try many for that by does not get my task accomplished, finally i did something like this-
pop-up.html
<button block dark (click)="showAlert()">Help Window</button>
pop-up.ts
import { Component } from '#angular/core';
import { Alert, NavController, NavParams} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/pop-up/pop-up.html',
})
export class PopUpPage {
static get parameters() {
return [[NavController]];
}
constructor(private nav: NavController) {
this.nav = nav;
}
showAlert() {
let alert = Alert.create({
title: 'Help Window!',
subTitle: 'Mindfulness is here for you and your soul. We are intended to stablish your connection to All Mighty.',
buttons: ['Cancle']
});
this.nav.present(alert);
}
}
And that work fine for me.
Hope it will work for you too.
It seems that is not yet ready ...
investigating the code
this.nav.present(alert);
it is passing here and returns :
if (rootNav['_tabs']) {
// TODO: must have until this goes in
// https://github.com/angular/angular/issues/5481
void 0;
return;
}