My idea is to create an alert in a provider and use it in which ever page its needed.so I wrote this code in provider
constructor(public alertCtl:AlertController) {
}
presentDismissAlert( navCtrl: NavController) {
let alert = this.alertCtl.create({
title: 'connect your charger',
subTitle: '10% is remaining',
buttons: ['Dismiss']
});
navCtrl.present(alert);
}
and in a page I am calling this method as follows
constructor(public navCtrl: NavController, public navParams: NavParams,public alt : alertProvider ) {
this.altCtrl.presentDismissAlert(this.navCtrl);
}
but this error remains ` Property 'present' does not exist on type 'NavController'.
L22: });
L23: navCtrl.present(alert);
`any help regarding this
You dont need navController to present alert.
Check here.
presentDismissAlert() {
let alert = this.alertCtl.create({
title: 'connect your charger',
subTitle: '10% is remaining',
buttons: ['Dismiss']
});
alert.present()
}
Related
I want to display an alertcontroller dialog from top to bottom while opened it and do reversing while closing it. Is that possible?
I tried the below code but no luck.
let alert = this.alertCtrl.create({
title: 'Warning',
cssClass: 'alertCtrlfade ',
message: "This is not a correct form",
enableBackdropDismiss: false,
buttons: [
{
text: 'Ok',
cssClass: 'alert-btn',
handler: (data: any) => {
}
},]
});
alert.present();
In app.css
.alertCtrlfade {
transform: translate3d(0, 100, 0) !important;
}
Is that any way we can achieve this animation in alertcontroller?
Thanks
I think what you're looking for is a Toast notification.
check this link out and see if it's what you wanted ToastControllerAPI
Edit : Added some code for reference
in the typescript file
import { ToastController } from 'ionic-angular';
#Component({
templateUrl: 'example.html'
})
constructor(private toast: ToastController) {
}
exampleToast() {
let exampleNotification = this.toast.create({
message: 'This is not a correct form',
showCloseButton : true,
closeButtonText : 'Ok',
position: 'top'
}); exampleNotification.present();
}
}
This gives off the effect that you were looking for and can be used to replace AlertController.
I have a situation wherein I have to uncheck a checkbox, onclick of a button.
This is my checkbox code
<ion-checkbox [checked]="!isChecked" [disabled]="!isdisabled" (ionChange)="saveProfile($event)" [(ngModel)]="default"></ion-checkbox>
I have tried using !iChecked, but it doesn't work. Basically, if the checkbox is already checked by the user, I want it to be unchecked (based on certain conditions) when you click a button.
<button class="button-m" (click)="navigateTo()" ion-button color="secondary"><ion-icon name="next"> </ion-icon> Next </button>
TS file
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
#Component({
selector: 'choose-profile',
templateUrl: 'choose-profile.html',
})
export class ChooseProfilePage {
profileValue : string;
isdisabled : boolean;
isChecked :boolean;
constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) {
}
getSelectedProfile(val){
this.profileValue = val;
if(this.profileValue!=undefined){
this.isdisabled = true;
}
else{
this.isdisabled = false;
}
}
saveProfile(val){
if(val.checked==true)
{
this.presentToast( this.profileValue+"set as default profile")
}
else
{
this.presentToast("No default profile")
}
}
presentToast(val){
let toast = this.toastCtrl.create({
message: val,
duration: 3000,
position: 'top'
});
toast.present();
}
navigateTo()
{
console.log("Next Clicked")
this.isChecked == true;
}
}
You have an error in your code. this.isChecked == true; does not set the isChecked variable to true. It merely does a comparison to check if isChecked is true.
You should use = instead of ==.
Alter your code to be as following:
navigateTo()
{
console.log("Next Clicked")
this.isChecked = true;
}
Don't use the checked attribute as a binding. Your input is bound with ngModel so what you need to do is change the value of that field.
I'm surprised after fixing the double equals your code worked because the template is looking for default and sets the checked attribute based on it's value. Create a variable and bind to it, then change it. I rewrote your component a bit
And then in your component:
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
#Component({
selector: 'choose-profile',
templateUrl: 'choose-profile.html',
})
export class ChooseProfilePage {
public shouldSaveProfile = false;
profileValue : string;
isdisabled : boolean;
constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) { }
getSelectedProfile(val){
this.profileValue = val;
this.isdisabled = this.profileValue ? true : false;
}
saveProfile(val){
if(this.shouldSaveProfile)
this.presentToast( this.profileValue+"set as default profile")
else this.presentToast("No default profile")
}
presentToast(val){
let toast = this.toastCtrl.create({
message: val,
duration: 3000,
position: 'top'
});
toast.present();
}
navigateTo()
{
this.shouldSaveProfile = true;
console.log("Next Clicked, should save value:", this.shouldSaveProfile);
}
}
I have a page which is listening to beacon events. I want to show a popup when the beacon is detected. I have the following code:
home.ts
export class HomePage {
beacon_found: boolean;
constructor(public navCtrl: NavController, public events: Events, public ibeacon: IBeacon) {
this.ibeacon.requestAlwaysAuthorization();
let delegate = this.ibeacon.Delegate();
let region = this.ibeacon.BeaconRegion('ibirapuera','B9407F30-F5F8-466E-AFF9-25556B57FE6D');
this.ibeacon.startMonitoringForRegion(region)
.then(
() => console.log('Native layer recieved the request to monitoring'),
error => console.error('Native layer failed to begin monitoring: ', error)
)
delegate.didStartMonitoringForRegion()
.subscribe(
(data) => console.log("Started monitoring beacons", data)
)
delegate.didEnterRegion()
.subscribe(
(data) => {
this.beacon_found = true;
}
)
delegate.didExitRegion()
.subscribe(
(data) => {
console.log("Exit Region");
}
)
}
}
home.html
<div class="card-beacon" *ngIf="beacon_found">
</div>
The problem is that when I detect the beacon, the div is not being displayed. I read something about async databiding, but I have no idea how to do it.
Does anybody know how to solve it, please?
Thanks in advance.
I got it working using ChangeDetectorRef
import { Component, Input, ChangeDetectorRef } from '#angular/core';
export class HomePage {
beacon_found: boolean;
constructor(public navCtrl: NavController, public events: Events, public cdr: ChangeDetectorRef) {
events.subscribe('beacon:detected',(data) => {
this.beacon_found = true;
cdr.detectChanges();
})
events.subscribe('beacon:undetected',(data) => {
this.beacon_found = false;
cdr.detectChanges();
})
}
}
This is where you should use an rxjs BehaviorSubject:
beaconFoundSubject : BehaviorSubject<boolean> = new BehaviorSubject(false);
In your constructor (where NgZone may need to be injected and used to notify beaconFoundSubject):
constructor(private ngzone: NgZone) {
....
delegate.didEnterRegion()
.subscribe(
(data) => {
this.ngzone.run(() => this.beaconFoundSubject.next(true));
}
)
And then in your template:
<div class="card-beacon" *ngIf="beaconFoundSubject | async">
</div>
I have an ion-list with a ngFor loop. Here is the html:
<ion-list>
<ion-item *ngFor="let kiosk of kiosks" (click)="goToKioskProfilePage(kiosk)">
{{kiosk.name}}
</ion-item>
</ion-list>
And here is the constructor:
kiosks: any;
constructor(public navCtrl: NavController, navParams: NavParams, public locationTracker: LocationTracker, public api: ApiService, public zone: NgZone) {
this.kiosks = [];
this.zone.run(() => {
this.locationTracker.getGeolocation().then(location => {
this.api.getClosestKiosks(location, constants.AMOUNT_OF_CLOSEST_KIOSKS).then(
data => {
console.log("ready");
this.kiosks = data['data'];
},
err => {
console.log(err);
}
);
});
});
}
The console logs "ready" but the list does not update. I already tried it with NgZone but it's still not working. Only when I open the sidemenu the list updates, but not before. Someone know how to fix that?
I've encountered a similar issue before. What fixed it for me was putting only the variable update/assignment in between zone.run(), as it's after the promise resolves that you want to update the values.
Try:
this.locationTracker.getGeolocation().then(location => {
this.api.getClosestKiosks(location, constants.AMOUNT_OF_CLOSEST_KIOSKS).then(
data => {
console.log("ready");
this.zone.run(() => {
this.kiosks = data['data'];
});
},
err => {
console.log(err);
}
);
});
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