I'm integrating with facebook for application users to sign in with facebook.
I'm testing the documentation code for ionic 2 but it's not working right every time it drops the error condition. Is there anything else to be done?
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { RecuperarSenhaPage } from '../recuperar-senha/recuperar-senha';
import { CadastroUsuarioPage } from '../cadastro-usuario/cadastro-usuario';
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
import { BrowserModule } from '#angular/platform-browser';
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private _fb: Facebook) {
}
loginFacebook() {
this._fb.login(['email'])
.then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
.catch(e => console.log('Error logging into Facebook', JSON.stringify(e)));
}
}
Related
I tried to set a orientation with ScreenOrientation, in ionViewDidLoad() in a device and the localhost but i can't force the change.
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ScreenOrientation } from '#ionic-native/screen-orientation';
#Component({
selector: 'page-Test',
templateUrl: 'Test.html'
})
export class TestPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private screenOrientation: ScreenOrientation) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY);
}
}
Try to:
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}
OR
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_SECONDARY);
}
You have to add this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY) line in app.components.ts files initializeApp() method before spash screen is hide.
Example :
app.components.ts
initializeApp() {
this.platform.ready().then(async () => {
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY).then(async ()=>{
this.statusBar.styleDefault();
this.splashScreen.hide();
this.rootPage="HomePage";
// rest of your code goes here
});
});
}
I'm using ionic cli 4.6.0 with #ngx-translate/core 9.1.1, and #ngx-translate/http-loader 2.0.1. The pages are lazy loaded while the ngx-translate is used as shared module, i.e.
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '#angular/common/http';
import { IonicStorageModule } from '#ionic/storage';
import { MyApp } from './app.component';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
#NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule, BrowserAnimationsModule,
IonicModule.forRoot(MyApp),
HttpClientModule,
IonicStorageModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Logger
]
})
export class AppModule {}
. In app.component.ts whenever I set the default value to whichever language the app on restart it works as expected, i.e. translate.setDefaultLang('en') shows language in english while translate.setDefaultLang('fr') in french.
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 { TranslateService } from '#ngx-translate/core';
import { Storage } from '#ionic/storage';
import { Logger } from '../providers/logger';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = 'HomePage';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
translate:TranslateService,storage:Storage,logger:Logger) {
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();
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
});
}
}
I have created a page settings in which I have a select box which on change sets the language to the new input, i.e. settings.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from '#ngx-translate/core';
/**
* Generated class for the SettingsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-settings',
templateUrl: 'settings.html',
})
export class SettingsPage {
languages:any[] = [
{value:"en",text:"English"},
{value:"fr",text:"French"}
];
selectedLanguage:string = "en";
constructor(public navCtrl: NavController, public navParams: NavParams,private translate: TranslateService) {
}
onChangeLanguage(selectedLanguage:string){
this.translate.use(selectedLanguage);
}
}
and in settings.html
<select [ngModel]="selectedLanguage" (ngModelChange)="onChangeLanguage($event)">
<option [value]="language.value" *ngFor="let language of languages">{{language.text}}</option>
</select>
What I would expect is when I use e.g. this.translate.use("fr") and I return to home page everything to be translated to french. It seems that it doesn't work like that.
How could I achieve something like that?
Just in case somebody needs it. I used the onLangChange which is an observable. The way I used it
import { NgModule, ElementRef, ViewChild } from '#angular/core';
import { trigger, state, style, animate,transition, query} from '#angular/animations';
import { Observable, Subscription } from 'rxjs/Rx';
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';
import { TranslateService,LangChangeEvent} from '#ngx-translate/core';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
private items:any=[];
constructor(public navCtrl: NavController,private translate: TranslateService) {
}
ionViewDidLoad(){
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
this.items=[this.translate.instant("Word1"),this.translate.instant("Word2")];
});
}
}
So whenever the language is changed whereever the "items" property is used, it's rendered with the new language.
I have this simple provider:
import { Injectable } from "#angular/core";
#Injectable()
export class DevicesService {
public check_string : any;
constructor(){
this.check_string = "Provider enabled";
}
getStatusString() { return this.check_string; }
}
and I am trying to pass that check_string variable to a ion-input in my home.ts:
<strong><ion-input round id="stringstatus" type="text" [(ngModel)]="stringstatus"></ion-input></strong>
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public stateString : string;
constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
this.stateString = this.deviceProvider.check_string;
//this.stateString = this.deviceProvider.getStatusString();
}
}
I tried both two ways, direct pass variable and getting return function but once I run app it shows blank page.. what I could have missed?
Thanks a lot to all
Cheers!
Try using deviceProvider.getStatusString(). Without using this in constructor;
constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
this.stateString = deviceProvider.getStatusString();
}
You can directly set it in your ngModel :
[(ngModel)]="deviceProvider.check_string"
or
[(ngModel)]="deviceProvider.getStatusString()"
Hello Rameez and saperlipopette,
I tried as both of you obtaining this:
devicefactory.ts
import { Injectable } from "#angular/core";
//import { BluetoothLE } from '#ionic-native/bluetooth-le';
#Injectable()
export class DevicesService {
public ble_status : boolean;
public check_string : any;
// public BLE : BluetoothLE
constructor(){
this.ble_status = false;
//this.BLE.initialize();
//this.BLE.isEnabled().then(result => { this.ble_status = result.isEnabled; });
this.check_string = "Provider enabled";
}
getStatus() { return this.ble_status; }
getStatusString() { return this.check_string; }
enableBLE() {
//if (this.ble_status) this.BLE.enable(); else this.BLE.disable();
if (this.ble_status) this.check_string = "Provider enabled"; else this.check_string = "Provider disabled";
}
}
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HoergerateApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { SettingsPage } from '../pages/settings/settings';
import { DevicesService } from '../providers/devicefactory/devicefactory';
#NgModule({
declarations: [
HoergerateApp,
AboutPage,
SettingsPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(HoergerateApp)
],
bootstrap: [IonicApp],
entryComponents: [
HoergerateApp,
AboutPage,
SettingsPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
DevicesService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<p>
Check bluetooth status:<br>
<strong><ion-input round id="ble_state" type="text" [(ngModel)]="ble_state"></ion-input></strong>
</p>
</ion-content>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public ble_state : string;
constructor(public navCtrl: NavController, public deviceProvider : DevicesService) {
//this.ble_state = ( this.deviceService.ble_status ? "Bluetooth is enabled" : "BLuetooth is disabled" );
//this.ble_state = deviceProvider.check_string;
this.ble_state = deviceProvider.getStatusString();
}
}
Before I put also directly in [(ngModel)] but it goes for blank page..... I think it's related something about passing variables maybe because if I comment that:
this.ble_state = deviceProvider.getStatusString();
the app appears working...
Maybe it's related about ionic and cordova installation platforms or dependencies even if it didn't reported any errors during compilation?
Thanks
In a component (LoginPage) I'm trying to use
this.navCtrl.setRoot(otherPage)
but it keeps throwing
StaticInjectorError(Platform: core)[Content -> NavController]:
NullInjectorError: No provider for NavController!
How can I change the rootpage from a component?
I want to go from LoginPage to HomePage.
import { Component } from "#angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";
import { AngularFireAuth } from "angularfire2/auth";
import * as firebase from "firebase/app";
import { HomePage } from "../../pages/home/home";
import { UserProvider } from "../../providers/user/user";
#IonicPage()
#Component({ selector: "page-login", templateUrl: "login.html" })
export class LoginPage { constructor(
public navCtrl: NavController,
public navParams: NavParams,
private afAuth: AngularFireAuth,
private userProv: UserProvider ) {}
signInWithFacebook() {
this.afAuth.auth
.signInWithPopup(new firebase.auth.FacebookAuthProvider())
.then(res => {
const user = res.user;
this.userProv.cargarUsuario(
user.displayName,
user.email,
user.photoURL,
user.uid,
"facebook"
);
this.navCtrl.setRoot(HomePage);
});
}
}
I have created a tabs project in ionic, And created deeplinks for About and Home pages which are also tabs.
I need to set the name but while setting the name the following result occur:
Issue1: url does not displays the name.
Issue2 : When I refresh the page with given url the tabs also disappears.
In tabs.html I have set <ion-tabs name="tabspage">
tabs.ts
import { Component } from '#angular/core';
import { ContactPage } from '../contact/contact';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = 'HomePage';
tab2Root = 'AboutPage';
tab3Root = ContactPage;
constructor() {
}
}
tabs.html
<ion-tabs name="tabshome">
<ion-tab [root]="tab1Root" tabUrlPath="tab1" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
about.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
#IonicPage({
segment: 'about/:id'
})
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController) {
}
}
home.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
#IonicPage({
segment: 'home'
})
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
My git hub link is https://github.com/jainAdijain/myTabs.git
Need to change in tabs.ts And use tabs to deeplinks:
import { Component } from '#angular/core';
import { IonicPage } from 'ionic-angular';
import {ContactPage} from "../contact/contact";
#IonicPage({
name: 'page-tabs',
priority: 'high'})
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
tab1Root='page-home';
tab2Root = 'page-about';
tab3Root = ContactPage;
constructor() {
}
}
Need to change 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';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any ='page-tabs';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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();
});
}
}
tabs.html remain same.
Need to change in about.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage({
segment: 'about/:id',
name: 'page-about'
})
#Component({
selector: 'page-about',
templateUrl: 'about.html',
})
export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad AboutPage');
}
}
Need to change home.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage({
segment: 'home',
name: 'page-home'
})
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewWillEnter() {
}
}
Also need to update app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { ContactPage } from '../pages/contact/contact';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
ContactPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ContactPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}