I want to show session in html called {{nama_cust}} at app.component.html, but it didn't show anything / blank, is something wrong with the code? Or app.component can't process session?
Here's my code.
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu type="overlay" id="menu-avatar">
<ion-header>
<ion-toolbar>
<ion-title>{{nama_cust}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<div #header>
<ion-row style="align-items:center;">
<ion-col col-6>
<img class="user-avatar" (click)="asd()" src="assets/ava/dum.jpg"/>
</ion-col>
<ion-col col-3>
<h4 id="tes"> {{nama_cust}} </h4>
</ion-col>
</ion-row>
</div>
app.component.ts
import { Component, NgModule, OnInit } from '#angular/core';
import { Platform, ToastController, IonicModule } from '#ionic/angular';
import { Router } from '#angular/router';
import { Storage, IonicStorageModule } from '#ionic/storage';
import { PostProvider } from 'src/providers/post-provider';
import { DomSanitizer } from '#angular/platform-browser';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
}
];
anggota: any;
nama_cust: string;
constructor(
private router: Router,
private postPvdr: PostProvider,
private storage: Storage,
public toastCtrl: ToastController,
private sanitizer: DomSanitizer
) {}
ngOnInit() {
}
ionViewWillEnter() {
this.storage.get('session_storage').then((res) => {
this.anggota = res;
this.nama_cust = sessionStorage.getItem(this.nama_cust);
console.log(res);
});
}
}
console.log(res) is showing the content of the session, but when I call the session in the html as {{nama_cust}} it shows nothing. Here's how it looks, there should be a text above the cat picture and next to it, but it doesn't show anything.
You're calling getItem() on sessionStorage with an undefined key:
this.nama_cust = sessionStorage.getItem(this.nama_cust);
So there's nothing to retrieve that's why you're not seeing anything.
nama_cust has been initialized, but doesn't have a value assigned.
You need to get it from the response:
this.storage.get('session_storage').then((res) => {
this.anggota = res;
this.nama_cust = res.result.nama_cust;
console.log(res);
});
Related
Like the title reflects, I found difficulties to display the images that I store on firebase. I saved before the paths in order to obtain the full url and push it into img tag. here my idea :
file.ts :
//imageList contains the url of each image
urlImages : Array<string> = [];
for(let img of this.imageList ) {
this.firestore.ref(img.url).getDownloadURL().then((url) => {
console.log("promise "+url);
this.urlImages.push(url);
});
}
And in file.html :
<ion-item-sliding *ngFor='let img of urlImages'>
<img [src]="img" />
</ion-item-sliding>
I'm beginner with ionic and angular env ...
So thanks in advance for your help.
Put those to iconic home page
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<ion-list>
<ion-item *ngFor="let item of imagelink">
<ion-thumbnail slot="start">
<img src= {{item}} >
</ion-thumbnail>
</ion-item>
</ion-list>
</ion-content>
2.add those files to home.ts file
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
groceries: any;
constructor(public navCtrl: NavController) {
this.imagelink= [
'https://www.gstatic.com/webp/gallery3/1.sm.png',
'https://www.gstatic.com/webp/gallery3/1.sm.png',
'https://www.gstatic.com/webp/gallery3/1.sm.png',
'https://www.gstatic.com/webp/gallery3/1.sm.png',
'https://www.gstatic.com/webp/gallery3/1.sm.png',
'https://www.gstatic.com/webp/gallery3/1.sm.png'
];
}
}
I currently have an Ionic app that creates an InAppBrowser pointing to a Website. I have deployed it to my Android phone, however there is a big issue.
Sometimes the app doesn’t work and opens the website with my default browser. Sometimes it does work and opens the website in the app using InAppBrowser.
I have tried using the different targets self, blank, system and different Android phones, but nothing fully works.
I am really confused and tried a number of things, any ideas?
Thanks in advance.
Below are my code files:
home.html
<ion-header>
<ion-navbar color="dark">
<ion-title>
InAppBrowser
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
InAppBrowser Not Displayed.
</ion-content>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions } from "#ionic-native/in-app-browser";
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser) {
const options: InAppBrowserOptions = {
toolbar: 'no',
location: 'no',
zoom: 'no'
}
const browser = this.inAppBrowser.create("https://www.awebsite.co.uk", '_self', options);
}
}
app.module.ts
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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
InAppBrowser
]
})
export class AppModule {}
Did you try to wait the "platform" to be "ready" to use?
https://ionicframework.com/docs/api/platform/Platform/
export class HomePage {
constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser, public platform: Platform) {
const options: InAppBrowserOptions = {
toolbar: 'no',
location: 'no',
zoom: 'no'
}
this.platform.ready().then( () => {
const browser = this.inAppBrowser.create("https://www.awebsite.co.uk", '_self', options);
})
}
}
Doing this, the code will only run when the app is ready. In the device environment, when Cordova is ready to be used.
I am new to angularjs and ionic cordova. I am following the code given in this video lecture on ionic cordova BLE plugin module. I am trying to make this work using ionic 3 and have installed ionic cordova plugin for BLE.
https://www.youtube.com/watch?v=chfXawb_eVY&t=1898s
I have followed the exact instruction. Here's are my code files:
app.module.ts
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 { BLE } from '#ionic-native/ble';
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},
BLE
]
}) export class AppModule {}
home.ts
import { Component, NgZone } from '#angular/core';
import { NavController } from 'ionic-angular';
import { BLE } from '#ionic-native/ble';
import { ToastController } from 'ionic-angular';
import { setTimeout } from 'core-js/library/web/timers';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
devices: any[] = [];
statusMessage:string;
constructor(public navCtrl: NavController,
public toastCtrl: ToastController,
private ble: BLE,
private ngZone: NgZone) {
}
scan(){
this.setStatus('Scanning for bluetooth LE devices');
this.devices = [];
this.ble.scan([], 2).subscribe(
device=>this.onDeviceDiscovered(device),
error=>this.scanError(error)
);
setTimeout(this.statusMessage.bind(this),5000,'Scan Complete');
}
onDeviceDiscovered(device){
console.log('Scanning');
console.log('Discovered ' + JSON.stringify(device,null,2));
this.ngZone.run(()=>{
this.devices.push(device);
});
}
scanError(error) {
console.log('Check your bluetooth connection');
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
BLE Scanner
</ion-title>
<ion-buttons end>
<button ion-button (click)="scan()">
Scan
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let device of devices">
<h2>{{ device.name || 'Unnamed' }}</h2>
<p>{{ device.id }}</p>
<p>RSSI:{{ device.rssi }}></p>
</button>
</ion-list>
</ion-content>
The function scanError is not written in the video, I have wrote it.
This is the webview screenshot
this.setStatus function is not defined. However, in the video, the function has not been declared. I tried by declaring
setStatus:any
but the function still displayed the same message. Also, I am not able to get any messages in the console even if I remove the setStatus function.
I have included NgZone component at the beginning.
Is there any way to get this resolved or am I missing something?
You need to write a setStatus function in your code.
setStatus(message) {
console.log(message);
this.ngZone.run(() => {
this.statusMessage = message;
});
}
The code on the slides is abbreviated. The source code for the examples in the presentation is available on github https://github.com/don/ionic-ble-examples
Hello I am trying to follow a tutorial about implementing sqlite in an ionic app: https://www.youtube.com/watch?v=E6h8PFHMLIU
I did everything as proposed in the turoial but still when I run the application in the android emulator (ionic cordova build android; ionic cordova run android) it does not display the data from the database as in the video. What am I doing wrong? Below you can see the code
app.module.ts
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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { IonicStorageModule } from '#ionic/storage';
import { HttpModule } from '#angular/http';
import { DatabaseProvider } from '../providers/database/database';
import { SQLitePorter } from '#ionic-native/sqlite-porter';
import { SQLite } from '#ionic-native/sqlite';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicStorageModule.forRoot(),
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
DatabaseProvider,
SQLitePorter,
SQLite
]
})
export class AppModule {}
database.ts
import { Injectable } from '#angular/core';
import { Platform } from 'ionic-angular';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
import { SQLitePorter } from '#ionic-native/sqlite-porter';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
import { BehaviorSubject } from 'rxjs/Rx';
import { Storage } from '#ionic/storage';
#Injectable()
export class DatabaseProvider {
database: SQLiteObject;
private databaseReady: BehaviorSubject<boolean>;
constructor(public sqlitePorter: SQLitePorter, private storage: Storage, private sqlite: SQLite, private platform: Platform, private http: Http) {
this.databaseReady = new BehaviorSubject(false);
this.platform.ready().then(() => {
this.sqlite.create({
name: 'developers.db',
location: 'default'
})
.then((db: SQLiteObject) => {
this.database = db;
this.storage.get('database_filled').then(val => {
if (val) {
this.databaseReady.next(true);
} else {
this.fillDatabase();
}
});
});
});
}
fillDatabase() {
this.http.get('assets/dummyDump.sql')
.map(res => res.text())
.subscribe(sql => {
this.sqlitePorter.importSqlToDb(this.database, sql)
.then(data => {
this.databaseReady.next(true);
this.storage.set('database_filled', true);
})
.catch(e => console.error(e));
});
}
addDeveloper(name, skill, years) {
let data = [name, skill, years]
return this.database.executeSql("INSERT INTO developer (name, skill, yearsOfExperience) VALUES (?, ?, ?)", data).then(data => {
return data;
}, err => {
console.log('Error: ', err);
return err;
});
}
getAllDevelopers() {
return this.database.executeSql("SELECT * FROM developer", []).then((data) => {
let developers = [];
if (data.rows.length > 0) {
for (var i = 0; i < data.rows.length; i++) {
developers.push({ name: data.rows.item(i).name, skill: data.rows.item(i).skill, yearsOfExperience: data.rows.item(i).yearsOfExperience });
}
}
return developers;
}, err => {
console.log('Error: ', err);
return [];
});
}
getDatabaseState() {
return this.databaseReady.asObservable();
}
}
home.ts
import { DatabaseProvider } from './../../providers/database/database';
import { Component } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
developer = {};
developers = [];
constructor(public navCtrl: NavController, private databaseprovider: DatabaseProvider, private platform: Platform) {
this.databaseprovider.getDatabaseState().subscribe(rdy => {
if (rdy) {
this.loadDeveloperData();
}
})
}
loadDeveloperData() {
this.databaseprovider.getAllDevelopers().then(data => {
this.developers = data;
})
}
addDeveloper() {
this.databaseprovider.addDeveloper(this.developer['name'], this.developer['skill'], parseInt(this.developer['yearsOfExperience']))
.then(data => {
this.loadDeveloperData();
});
this.developer = {};
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Developer Data
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label stacked>What's your name?</ion-label>
<ion-input [(ngModel)]="developer.name" placeholder="Developer Name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>What's your special skill?</ion-label>
<ion-input [(ngModel)]="developer.skill" placeholder="Special Skill"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>How long have you been working?</ion-label>
<ion-input [(ngModel)]="developer.yearsOfExperience" placeholder="Years of experience"></ion-input>
</ion-item>
<button ion-button full (click)="addDeveloper()">Add Developer Info</button>
<ion-list>
<ion-item *ngFor="let dev of developers">
<h2>{{ dev.name }}</h2>
<p>{{ dev.yearsOfExperience }} years of {{ dev.skill }} Experience!</p>
</ion-item>
</ion-list>
</ion-content>
I'm quite new to the whole Ionic and Cordova environment and I'm having some trouble trying to open a .pdf file from the Ionic app with the default native pdf reader.
Here is my markup:
<ion-scroll overflow-scroll="true" scrollX="true">
<ion-card>
<ion-card-content>
<a href="assets/sheets/clicks_bs.pdf">
<img src="assets/sheets/clicks_bs.jpg"/>
</a>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<a href="assets/sheets/makro.pdf">
<img src="assets/sheets/makro.png" />
</a>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<a href="assets/sheets/picknpay_bs.pdf">
<img src="assets/sheets/picknpay_bs.jpg"/>
</a>
</ion-card-content>
</ion-card>
</ion-scroll>
Here is my component:
import { Component, ViewChild } from '#angular/core';
import { Slides } from 'ionic-angular';
import { FileOpener } from '#ionic-native/file-opener';
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [FileOpener]
})
export class HomePage {
#ViewChild('storebrands') slides: Slides;
constructor(private fileOpener: FileOpener ) {
let i = 0;
setInterval(() => {
this.goToSlide(i);
if (i === 8)
i = 0;
else
i++;
}, 5000);
this.fileOpener.open('assets/sheets/*.pdf', 'application/pdf')
.then(() => console.log('File is opened'))
.catch(e => console.log('Error openening file', e));
}
}
I have imported the file opener and injected it into the constructor and I've added it as a provider, however when I try clicking on the image in Android, it does nothing. Can someone please give some insight on why it isn't opening in the default .pdf reader on a native device.
Thanks in advance!
Use DocumentViewer Plugin
showDocument(pdff){
const options: DocumentViewerOptions = {
title: 'My PDF',
openWith: { enabled: true},
bookmarks : {
enabled : true
},
search : {
enabled : true
},
autoClose: {
onPause : true
}
}
const imgeLocation = `${cordova.file.applicationDirectory}www/assets/imgs/${pdff}`;
this.document.viewDocument(imgeLocation, 'application/pdf', options)
}