i send login data to service, after get response in login.ts toast is not difined, how to resolve this ?
i try my toast function in another function withot condition in service its work
this my function for load service login.ts:
import { Component, OnInit } from '#angular/core';
import { NavController, MenuController, PopoverController } from "ionic-angular";
import { TabsInfluencerComponent } from '../../influencer/tabs/tabs';
import { RegisterComponent } from '../register/register';
import { ResetComponent } from '../reset/reset';
import { OfferComponent } from '../../advertiser/offer/offer';
import { ngForm } from '#angular/forms';
import { AuthService } from '../../../services/auth';
import { ToastController } from 'ionic-angular';
#Component({
templateUrl: 'login.component.html',
})
export class LoginComponent implements OnInit {
constructor(
public nav:NavController,
public menu:MenuController,
public popover: PopoverController,
private AuthService : AuthService,
private toastCtrl: ToastController) {
}
responseData : any;
public isChoose: boolean = false;
public isshowP: boolean = false;
//login and get data in service
login(form: ngForm){
this.AuthService.login(form.value.email, form.value.password)
.then(function(data) {
if(data.success == true){
localStorage.setItem('userToken',data.token);
localStorage.setItem('userData',JSON.stringify(data.user));
}else{
let toast = this.toastCtrl.create({
message: data.error,
duration: 3000
});
toast.present();
}
})
.catch(function(error) {
console.log(error);
})
}
}
this my service auth.ts:
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { map } from 'rxjs/operators'
#Injectable()
export class AuthService {
private loginUrl : string = 'http://localhost:8000/api/login';
data : any;
constructor(private http: HttpClient){}
//function for login
login(email : string, password :string){
const body = {email : email, password : password};
return new Promise(resolve => {
this.http.post(this.loginUrl, body)
.subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
register(email : string, password :string){
}
}
after run i have error like this :
TypeError: Cannot read property 'toastCtrl' of undefined
In this case it is a problem with your this reference in your login.ts.
.then(function(data) {
...
let toast = this.toastCtrl.create({
message: data.error,
duration: 3000
});
...
})
The this is referring the anonymous function in your then block, but you want to refer back to your LoginComponent class.
How to solve this?
You could use arrow functions, that are really popular right now.
.then((data) => {
...
let toast = this.toastCtrl.create({
message: data.error,
duration: 3000
});
...
})
Related
I have a problem testing my ionic app on my phone and android studio, when i press the hardware back button the application inmediatly exits, i've tried many solutions, but it simply won't work and won't listen to whatever i code into it.
Here is my attempt
import { Component, Renderer2, ViewChild } from '#angular/core';
import { IonRouterOutlet, Platform } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { TranslateService } from '#ngx-translate/core';
import { Location } from '#angular/common';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
#ViewChild(IonRouterOutlet, {static: true}) routerOutlet: IonRouterOutlet
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private renderer: Renderer2,
private translate: TranslateService,
private location: Location
) {
this.initializeApp();
}
initializeApp() {
this.translate.setDefaultLang( localStorage.getItem('default-language') ? localStorage.getItem('default-language') : navigator.language.slice(0, 2) )
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.backButtonEvent();
if (localStorage.getItem('color-theme')) {
this.renderer.setAttribute(document.body, 'color-theme', localStorage.getItem('color-theme'))
} else {
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches === true)
this.renderer.setAttribute(document.body, 'color-theme', 'light')
else
this.renderer.setAttribute(document.body, 'color-theme', 'dark')
}
});
}
backButtonEvent() {
this.platform.backButton.subscribeWithPriority(0, async () => {
if(!this.routerOutlet.canGoBack())
navigator["app"].exitApp()
else
this.location.back()
});
}
}
Try it this way using the #capacitor/app package:
import { App } from '#capacitor/app';
App.addListener('backButton', ({ canGoBack }) => {
if(canGoBack){
window.history.back();
} else {
App.exitApp();
}
});
I have been trying to insert a share button for a post in my app that is able to use the default apps installed in the android phone and can not seem to find a way through.
This is how my post.ts file looks like
import { Component } from '#angular/core';
import { NavParams, NavController, AlertController } from 'ionic-angular';
.
.
import { SocialSharing } from '#ionic-native/social-sharing';
/**
* Generated class for the PostPage page.
*/
#Component({
selector: 'page-post',
templateUrl: 'post.html'
})
export class PostPage {
post: any;
user: string;
comments: Array<any> = new Array<any>();
categories: Array<any> = new Array<any>();
morePagesAvailable: boolean = true;
constructor(
public navParams: NavParams,
public navCtrl: NavController,
public alertCtrl: AlertController,
private socialSharing: SocialSharing
) {
}
ionViewWillEnter(){
this.morePagesAvailable = true;
this.post = this.navParams.get('item');
Observable.forkJoin(
this.getAuthorData(),
this.getCategories(),
this.getComments())
.subscribe(data => {
this.user = data[0].name;
this.categories = data[1];
this.comments = data[2];
});
}
getAuthorData(){
return this.wordpressService.getAuthor(this.post.author);
}
getCategories(){
return this.wordpressService.getPostCategories(this.post);
}
getComments(){
return this.wordpressService.getComments(this.post.id);
}
loadMoreComments(infiniteScroll) {
let page = (this.comments.length/10) + 1;
this.wordpressService.getComments(this.post.id, page)
.subscribe(data => {
for(let item of data){
this.comments.push(item);
}
infiniteScroll.complete();
}, err => {
console.log(err);
this.morePagesAvailable = false;
})
}
goToCategoryPosts(categoryId, categoryTitle){
this.navCtrl.push(HomePage, {
id: categoryId,
title: categoryTitle
})
}
// Social sharing function is here
sharePost() {
this.socialSharing.share("Post Excerpt", "Post Title", "Post Image URL", "Post URL")
.then(() => {
console.log("sharePost: Success");
}).catch(() => {
console.error("sharePost: failed");
});
}
}
Problem
How do insert the post title, post url post image (REST API - JSON) into this.socialSharing.share("Post Excerpt", "Post Title", "Post Image URL", "Post URL")
so that the share button can look more like this
<button ion-fab class="btn share" mini (click)="sharePost()"></button>
EDIT
I have managed to make it work using
sharePost() {
this.socialSharing.share(this.post.excerpt.rendered, this.post.title.rendered, this.post.images.large, this.post.link)
.then(() => {
console.log("sharePost: Success");
}).catch(() => {
console.error("sharePost: failed");
});
}
However when i share like using gmail, the html special characters display
e.g title shows: catering & Cleaning Services
Excerpt shows: <p>Some text[…]</p>
How do i get rid of those html characters and just show some clean text.?
Thank you
One way i removed html tag from my wordpress post was to create a pipe and i pass the excerpt through the pipe before it gets rendered to the view
Pipe.ts was like so
import { Pipe, PipeTransform } from '#angular/core';
/**
* Generated class for the RemovehtmltagsPipe pipe.
*
* See https://angular.io/api/core/Pipe for more info on Angular Pipes.
*/
#Pipe({
name: 'RemovehtmltagsPipe',
})
export class RemovehtmltagsPipe implements PipeTransform {
/**
* Takes a value and makes it lowercase.
*/
transform(value: string) {
if (value) {
let result = value.replace(/<\/?[^>]+>/gi, "");
return result;
}
else {
}
}
}
Then i added the pipe as export in my component's module.ts
details.module.ts was like so
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DetailsPage } from './details';
import { RemovehtmltagsPipe } from
'../../pipes/removehtmltags/removehtmltags';
#NgModule({
declarations: [
DetailsPage,
],
imports: [
IonicPageModule.forChild(DetailsPage),
],
exports: [RemovehtmltagsPipe],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DetailsPageModule {}
Finally used the pipe inside my html code
details.html
<ion-row class="white-bg" padding>
<ion-col>
<h1 class="title">{{article.title.rendered | RemovehtmltagsPipe}}</h1>
<p class="date">Published: {{article.modified.split('T')[0]}} {{article.modified.split('T')[1]}}</p>
</ion-col>
</ion-row>
This should get rid of any html tags in your post.Hope this helps
I'm trying to create a toast message when the user logins fails but the toast message is giving me an error on the create property. I'm using firebase authentication.
Cannot read property 'create' of undefined
login.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { User } from "../../models/user";
import { AngularFireAuth } from 'angularfire2/auth';
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
user = {} as User
constructor(private afAuth: AngularFireAuth,
public navCtrl: NavController, public navParams: NavParams) {
}
async login(user:User){
this.afAuth.auth.signInWithEmailAndPassword(user.email,user.password)
.then(res => {
this.navCtrl.setRoot('TabsPage');
}, err => {
switch (err.code) {
case "auth/wrong-password":
this.toast.create({
message: `Wrong Password`,
duration: 3000
}).present();
break;
}
});
}
}
You need to initialise the ToastController in your constructor and reference it.
In example:
constructor(
private afAuth: AngularFireAuth,
public navCtrl: NavController,
public navParams: NavParams,
public toastCtrl: ToastController /* This bit */
) {}
And then...
let toast = this.toastCtrl.create({
message: 'Wrong password, holmes.',
duration: 3000,
position: 'top'
});
toast.present();
I’m using local notifications native plugin on my ionic 3 project (latest version), but when I click on notification and my app is closed the click event is not triggered.
It works when app is in background or foreground.
I use local notifications inside a provider and my on click code is inside its constructor but when app is closed it's not working.
I’ve tried to write code inside platform ready in app/app.component.ts but this approach does not work.
This is my code:
app/app.component.ts
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any;
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
public BeaconServiceProvider: BeaconServiceProvider, /* my provider with local notifications*/
public RemoteServiceProvider: RemoteServiceProvider,
public translate: TranslateService,
public globalization: Globalization,
private oneSignal: OneSignal,
public ga: GoogleAnalytics
) {
......
}
}
My provider
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage';
import { IBeacon } from '#ionic-native/ibeacon';
import { LocalNotifications } from '#ionic-native/local-notifications';
import { RemoteServiceProvider } from '../remote-service/remote-service';
import { StorageProvider } from '../storage/storage';
import { TranslateService } from '#ngx-translate/core';
import { AlertController } from 'ionic-angular';
import { NavController, App} from "ionic-angular/index";
import { GoogleAnalytics } from '#ionic-native/google-analytics';
#Injectable()
export class BeaconServiceProvider {
remoteBeacons: Array<{major: string, minor: string}> = [];
localBeacons: Array<{major: string, minor: string, date: any}> = [];
bluetoothInit: boolean = false;
private navCtrl: NavController;
constructor(
public http: HttpClient,
public alertCtrl: AlertController,
public storage: Storage,
public ibeacon: IBeacon,
public translate: TranslateService,
public localNotifications: LocalNotifications,
public RemoteServiceProvider: RemoteServiceProvider,
public StorageProvider: StorageProvider,
public ga: GoogleAnalytics,
private app: App
) {
console.log('Hello BeaconProvider Provider');
this.localBeacons = this.StorageProvider.localBeacons;
this.navCtrl = this.app.getActiveNav();
let thiz_app = this.app;
let remote = this.RemoteServiceProvider;
this.localNotifications.on("click", function(notification, state){
this.ga.trackEvent(
"Notifiche Beacon (" + remote.version_code + ")",
"Apertura notifica",
"Click sulla notifica beacon " + " {" + notification.message + "}",
1
);
let nav = thiz_app.getActiveNav();
let data = JSON.parse(notification.data);
let page_id = data.page_id;
page_id = page_id.toString();
switch(page_id)
{
case "" :
case "0" :
break;
case "-1" : //Contact Page
if (nav == null)
nav.push('ContactPage');
else if (nav.getActive().component.name != 'ContactPage')
nav.push('ContactPage');
break;
default :
remote.isPageListNew(page_id).subscribe(result => {
let page = result.has_subpages ? 'List2Page' : 'ItemDetailsPage';
if (nav == null)
nav.push(page, { item: result });
else
{
if( nav.getActive().component.name != page)
nav.push(page, { item: result });
else
{
let item_id = nav.getActive().data.item.id;
if (item_id != result.id)
nav.push(page, { item: result });
}
}
});
}
});
}
Any ideas why my code does not work?
Thanks
When I tap physical Android Button I've got the next error:
Unhandled exception java.lang.IndexOutOfBoundsException: setSpan
(2..2) ends beyound length 0
Here is my app.routing.ts
import { LoginComponent } from "./pages/login/login.component";
import { CarwashComponent } from "./pages/carwash/carwash.component";
import { NewOrderComponent } from "./pages/new_order/new-order.component";
import { ProfileComponent } from "./pages/profile/profile.component";
import { OrderDetailComponent } from "./pages/order/order-detail/order-detail.component";
export const routes = [
{ path: "", component: LoginComponent },
{ path: "profile", component: ProfileComponent},
{ path: "carwash", component: CarwashComponent },
{ path: "order-detail/:order_id", component: OrderDetailComponent },
{ path: "new_order", component: NewOrderComponent}
];
export const navigatableComponents = [
LoginComponent,
CarwashComponent,
ProfileComponent,
OrderDetailComponent,
NewOrderComponent
];
Example of the page:
import { Component, ElementRef, OnInit, ViewChild, OnChanges } from "#angular/core";
import { CarwashService } from "../../../shared/carwash/carwash.service";
import { OrderService } from "../../../shared/order/order.service";
import { Page } from "ui/page";
import { Color } from "color";
import { Router, ActivatedRoute, Params } from "#angular/router";
import { TimePicker } from "ui/time-picker";
import { DatePicker } from "ui/date-picker";
import { StoredData } from "../../../shared/config"
import * as application from "application";
#Component({
selector: "order-detail",
providers: [CarwashService, OrderService],
templateUrl: "pages/order/order-detail/order-detail.html",
styleUrls: ["pages/order/order-detail/order-detail-common.css", "pages/order/order-detail/order-detail.css"]
})
export class OrderDetailComponent implements OnInit {
constructor(
private page: Page,
private router: Router,
private carwashService: CarwashService,
private orderService: OrderService,
private route: ActivatedRoute){}
ngOnInit() {... }
checkStatus(){...}
addOrderTotalName(){...}
changeStatus(status){...}
closeOrder(){...}
cancelOrder(){...}
}
What's wrong?enter image description here
Normally the physical back button will behave as going back to previous page, but I don't know why this happens to you. You can try to define again the function for the back button like this:
var application = require("application")
var topmost = require("ui/frame").topmost;
var activity = application.android.startActivity ||
application.android.foregroundActivity ||
frameModule.topmost().android.currentActivity ||
frameModule.topmost().android.activity;
var lastPress;
activity.onBackPressed = function() {
topmost().goBack;
}