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>
Related
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>
I have small problem with my chat page :) wanted to do some chat application
I have login that is working but when I click to button chat it's crashing. I am beginner so maybe I can't see correctly. It's in Ionic 3
Home.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '#ionic/cloud-angular';
import { User } from '#ionic/cloud-angular';
import { LoginPage } from '../login/login';
import { About } from '../about/about';
import { ChatPage } from '../chat/chat';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public auth: Auth, public user: User) {
console.log(user);
}
logout() {
this.auth.logout();
this.navCtrl.setRoot(LoginPage);
}
about(){
this.navCtrl.setRoot(About);
this.navCtrl.push(About);
}
chat(){
this.navCtrl.setRoot(ChatPage);
this.navCtrl.push(ChatPage);
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logout()">
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome back, {{ user.details.name }}</h2>
<p>
<button ion-button color="secondary" block>Something</button>
</p>
<p>
<button ion-button color="secondary" block (click)="chatPage()">Chat</button>
</p>
<p>
<button ion-button color="secondary" block (click)="about()">About</button>
</p>
</ion-content>
chat.ts
import { Component, NgZone, ViewChild } from '#angular/core';
import { NavController, Content } from 'ionic-angular';
import { Validators, FormBuilder } from '#angular/forms';
import * as io from 'socket.io-client';
import { HomePage } from '../home/home';
#Component({
selector: 'page-chat',
templateUrl: 'chat.html'
})
export class ChatPage {
public chatForm: any;
#ViewChild(Content) content: Content;
messages:any = [];
socketHost: string = "http://localhost:3000/";
socket:any;
chat:any;
username:string;
zone:any;
chatField: any;
constructor(public navCtrl: NavController, private fb: FormBuilder){
this.socket = io.content(this.socketHost);
this.zone = new NgZone({enableLongStackTrace: false});
this.socket.on("chat me", (msg) =>{
this.zone.run (() =>{
this.messages.push(msg);
this.content.scrollToBottom();
});
});
this.chatForm = fb.group({
'chatField': ['', Validators.compose([Validators.required])],
});
this.chatField = this.chatForm.controls['chatField'];
}
chatSend(v) {
let data = {
message: v.chatText,
username: this.username
}
this.socket.emit('new message', data);
this.chat = "";
}
onSubmit(value: string): void {
if(this.chatForm.valid) {
}
}
}
chat.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Chat</ion-title>
</ion-navbar>
<ion-input [(ngModel)] = "username" placeholder="Username"> </ion-input>
</ion-header>
<ion-content class="chat">
<ion-list>
<div *ngFor="let data of messages">
<ion-item *ngIf="username === data.username" style="border-right: solid 5px red;">
<p class="chat-text" item-left>
<strong> {{data.username}}: </strong>
{{data.message}}
</p>
<p class="chat-time" item-right>
{{data.date | date:'dd/MM/yyyy'}}
</p>
</ion-item>
<ion-item *ngIf="username !== data.username" style="border-right: solid 5px green;">
<p class="chat-text" item-left>
<strong> {{data.username}}: </strong>
{{data.message}}
</p>
<p class="chat-time" item-right>
{{data.date | date:'dd/MM/yyyy'}}
</p>
</ion-item>
</div>
</ion-list>
</ion-content>
<ion-footer>
<form padding [formGroup]="chatForm" (ngSubmit)="onSubmit(chatForm.value)">
<ion-item>
<ion-input [(ngModel)]="chatField" name="chatText" required placeholder="type here....."></ion-input>
</ion-item>
<br/><br/>
<button type="submit" ion-button [disabled]="!chatForm.valid" block>Send</button>
</form>
</ion-footer>
the error that I am getting is
Runtime Error
co.chatPage is not a function
Stack
TypeError: co.chatPage is not a function
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:290:24)
at handleEvent (http://localhost:8100/build/main.js:12302:138)
at callWithDebugContext (http://localhost:8100/build/main.js:13510:42)
at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:13098:12)
at dispatchEvent (http://localhost:8100/build/main.js:9277:21)
at http://localhost:8100/build/main.js:9867:38
at HTMLButtonElement.<anonymous> (http://localhost:8100/build/main.js:35897:53)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
at Object.onInvokeTask (http://localhost:8100/build/main.js:4613:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:13213)
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.2.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) App
The problem is you have called (click)="chatPage()" in your template and the function in your HomePage.ts is chat().
Do:
<button ion-button color="secondary" block (click)="chat()">Chat</button>
Side Note:
You dont have to do both push and setRoot.
setRoot will create an new navigation stack and set the particular page as Root.
push will push the page onto the current navigation stack.
Use one of them based on your requirement.
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"
}]
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {ModalPage} from '../modal-page/modal-page';
#Component({
selector: 'page-page2',
templateUrl: 'page2.html'
})
export class Page2 {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
public nb:ModalPage;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
// Let's populate this page with some filler content for funzies
this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
this.items = [];
for (let i = 1; i < 11; i++) {
this.items.push({
title: 'Item ' + i,
note: 'This is item #' + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
});
}
}
itemTapped(event, item) {
// That's right, we're pushing to ourselves!
this.navCtrl.push(Page2, {
item: item
});
}
enablebuttonn(){
if ( this.nb.login()){
console.log("button va être activée");
}
}
}
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page Two</ion-title>
<ion-buttons end>
<button ion-button icon-left>
<ion-icon name="paper"></ion-icon>
<span class="hide-xs">news</span>
</button>
<button ion-button #button1 disabled="true" icon-left (click)="enablebuttonn()">
<ion-icon name="car"></ion-icon>
<span class="hide-xs">voiture</span>
</button>
<button ion-button icon-left (click)="showAlert()">
<ion-icon name="chatbubbles"></ion-icon>
<span class="hide-xs">messages</span>
</button>
<button ion-button icon-only >
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
</ion-list>
<div *ngIf="selectedItem" padding>
You navigated here from <b>{{selectedItem.title}}</b>
</div>
</ion-content>
I'm working in a new mobile app with Ionic 2, and I'm trying to enable a button located in the ion-navbar while having success submitting from a modal page.
this a screenshot : voiture button ( in the top right ) is in the beginning disabled , i would like enable it while submitting.enter image description here
here is my page2 page ,ts file and the modal page
<button ion-button #button1 [disabled]="showButton" icon-left (click)="enablebuttonn()">
Notice the [] around the disabled attribute. This allows you to add logic to the attribute.
And then in the click event you can trigger the property to true
showbutton:boolean = false;
....
constructor(){
}
....
itemTapped(event, item) {
this.showbutton = true;
...
}
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;
}
}
}