I have problem with actionsheet in ionic 2..
This is the code
import {Page, NavController} from 'ionic-angular';
import {ActionSheet} from 'ionic-native';
#Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(public nav: NavController) {}
signIn(){
let sheet = ActionSheet.create({
title : 'Sign In as',
buttons : [
{
text:'Partner',
handler : () =>{
console.log('Cancel clicked');
}
},{
text:'Member',
handler : ()=>{
console.log('Cancel clicked');
}
},{
text:'Cancel',
role:'cancel',
handler : ()=>{
console.log('Cancel clicked');
}
}
]
});
this.nav.present(sheet);
}
}
when i try to ionic serve there are errors
TypeScript error: D:/xampp/htdocs/payogo/android_2/Payogo/app/pages/home/home.ts(41,33): Error TS2339: Property 'create' does not exist on type 'typeof ActionSheet'.
Please help me thanks
isnt is ActionSheet.show()
See documentation: https://github.com/EddyVerbruggen/cordova-plugin-actionsheet
Related
I have found that many solutions are only answered in parts and though it might be useful to combine two solutions into one answer relating to the question asked above: "How can I change the back button text and click action for a specific page in IONIC 2+?"
This question was answered elsewhere but in many different parts meaning they only covered "changing the text" or showing how to perform a "custom click action" for the back button using various solutions. This answer is primarily to combine the two to showcase the most simple solution. This solution also includes the physical back button of devices like Android and Windows based phones. iPhones doesn't have a back button.
Each file will be displayed below in full to help junior developers see the fuller picture.
src/app/app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, Navbar, NavController, AlertController } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { SitesPage } from '../pages/sites/sites';
import { NavigationProvider } from '../providers/navigation/navigation';
#NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
SitesPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
SitesPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
NavigationProvider
]
})
export class AppModule {}
src/app/app.component.ts
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { NavigationProvider } from '../providers/navigation/navigation';
import { HomePage } from '../pages/home/home';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(private platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private navProvider: NavigationProvider) {
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.
platform.registerBackButtonAction(() => {
this.navProvider.backButtonAction();
});
statusBar.styleDefault();
splashScreen.hide();
});
}
}
src/pages/dashboard/dashboard.ts
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController, Navbar } from 'ionic-angular';
import { SitesPage } from '../sites/sites';
import { NavigationProvider } from '../../providers/navigation/navigation';
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
#ViewChild(Navbar) navBar: Navbar;
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public navProvider: NavigationProvider) {}
ionViewDidLoad() {
this.viewCtrl.setBackButtonText('Logout');
this.navBar.backButtonClick = () => {
this.navProvider.backButtonAction();
};
}
sites() {
this.navCtrl.push(SitesPage);
}
}
src/providers/navigation/navigation.ts
import { Injectable } from '#angular/core';
import { Platform, NavController, AlertController } from 'ionic-angular';
import { App } from "ionic-angular/index";
#Injectable()
export class NavigationProvider {
logoutAlert: any = null;
exitAppAlert: any = null;
private navCtrl: NavController;
constructor(private platform: Platform, private app: App, private alertCtrl: AlertController) {
//get the nav controller which is only ready when the platform is ready
platform.ready().then(() => {
this.navCtrl = app.getActiveNavs()[0];
});
}
//* perform the back button action
backButtonAction() {
// can we pop this page?
if(this.navCtrl.canGoBack()) {
// are we on the page that we want to trigger the logout alert?
const view = this.navCtrl.getActive();
if(view.component.name == 'DashboardPage') {
// is the logout alert still visible?
if(this.logoutAlert) {
// dismiss it instead :)
this.logoutAlert.dismiss();
this.logoutAlert = null;
} else {
// show the logout alert
this.logoutAlertAction();
}
} else {
//pop the page to perform default back action
this.navCtrl.pop();
}
} else {
// we are at the root page so the next step is to exit the app
// is the exit app alert still visible?
if(this.exitAppAlert) {
// dismiss it instead :)
this.exitAppAlert.dismiss();
this.exitAppAlert = null;
} else {
this.exitAppAlertAction();
}
}
}
//*/
//* prompt the user before logging out
logoutAlertAction() {
this.logoutAlert = this.alertCtrl.create({
title: 'Logout',
message: 'Are you sure you want to log out?',
buttons: [
{
text: 'No',
role: 'cancel',
handler: () => {
// don't do anything
}
},
{
text: 'Yes',
handler: () => {
// clear sessions or do something to log the user out before popping the page
this.navCtrl.pop();
}
}
]
});
this.logoutAlert.present();
}
//*/
//* prompt the user before exiting the application
exitAppAlertAction() {
this.exitAppAlert = this.alertCtrl.create({
title: 'Exit Application',
message: 'Are you sure you want to exit the app?',
buttons: [
{
text: 'Yes',
handler: () => {
// exit the application
this.platform.exitApp();
}
},
{
text: 'No',
role: 'cancel',
handler: () => {
// don't do anything
this.exitAppAlert = null;
}
}
]
});
this.exitAppAlert.present();
}
//*/
}
I have a modal which is opened as soon as the user selects the menu option for the page. Isue i'm having is that i have no idea on how to get it to call my function call in my ngOnInit
test.component.ts
constructor(public dialog: MdDialog) { }
ngOnInit() {
this.openTestModal();
}
openTestModal() {
this.dialog.open(TestModalComponent, {
disableClose: true,
width: '600px'
});
}
I have imported my model component and tried:
change-password.component.spec.ts
import { TestModalComponent } from '../test-modal/test-modal.component';
spyOn(component, 'openTestModal');
spyOn(component, 'ngOnInit').and.callThrough();
it('should be created', () => {
expect(component).toBeTruthy();
});
Error
No component factory found for TestComponent. Did you add it to
#NgModule.entryComponents?
but its already in there
To solve this add your TestComponent to a module at end of your test with entryComponents.
#NgModule({
declarations: [TestComponent],
entryComponents: [
TestComponent,
],
})
class TestModule {}
and add TestModule to the testBed imports.
I'm trying to integrate ibeacon feature in Ionic 2 app.
I'm using https://ionicframework.com/docs/native/ibeacon/ plugin.
Followed the steps as mentioned in the document.
Created a provider class.
Added the plugin integration.
Invoke the provider class in Home page.
But when running the app on android device, getting error,
"Failed to navigate: No provider for IBeacon!"
Please suggest any fix.
Thanks.
Beacon Provider class:
import { Injectable } from '#angular/core';
import { Platform, Events } from 'ionic-angular';
import { IBeacon } from '#ionic-native/ibeacon';
/*
Generated class for the BeaconProvider provider.
//
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class BeaconProvider {
delegate: any;
region: any;
constructor(public platform: Platform, public events: Events, private ibeacon : IBeacon) {
}
initialise(): any {
let promise = new Promise((resolve, reject) => {
// we need to be running on a device
if (this.platform.is('cordova')) {
// Request permission to use location on iOS
this.ibeacon.requestAlwaysAuthorization();
// create a new delegate and register it with the native layer
this.delegate = this.ibeacon.Delegate();
// Subscribe to some of the delegate’s event handlers
this.delegate.didRangeBeaconsInRegion()
.subscribe(
data => {
this.events.publish('didRangeBeaconsInRegion', data);
},
error => console.error()
);
// setup a beacon region – CHANGE THIS TO YOUR OWN UUID
this.region = this.ibeacon.BeaconRegion('deskBeacon', 'E2C56DB5-DFFB-48D2-B060-D0F5A71096E0');
// start ranging
this.ibeacon.startRangingBeaconsInRegion(this.region)
.then(
() => {
resolve(true);
},
error => {
console.error('Failed to begin monitoring: ', error);
resolve(false);
}
);
} else {
console.error('This application needs to be running on a device');
resolve(false);
}
});
return promise;
}
}
And in Home page,
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../providers/auth-service';
import { LoginPage } from '../login/login';
import { BeaconProvider } from '../../providers/beacon-provider';
import { BeaconModel } from '../../models/beacon-module';
import { Platform, Events } from 'ionic-angular';
import { NgZone } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers : [BeaconProvider]
})
add
import { IBeacon } from '#ionic-native/ibeacon'; to your app.module.ts
and add IBeacon to your providers in app.module.ts.
That fixed the issue for me.
Have you tried adding the service in the constructor of home.ts ?
constructor(private myService: IBeacon ){
}
(This is for Ionic 3 but the process is similar for Ionic 2)
I suggest you put IBeacon definition in app.module.ts under the provider list like this
#NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
AngularFireDatabaseModule,
AngularFireModule.initializeApp(config),
AngularFireAuthModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
Api,
Items,
User,
Camera,
CardIO,
NFC,
Ndef,
IBeacon,
Stripe,
SplashScreen,
StatusBar,
{ provide: Settings, useFactory: provideSettings, deps: [Storage] },
// Keep this to enable Ionic's runtime error handling during development
{ provide: ErrorHandler, useClass: IonicErrorHandler },
FirebaseProvider,
BarcodeScanner,
AuthProvider,
BeaconProvider,
]
})
export class AppModule { }
I'm kinda new to unit testing in Angular 2 and Ionic 2.
I am trying to test the login() method below
export class LoginPage {
constructor(public navCtrl: NavController) {}
login() {
this.navCtrl.setRoot(TabsPage);
}
}
With the following test
import { ComponentFixture, async } from '#angular/core/testing';
import { TestUtils } from '../../test';
import { LoginPage } from './login';
import { TabsPage } from '../tabs/tabs';
let fixture: ComponentFixture<LoginPage> = null;
let instance: any = null;
describe('Login Page', () => {
beforeEach(async(() => TestUtils.beforeEachCompiler([LoginPage]).then(compiled => {
fixture = compiled.fixture;
instance = compiled.instance;
})));
it('changes root nav to TabsPage on login()', () => {
spyOn(instance.navCtrl, 'setRoot');
instance.login();
expect(instance.navCtrl.setRoot).toHaveBeenCalledWith(TabsPage);
});
});
But I get the following error
Error: <spyOn> : setRoot() method does not exist
I followed this tutorial for set up.
I must be missing something. Is instance.navCtrl the right thing to be spying on?
It ended being a typo. I was using useValue instead of useClass in the provide, so the setRoot method had to be accessed through prototype.
I had
{provide: NavController, useValue: NavMock}
Instead of
{provide: NavController, useClass: NavMock}
I am trying to implement a solution where I need to get the current url on exit event of InAppBowser Ionic2.
My Code is
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {InAppBrowser} from 'ionic-native';
#Component({
selector: 'page-list',
templateUrl: 'list.html'
})
export class ListPage {
browser:any;
exit:boolean = false;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
startPayment(){
this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done');
this.browser.on("exit")
.subscribe(
(e) => {
this.checkpaymentStatus(e);
},
err => {
console.log("InAppBrowser loadstart Event Error: " + err);
});
};
checkpaymentStatus(e){
console.log(e);
console.log("in app browser exit")
this.exit = true;
}
};//
The exit event is firing properly but I am unable to get the url in event(e), it just gives Object{type:exit}.
Please tell me , how can I get the url on exit.
Thanks
just use e.url
checkpaymentStatus(e){
console.log(e.url); // you will get url here
// ... ... ...
}