The ion-back-button I am trying to use on this page refuses to appear. There is nothing in the start slot when I should get a " < Back " button appearing.
selected_card.page.html
<ion-toolbar>
<ion-buttons slot='start'>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{restaurant.name}}</ion-title>
</ion-toolbar>
</ion-header>
selected_card.page.ts
import { ModalController, NavParams } from '#ionic/angular';
import { RestaurantsService } from '../services/restaurants.service';
#Component({
selector: 'app-selected-card',
templateUrl: './selected-card.page.html',
styleUrls: ['./selected-card.page.scss'],
})
export class SelectedCardPage implements OnInit {
// value: string;
restaurant: any;
constructor(private restaurantsService: RestaurantsService,
private modalCtrl: ModalController,
private navParams: NavParams) { }
ngOnInit() {
this.restaurant = this.navParams.get('restaurant');
console.log(this.restaurant);
}
selectRestaurant() {
console.log(this.customRestaurant)
this.customRestaurant()
}
dismiss() {
this.modalCtrl.dismiss();
}
}
Let me know if y'all have questions! Really cannot figure out why this will not work when it works every other time I use it.
I am not clear about your question though if you wanted ion-back-button you are not using this component inside your ion-buttons. ion-back-button should be used instead of ion-button ...
<ion-toolbar>
<ion-buttons slot='start'>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{restaurant.name}}</ion-title>
</ion-toolbar>
</ion-header>
This should work for showing back button.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Room info page
</ion-title>
</ion-toolbar>
</ion-header>
Related
I try to use ion-textarea instead of ion-input for make a form to modify my item. I can't set a value with ngmodel or value that are from my typescript code.
I try (textNote is the variable in my ts):
ngmodel="textNote" => X
ngmodel="textNote" value="textNote" => X
ngmodel="textNote" value="{{textNote}}" => X
this kind of combination never works
This is my html
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
<h6>
Modify Audio Text
</h6>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label color="primary" >Hour</ion-label>
<ion-datetime display-format="HH:mm" [(ngModel)]="hour"></ion-datetime>
</ion-item>
<ion-item>
<ion-label color="primary">Date</ion-label>
<ion-datetime display-format="DD MMM YYYY" [(ngModel)]="date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label color="primary" position="stacked">Text</ion-label>
<ion-textarea type="text" [(ngModel)]="textNote"></ion-textarea>
</ion-item>
<ion-button expand="block" shape="round" (click)="modifyElement()">Modify</ion-button>
</ion-content>
This my typescript
import { DatabaseService } from './../services/database.service';
import { ActivatedRoute, Router } from '#angular/router';
import { Component } from '#angular/core';
#Component({
selector: 'app-note-text-modify',
templateUrl: './note-text-modify.page.html',
styleUrls: ['./note-text-modify.page.scss'],
})
export class NoteTextModifyPage{
date: String;
hour: String;
id:Number;
textNote: String = "";
constructor(private route:ActivatedRoute,private router:Router,private db:DatabaseService) {
this.id = +(this.route.snapshot.paramMap.get('id'));
this.db.getNote(this.id).then(res=>{
this.date=res.date;
this.hour=res.hour;
});
}
modifyElement(){
this.db.updateNoteTimeText(this.id,this.date,this.hour,this.textNote)
.then(_=>this.router.navigateByUrl('/tabs/note'));
}
}
I am completely new to Ionic as of last night and I've created a blank project and now stupidly realized that I'd like to have a side menu in there. So I've followed a couple of online tutorials to add one in, but no matter what I try I can get the menu to show when I click the menu toggle icon button.
Here's what I've added in to try and make this work:
app.html
<ion-menu side="right" [content]="content">
<ion-content>
<ion-list>
<button>Page 1</button>
<button>Page 2</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage" swipeBackEnabled="false"></ion-nav>
app.component.ts:
import { Component, ViewChild } from '#angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
#ViewChild(Nav) nav: Nav;
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();
});
}
}
home-logged-in.html:
<ion-header>
<ion-navbar color='primary'>
<button ion-button menu-toggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
Wrong attribute. Replace:
<button ion-button menu-toggle>
With:
<button ion-button menuToggle>
I want to show a list of the bluetooth devices present around in Ionic2.
I made .ts and .html page in Ionic.
Now I can turn on bluetooth on my phone using the app, but can't see other devices.
.ts file:
import { Component } from '#angular/core';
import { Platform, AlertController } from 'ionic-angular';
import { BluetoothSerial } from 'ionic-native';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-page1',
templateUrl: 'page1.html'
})
export class Page1 {
public working:string;
public var2: string ;
public lists = [];
constructor(private alertCtrl: AlertController, public platform: Platform, public navCtrl: NavController) {
platform.ready().then(() => {
BluetoothSerial.isConnected()
.then(() => {
console.log('is connected');
}, (err) => {
console.log(' not connected')
})
});
}
enableBluetooth(){
BluetoothSerial.enable()
}
discoverBluetooth(){
/* BluetoothSerial.setDeviceDiscoveredListener(function(device) {
console.log('Found: '+device.id);
});*/
}
unpairedBluetooth(){
BluetoothSerial.discoverUnpaired().then(function(devices) {
devices.forEach(function(device) {
console.log(device.id)
});
})
}
listDevices(){
BluetoothSerial.isEnabled().then((data)=> {
console.log(data);
BluetoothSerial.list().then((allDevices) => {
this.lists = allDevices;
let result = [];
for (var out in this.lists) {
result.push(out);
}
})
})
}}
.html file:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page One</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-buttons>
<button ion-button (click) = "enableBluetooth()">Turn on bluetooth</button>
</ion-buttons>
<ion-buttons>
<button ion-button (click) = "listDevices()">List devices</button>
</ion-buttons>
<ion-list>
<ion-item *ngFor="let out of lists">{{out}}</ion-item>
</ion-list>
<ion-buttons>
<button ion-button (click) = "unpairedBluetooth()">Unpair</button>
</ion-buttons>
</ion-content>
I have response in my application but it only shows:
[object Object]
How can I read these?
i think in this line :
<ion-item *ngFor="let out of lists">{{out}}</ion-item>
change {{out}} to something like {{out.name}} , out is complex object but you should display key of object. if you want where name is come check this Bluetooth Serial
[{
"class": 276,
"id": "10:BF:48:CB:00:00",
"address": "10:BF:48:CB:00:00",
"name": "Nexus 7"
}]
I am using a project to get some user data from Firebase. I want to put that data into a "Profile page". Everything works except for one problem. The data doesn't show on the html page until I click on an item in the page, like to edit some data for example. The data will also show if I click back, then reenter the page. So it's like the data loads the blank template, but never updates it once the data from Facebook is received. Any suggestions? Here is some of the code from the page.
profile.html
<ion-header>
<ion-navbar color="primary">
<ion-title>Profile</ion-title>
<ion-buttons end>
<button ion-button item-left icon-right (click)="logOut()">
<ion-icon name=""></ion-icon>
Logout
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-list-header>
Personal Information
</ion-list-header>
<ion-item (click)="updateName()">
<ion-grid>
<ion-row>
<ion-col width-50>
Name
</ion-col>
<ion-col *ngIf="userProfile?.firstName || userProfile?.lastName">
{{userProfile?.firstName}} {{userProfile?.lastName}}
</ion-col>
<ion-col class="placeholder-profile" *ngIf="!userProfile?.firstName">
<span>
Tap here to edit.
</span>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<ion-item>
<ion-label class="dob-label">Date of Birth</ion-label>
<ion-datetime displayFormat="MMM D, YYYY" pickerFormat="D MMM YYYY"
[(ngModel)]="birthDate" (ionChange)="updateDOB(birthDate)"></ion-datetime>
</ion-item>
<ion-item (click)="updateEmail()">
<ion-grid>
<ion-row>
<ion-col width-50>
Email
</ion-col>
<ion-col width-50 *ngIf="userProfile?.email">
{{userProfile?.email}}
</ion-col>
<ion-col class="placeholder-profile" *ngIf="!userProfile?.email">
<span>
Tap here to edit.
</span>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<ion-item (click)="updatePassword()">
<ion-grid>
<ion-row>
<ion-col width-50>
Password
</ion-col>
<ion-col class="placeholder-profile">
<span>
Tap here to edit.
</span>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
</ion-content>
Here is the code from the profile.ts page
import { NavController, AlertController } from 'ionic-angular';
import { Component } from '#angular/core';
import { ProfileData } from '../../providers/profile-data';
import { AuthData } from '../../providers/auth-data';
import { LoginPage } from '../login/login';
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
public userProfile: any;
public birthDate: string;
zone: NgZone;
constructor(public navCtrl: NavController, public profileData: ProfileData,
public authData: AuthData, public alertCtrl: AlertController) {
}
ionViewDidEnter(){
this.profileData.getUserProfile().on('value', (data) => {
this.userProfile = data.val();
this.birthDate = this.userProfile.birthDate;
});
}
I also tried wrapping it in an NgZone object as suggested by others, which looks like this:
import { NavController, AlertController } from 'ionic-angular';
import { Component } from '#angular/core';
import { ProfileData } from '../../providers/profile-data';
import { AuthData } from '../../providers/auth-data';
import { LoginPage } from '../login/login';
import { NgZone } from '#angular/core';
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
public userProfile: any;
public birthDate: string;
zone: NgZone;
constructor(public navCtrl: NavController, public profileData: ProfileData,
public authData: AuthData, public alertCtrl: AlertController) {
this.zone = new NgZone({});
this.zone.run(() => {
//Your promise code
this.profileData.getUserProfile().on('value', (data) => {
this.userProfile = data.val();
this.birthDate = this.userProfile.birthDate;
});
});
}
None of this seems to work. The data is there, it just doesn't show until I click on an item/UI object, then it populates correctly. Help!
You have to do it like below.Hope code is self-explanatory.If you have any question, please comment below.
How to install Angularfire2?
ProfileData.ts
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
#Injectable()
export class ProfileData {
constructor(public af: AngularFire) {}
getUserProfile(data: string): FirebaseObjectObservable<any> {
return this.af.database.object(`path-to-your-firebase-object`);
}
}
YourComponent.ts
public profile: any;
constructor(public profileData: ProfileData) {
this.profileData.getUserProfile(your-user-id).subscribe(profileSnap => {
this.profile= profileSnap ;
});
}
What I'm trying to achieve:
<ion-header [style.background-color]="(style|async)?.logoBackground">
<ion-navbar >
<button ion-button icon-only menuToggle [style.background-color]="(style|async)?.menuButtonBackground">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title [style.background-color]="(style|async)?.logoBackground">
<dynamic-logo [style]="style"></dynamic-logo>
</ion-title>
</ion-navbar>
</ion-header>
I have to reuse this code, over and over again.
"style" is a variable to an JSON object, I fetch dynamically which has the "style sheet for the app".
I'd lige to write it as simple as this, on other pages:
<dynamic-header [style]="style"></dynamic-header>
And having a component to set these (component appended below).
Though this is not possible in ionic2, because it'll wrap the <ion-header> in the <dynamic-header> and therefor not render the page correctly.
So I'm wondering if there is an alternative to making this as a component, maybe a way of making it as a Directive, I just havn't been able to find the necessary information about #Directive..
Also tried #Directive with binding <ion-content dynamic-content [style]="style">...</>
AND
[style]="(style|async)" gives WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).
TS:
import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '#angular/core';
import { PageStyle } from "../../providers/company-service";
#Component({
selector: 'dynamic-header',
templateUrl: 'dynamic-header.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
export class DynamicHeaderComponent {
#Input() style: PageStyle;
}
HTML:
<ion-header [style.background-color]="(style|async)?.logoBackground">
<ion-navbar >
<button ion-button icon-only menuToggle [style.background-color]="(style|async)?.menuButtonBackground">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title [style.background-color]="(style|async)?.logoBackground">
<dynamic-logo [style]="style"></dynamic-logo>
</ion-title>
</ion-navbar>
</ion-header>
reformed to directive
import { Directive, HostBinding, Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '#angular/core';
import { PageStyle } from "../../providers/company-service";
#Directive({
selector: 'dynamic-content',
/* templateUrl: 'dynamic-content.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
*/
})
export class DynamicContentComponent {
#Input() style: PageStyle;
#HostBinding('style.background-image')
get getBackgroundImage() {
if (this.style) {
return this.style.backgroundImage;
}
}
#HostBinding('style.background-repeat')
get getBackgroundRepeat() {
if (this.style) {
return "no-repeat";
}
}
#HostBinding('style.background-size')
get getBackgroundSize() {
if (this.style) {
return "cover";
}
}
#HostBinding('style.color')
get getTextColor() {
if (this.style) {
return this.style.textColor;
}
}
}
From directives you can only bind single styles
export class DynamicHeaderComponent {
#Input() style: PageStyle;
// repeat this getter for every style property
#HostBinding('style.background-color')
get backgroundColor() {
if(this.style) {
return this.style.backgroundColor;
}
}
}