I made a button related to login with facebook.
when I click the button, it doesn't work at all.
I added the codes.
what should I do?
please, help me!
I have done that and it's working fine on the real device.If you have any question, please comment below.
Play with Git Repo.
Cloud Plugin for more info.
Note: Fork above git repo and play with it.
app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'd32c02d2'
},
'auth': {
'facebook': {
'scope': ['public_profile', 'email']
}
}
};
#NgModule({
declarations: [
],
imports: [
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
],
providers: [
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
home.ts
import { Component } from '#angular/core';
import { FacebookAuth, User } from '#ionic/cloud-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public facebookAuth: FacebookAuth, public user: User) {
}
fbLogin() {
this.facebookAuth.login();
}
}
Related
I want to create a web app with a registration and the Google Recaptcha. I have oriented on this example:
I want to use the normal version use, but the Google Recaptcha will not display in the HTML. what do I wrong?
Here is my code, is something missing pls write to me.
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, RecaptchaModule],
providers: [
StatusBar,
SplashScreen,
{
provide: RECAPTCHA_SETTINGS,
useValue: {
siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
} as RecaptchaSettings,
},
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<re-captcha (resolved)="resolveCaptcha($event)"></re-captcha>
</ion-content>
home.page.ts
import { Component } from '#angular/core';
import { RecaptchaModule } from 'ng-recaptcha'; // I don't if I need this import in this file
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
resolveCaptcha(event)
{
console.log(event)
}
}
Thanks for the help.
I have found an answer for my problem:
*.html
<re-captcha (resolved)="resolved($event)"></re-captcha>
*.page.ts
resolved(response: string) {
console.log(`Resolved captcha with response: ${response}`); if(response != null)
if(response != null && response != undefined) {
this.captchaPassed = !this.captchaPassed;
}
}
*.module.ts
import { RecaptchaComponent, RECAPTCHA_SETTINGS, RecaptchaSettings, RecaptchaModule } from 'ng-recaptcha' // muss hinzugefühgt werden /** nur wenn es auf einer seite sein soll */
#NgModule({
imports: [
CommonModule,
...
RecaptchaModule,
],
declarations: [RegisterPage],
providers: [
{
provide: RECAPTCHA_SETTINGS,
useValue: {
siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
} as RecaptchaSettings,
},
],
})
If I have a function in:
results.ts
export class ResultsPage implements OnInit {
myFunc() {
alert('my function works!');
}
}
app.component.html
<button (click)="myFunc()">CALL</button>
can I call this function in my app.component.html?
You should use angular providers and services
run ionic g service SomeProvider
inside SomeProvider create your function
import { Injectable } from '#angular/core';
#Injectable()
export class SomeProvider {
constructor() {
}
someFunction(){
console.log("I do something useful!");
}
}
set up as a provider in the app.module.ts file:
#NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
SomeProvider // <-- List providers here
]
})
export class AppModule { }
inject into classes that want to use them:
import { Component } from '#angular/core';
import { IonicPage } from 'ionic-angular';
import { SomeProvider } from '../../providers/some-provider/some-provider';
#IonicPage()
#Component({
selector: 'page-something',
templateUrl: 'something.html',
})
export class SomePage {
constructor(public myService: SomeService) {
}
ionViewDidLoad() {
this.myService.someFunction(); // This will log "I do something useful!"
}
}
Here you can find complete guide: https://www.joshmorony.com/when-to-use-providersservicesinjectables-in-ionic/
I have a code sharing Nativescript-Angular project. I am using two ListView's in a Lazy loaded module. The lazy loaded module is structured such that when I navigate to that module from AppModule.
<TabView id="tabViewContainer">
<page-router-outlet actionBarVisibility="never" *tabItem="{title: 'Players'}" name="playersTab"></page-router-outlet>
<page-router-outlet actionBarVisibility="never" *tabItem="{title: 'Event Requests'}" name="eventRequestsTab"></page-router-outlet>
</TabView>
Now each tab item is a page-router-outlet which routes to a child component and that child
component has ListView as parent element as shown below.
<ListView
class="list-group"
[items]="players"
(loaded)="onListViewLoaded($event)"
#listView
>
<ng-template let-player="item" let-third="third">
<GridLayout class="list-group-item" rows="*" columns="auto, *">
<Image
col="0"
[src]="player.photoURL"
class="thumb img-circle"
></Image>
<StackLayout col="1">
<Label
[text]="player.displayName"
class="list-group-item-heading"
></Label>
<Label
[text]="player.uid"
class="list-group-item-text"
textWrap="true"
></Label>
</StackLayout>
</GridLayout>
</ng-template>
</ListView>
Now the problem I am facing is when these two list views are shown side by side sometimes both the list views don't show anything and sometimes only the second tab shows data where as the first tab only shows the item dividers as shown below:-
Case 1 tab-1
Case 1 tab-2
Case 2 tab-1
Case 2 tab-2
The items always have more than one element but still this problem is being arised.
I have tried using the function listview.refresh() but still no success with that. I have also used ChangedDetectionStratergy.OnPush and called markedForRefresh function when data is received. I have tried using ObservableArray provided by Nativescript but I was bit confused while using that and also I felt it was not available for code sharing project.
I am frustrated since yesterday and it looks like a bug in Nativescript. Can you help overcome it so that both tabs shows the data always(knowing the arrays always have atleast one element) ?
Two listview is working inside tabView for example:-
app.component.html :-
`<TabView androidTabsPosition="bottom">
<page-router-outlet *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
name="homeTab">
</page-router-outlet>
<page-router-outlet *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
name="browseTab">
</page-router-outlet>
</TabView>`
app.component.ts:-
`import { Component, OnInit } from "#angular/core";
import { isAndroid } from "tns-core-modules/platform";
#Component({
selector: "ns-app",
moduleId: module.id,
templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {
constructor() {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
// Init your component properties here.
}
getIconSource(icon: string): string {
const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
return iconPrefix + icon;
}
}
`
app.module.ts :-
`import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
`
app.routing.ts :-
`import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";
const routes: Routes = [
{
path: "",
redirectTo: "/(homeTab:home/default//browseTab:browse/default)",
pathMatch: "full"
},
{
path: "home",
component: NSEmptyOutletComponent,
loadChildren: "~/app/home/home.module#HomeModule",
outlet: "homeTab"
},
{
path: "browse",
component: NSEmptyOutletComponent,
loadChildren: "~/app/browse/browse.module#BrowseModule",
outlet: "browseTab"
}
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
`
home.component.html :-
`<GridLayout class="page page-content">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<ScrollView height="150">
<Label [text]="item.name" class="list-group-item"></Label>
</ScrollView>
</ng-template>
</ListView>
</GridLayout>`
home.component.ts:-
`import { Component, OnInit } from "#angular/core";
import { DataService, IDataItem } from "../shared/data.service";
#Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
items: Array<IDataItem>;
constructor(private _itemService: DataService) { }
ngOnInit(): void {
this.items = this._itemService.getItems();
}
}`
home.module.ts:-
`import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { ItemDetailComponent } from "./item-detail/item-detail.component";
#NgModule({
imports: [
NativeScriptCommonModule,
HomeRoutingModule
],
declarations: [
HomeComponent,
ItemDetailComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class HomeModule { }`
home-routing.module.ts:-
`import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
import { ItemDetailComponent } from "./item-detail/item-detail.component";
const routes: Routes = [
{ path: "default", component: HomeComponent },
{ path: "item/:id", component: ItemDetailComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class HomeRoutingModule { }`
browse.component.html :-
`<GridLayout class="page page-content">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<ScrollView height="150">
<Label [text]="item.name" class="list-group-item"></Label>
</ScrollView>
</ng-template>
</ListView>
</GridLayout>`
browse.component.ts:-
`import { Component, OnInit } from "#angular/core";
import { DataService, IDataItem } from "../shared/data.service";
#Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {
items: Array<IDataItem>;
constructor(private _itemService: DataService) { }
ngOnInit(): void {
this.items = this._itemService.getItems();
}
}
`
browse.module.ts:-
`import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { BrowseRoutingModule } from "./browse-routing.module";
import { BrowseComponent } from "./browse.component";
import { DataService } from "../shared/data.service";
#NgModule({
imports: [
NativeScriptCommonModule,
BrowseRoutingModule
],
declarations: [
BrowseComponent
],
schemas: [
NO_ERRORS_SCHEMA
],
providers:[
DataService
]
})
export class BrowseModule { }`
browse-routing.module.ts:-
`import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { BrowseComponent } from "./browse.component";
const routes: Routes = [
{ path: "default", component: BrowseComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class BrowseRoutingModule { }
`
Example Available On Here:-
Nativescript playground url
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
I am trying to learn ionic. This is my very first application. It gives me an error as such:
app.module.ts
import { AddDataPage } from './../pages/add-data/add-data';
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 { SQLite } from '#ionic-native/sqlite';
import { Toast } from '#ionic-native/toast';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SQLite,
Toast
]
})
export class AppModule {}
add-data.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
import { Toast } from '#ionic-native/toast';
/**
* Generated class for the AddDataPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-add-data',
templateUrl: 'add-data.html',
})
export class AddDataPage {
data = { date:"", type:"", description:"", amount:0 };
constructor(public navCtrl: NavController,
public navParams: NavParams,
private sqlite: SQLite,
private toast: Toast) {}
saveData() {
this.sqlite.create({
name: 'ionicdb.db',
location: 'default'
}).then((db: SQLiteObject) => {
db.executeSql('INSERT INTO expense VALUES(NULL,?,?,?,?)',[this.data.date,this.data.type,this.data.description,this.data.amount])
.then(res => {
console.log(res);
this.toast.show('Data saved', '5000', 'center').subscribe(
toast => {
this.navCtrl.popToRoot();
}
);
})
.catch(e => {
console.log(e);
this.toast.show(e, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
});
}).catch(e => {
console.log(e);
this.toast.show(e, '5000', 'center').subscribe(
toast => {
console.log(toast);
}
);
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddDataPage');
}
}
I really would like to learn this framework but most of the tutorials I see in youtube are for ionic 2. It is harder to learn if the ionic version I am downloading is different from what I am seeing in the tutorial. Specially if you are very new. Hope you can help. Thank you.
As the error is very clear that you have to add every page you create and use in ionic( if you are not using lazy loading) inside the declarations and also inside the entry components so just add your page AddDataPage in declarations and entry components section
In your app.module.ts inside #ngModule:
declarations: [
MyApp,
HomePage,
AddDataPage
],
And inside entryComponents
entryComponents: [
MyApp,
HomePage,
AddDataPage
]