Just started using Ionic 4 and Angular so a very new beginner :)
I bought a UI Template from code canyon but never realised I had to code the music playing part of it. Anyway I have been searching to get a stream playing but failed. I found a post which said to just use a HTML5 code to stream music.
When I click Play the music never plays. Where am I going wrong ? My player.page.ts looks like this :
import { Component, OnInit, Input } from '#angular/core';
import { ModalController } from '#ionic/angular';
#Component({
selector: 'app-player',
templateUrl: './player.page.html',
styleUrls: ['./player.page.scss'],
})
export class PlayerPage implements OnInit {
#Input() data: any;
stream: any = null;
valueVolume = 50;
constructor( public modalController: ModalController) { }
audio: any;
ngOnInit() {
this.audio = new Audio();
this.audio.src = 'http://tbvr.noip.me:8000/';
this.audio.load();
}
clickButtonMusic() {
}
closeModal() {
this.modalController.dismiss();
}
playAudio() {
this.audio.play();
this.audio.loop = false;
}
stopAudio() {
this.audio.pause();
}
volumen(event) {
this.valueVolume = event.detail.value;
this.stream.volume = this.valueVolume / 100;
}
}
and my player.page.html looks like this :
<ion-header no-border>
<ion-toolbar>
<ion-buttons slot="start" class="chevron">
<ion-button
class=" circle-button ion-no-padding"
fill="clear"
shape="round"
color="default"
(click)="closeModal()"
>
<i class="icon-chevron-down"></i>
</ion-button>
</ion-buttons>
<ion-title> Live Now</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-text-center">
<div class="h-100 vertical-align">
<div
class="image-container"
[ngStyle]="{'background-image': 'url('+ data?.photo +')'}"
></div>
<div class="py">
<h4>{{ data?.title }}</h4>
<p>{{ data?.text }}</p>
</div>
<ion-buttons>
<ion-button
class="media-button circle-button ion-no-padding"
fill="clear"
size="large"
shape="round"
color="default"
>
<i class="icon-share-2"></i>
</ion-button>
<ion-button class="play-button" (click)="playAudio()"></ion-button>
<ion-button class="stop-button" (click)="stopAudio()"></ion-button>
<ion-button
class="media-button circle-button ion-no-padding"
fill="clear"
size="large"
shape="round"
color="default"
>
<i class="icon-star"></i>
</ion-button>
</ion-buttons>
<ion-range
min="0"
max="100"
color="secondary"
[value]="valueVolume"
(ionChange)="volumen($event)"
>
<ion-label slot="start">
<i class="icon-volume-1"></i>
</ion-label>
<ion-label slot="end">
<i class="icon-volume-2"></i>
</ion-label>
</ion-range>
</div>
</ion-content>
Thanks for any help anyone can give me.
Kevin
You can use Ionic Cordova native plugins. These plugins are available in Ionic framework website.Install the plugin and follow the simple instructions provide in the doc for activating the plugin. Some plugins want special permission to work in Ios(eg:Geocoder). So kindly read the doc carefully.
https://ionicframework.com/docs/native/native-audio
Here I am attaching the link of Ionic Native audio player plugin link. Don't forget to import the plugin in app.module.ts file after successfull installation , otherwise it will start to show error like staticInjectError
Managed to get it to play fine.
audio: any; needed moving to onInit
Just that when I hit stop the music stops but seems to still be downloading from the server.
Related
I have a settings screen with 4 radio buttons. If I click on any of the radio button a success message should be displayed and if I click anywhere else the message should be hidden.
Here is the code:
settings.component.html:
<ion-content>
<div class="flex-container">
<ion-card>
<div class="message">
<div class="message-inner" *ngIf="isMessageDisplay">
<ion-icon name="checkmark"></ion-icon>
<p>Success message</p>
</div>
</div>
<div class="home-screen">
<ion-card-header>
<ion-card-title class="ion-text-center">Select the home page to display</ion-card-title>
</ion-card-header>
<ion-card-content class="home-screen-buttons">
<ion-list class="radio-buttons">
<ion-radio-group name="homeButtons"
>
<ion-row>
<ion-col size="6">
<ion-item lines="none">
<ion-label>home 1</ion-label>
<ion-radio [value]="home.home1"
(ionSelect)="home1()"
color="secondary"
></ion-radio>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item lines="none">
<ion-label color="lightgray">home 2</ion-label>
<ion-radio [value]="home.home2"
(ionSelect)="home2()"
color="secondary"
></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-list>
</ion-card-content>
</div>
<div class="products">
<ion-card-header>
<ion-card-title class="ion-text-center">Select the product to display</ion-card-title>
</ion-card-header>
<ion-card-content class="products-buttons">
<ion-list class="radio-buttons">
<ion-radio-group name="productButtons">
<ion-row>
<ion-col size="6">
<ion-item lines="none">
<ion-label>Product 1</ion-label>
<ion-radio [value]="product.product1"
(ionSelect)="product1()"
color="secondary"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item lines="none">
<ion-label color="lightgray">Product 2</ion-label>
<ion-radio [value]="product.product2"
(ionSelect)="product2()"
color="secondary"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-list>
</ion-card-content>
</div>
</ion-card>
</div>
</ion-content>
settings.component.ts:
import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '#angular/core';
import { Store } from '#ngrx/store';
import { Subscription } from 'rxjs';
#Component({
selector: 'app-settings-menu',
templateUrl: './settings-menu.page.html',
styleUrls: ['./settings-menu.page.scss'],
})
export class SettingsMenuPage implements OnInit, OnDestroy {
isMessageDisplay: boolean = false;
subscriptions$: Subscription[] = [];
constructor(
private store: Store<any>,
private elemRef: ElementRef
) {
}
ngOnInit() {
}
#HostListener('document:click', ['$event.target'])
onClickOutside(targetElement) {
const target = this.elemRef.nativeElement.querySelector('ion-radio');
if (targetElement.tagName != target.tagName)
this.isMessageDisplay= false;
}
home1() {
// some other logic
this.isMessageDisplay= true;
}
home2() {
// some other logic
this.isMessageDisplay= true;
}
product1() {
// some other logic
this.isMessageDisplay= true;
}
product2() {
// some other logic
this.isMessageDisplay = true;
}
ngOnDestroy() {
this.subscriptions$.forEach(subscription => subscription.unsubscribe());
}
}
The above code does the task well during development when I run ionic serve command. But once I build the code for browser using ionic cordova build browser --prod --release and deploy it in some server then success message does not toggle right away, it takes much time when I click anywhere else in the screen.
Please help!
The porblem was in the HostListener. Instead of using #HostListener('document:click', ['$event.target']) I used #HostListener('click', ['$event.target']) and removed document. This solved the problem I had during the production. I don't know the exact reason why this happened.
Hi There I have a code for a working back button but it requires adding in a constructor but I already have one can someone suggest how to fix the issue here my code below. I have a Constuctor already that is for my navigating pages, but its not working to have both in at the same time. trying to fix the issue by having them separated by comas but not working. I also need more words to write here for stack overflow im sorry
Thanks
Adam
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { RegformPage } from 'src/app/regform/regform.page';
import { CreditcardPage } from 'src/app/creditcard/creditcard.page';
import {IonRouterOutlet} from '#ionic/angular';
#Component({
selector: 'app-forms',
templateUrl: './forms.page.html',
styleUrls: ['./forms.page.scss'],
})
export class FormsPage implements OnInit {
canGoBack: boolean = false;
constructor(private router: Router,routerOutlet: IonRouterOutlet) { }
ngOnInit() {
this.canGoBack = this.routerOutlet &&
this.routerOutlet.canGoBack();
}
regform(){
this.router.navigate(['/regform']);
}
ccform(){
this.router.navigate(['creditcard']);
}
}
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button *ngIf="canGoBack"></ion-back-button>
</ion-buttons>
<ion-title align="center">Forms</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Registration Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center" (click)="regform()" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Credit Card Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center" (click)="ccform()" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Equipment Rental Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center"class="reg" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title align="center">Field Trip Form</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-button align="center"class="reg" color="primary">Get Started</ion-button>
</ion-card-content>
</ion-card>
ion-back-button Documentation says:
"It is smart enough to know what to render based on the mode and when
to show based on the navigation stack."
You don't need to do that manually. Simply put ion-back-button in your template and it should hide itself when the navigation stack has only 1 page.
Doing it manually:
If the "smart" enough ion-back-button doesn't hide itself automatically, then as a last resot, add the following css to global.scss file.
ion-back-button {
display: none;
}
.can-go-back {
ion-back-button {
display: block !important;
}
}
Ionic framework adds .can-go-back class to the ion-back-button based on the navigation stack.
BACKGROUND:
For some time all the click events were working for my Ionic app, then out of no where they have stopped. I have two floating action buttons that once had working click events; one would trigger a JS alert popup, and the other would open a modal.
These click events no longer work, the only elements that have working click events now are my ion-tab-buttons.
WHAT I HAVE TRIED/TESTED:
I have tried unwrapping these elements out of ion-items and ion-lists, still no change.
A simple ion-button as a replacement, still no change.
Moving the ion-button outside of the card element just below the opening ion-content tag, still no change.
Moving the ion-button outside of the ion-content; just above the tabs, still no change.
Any help is greatly appreciated.
contact.page.html
<ion-header class="navbar">
<div class="icons">
<ion-buttons slot="start">
<ion-menu-button color="tertiary"></ion-menu-button>
</ion-buttons>
<img src="assets/logo.png" />
</div>
</ion-header>
<ion-content text-center>
<ion-card>
<ion-card-header>
<ion-card-title>Contact Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<br>
<ion-card-content>
<ion-label><b>Head Office: Wembley</b>
<br>
Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
DX: 51165 Wembley Park
We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
</ion-label>
<br>
<br>
<ion-list text-left>
<ion-item>
<ion-label>Call us on 0800 3881 0211</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
<ion-icon name="call"></ion-icon>
</ion-fab-button>
</ion-item>
<ion-item>
<ion-label>Email at admin#boutiquesolicitors.co.uk</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
<ion-icon name="mail"></ion-icon>
</ion-fab-button>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="about()">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()">
<ion-icon color="blue" name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button class="activeTab">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
contact.page.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router'
import { CallNumber } from '#ionic-native/call-number/ngx';
import { ModalController, AlertController } from '#ionic/angular';
import { EmailPage } from '../email/email.page';
#Component({
selector: 'app-contact',
templateUrl: './contact.page.html',
styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {
constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }
ngOnInit() {
}
about() {
console.log('clicked about')
this.router.navigate(['members/menu/about'])
}
dashboard() {
console.log('clicked dashboard')
this.router.navigate(['members/menu/dashboard'])
}
async callAlert() {
console.log('method executed')
const callAlert = await this.alertController.create({
message: "Are you sure you want to call Boutique Solicitors?",
buttons: [{
text: "Cancel",
role: "cancel"
},
{
text: "Call",
handler: () => {this.callBS()}
}
]
});
callAlert.present()
}
async callBS() {
this.callNumber.callNumber("07847948252", false)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err))
}
async modalEmail() {
const modal = await this.modalController.create ({
component: EmailPage
});
modal.present();
}
}
Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.
The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.
Tested on both Android and iOS.
Ciao ciao.
The answer provided here is not correct. There is a misunderstanding on how tabs work from OP. Tabs are meant to be full page UI components, and are not meant to be embed in other pages/components. Meaning that they should be the only content in a page.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="ellipse"></ion-icon>
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="square"></ion-icon>
<ion-label>Tab 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This way the tabs are responsible for render the nested content, and events work as expected.
The answer from #mhartington above, is the correct answer. For Angular, tabs should be the page that loads other pages as child modules inside tabs-routing.module.ts.
Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.
The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.
Tested on both Android and iOS.
Ciao ciao.
that's exactly what i am searching thanks
I am new in Ionic2 and Angular2 trying to update my array at front side but its not updating.Moreover its updating perfectly at backend (ts),checked using console. need your help
My Component:
import { Component } from '#angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-modal-filter',
templateUrl: 'modal-filter.html'
})
export class ModalFilterPage {
public fil=[];
public BRANDNAME: any;
public srts:any;
constructor(public nav: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
this.fil = [];
this.srts="ABCD";
if (navParams.get('tabName') == 'filter') {
let data = navParams.get('data');
data.map(d => {
for (let op in d.OPTIONGROUP) {
for (let x in d.OPTIONGROUP[op]) {
if (x != "UPC") {
if (!this.fil[x]) {
this.fil[x] = [];
}
if (this.fil[x].indexOf(d.OPTIONGROUP[op][x]) == -1) {
this.fil[x].push(d.OPTIONGROUP[op][x]);
}
}
}
}
})
console.log(this.fil);
}
}
closeModal() {
// this.nav.pop();
this.viewCtrl.dismiss(true);
}
}
"fil" array not showing on frontside of html but console show its perfectly.
My html code:
fil array not showing
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button (click)="closeModal()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Search Result(105)</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="tab-filter">
<!--filter list-->
<pre>{{fil}}</pre>
<pre>{{srts}}</pre>
<ion-list class="list-no-border">
<ion-item>
<ion-label> PLACE</ion-label>
<ion-select>
<ion-option value="">All Regions</ion-option>
<ion-option value="vn">Vietnam</ion-option>
</ion-select>
</ion-item>
<ion-item class="price-ranger">
<ion-label>Price</ion-label>
<ion-input type="text" placeholder="Min"></ion-input>
-
<ion-input type="text" placeholder="Max"></ion-input>
</ion-item>
<ion-item>
<ion-label>Free shipping</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Once pice only</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sale items</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
<!--Footer buttons-->
<ion-footer class="category">
<ion-toolbar position="bottom">
<ion-buttons end>
<button ion-button (click)="closeModal()">
CANCEL
</button>
<button ion-button (click)="closeModal()">
<span ion-text color="gray">APPLY</span>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
Your {{fil}} is an array yet you are declaring it on the view as a simple property. Angular does not automatically interpret an array with string interpolation.
For arrays you need to use *ngFor
So if you want like you have stated is being displayed in your console.log you could write something like
<div *ngFor="let item of fil">
<ion-item *ngFor="let color of item.COLOR">
{{color.propertyName}}
<ion-item>
<ion-item *ngFor="let size of item.SIZE">
{{color.propertyName}}
<ion-item>
</div>
I resolved my issue by using
this.fil = [];
to
this.fil={}
I'm new with Angular2,Iionic2, NodeJS ... and i'm trying to code some lines to learn. In this "adventure", I wanted to do something like a screen with 3 tabs and a menuToggle. When the app runs, and I click the menuToggle button, in the first tab, it seems to work properly, but in the rest of the tabs, it doesn't. When i click on the button, in the other two tabs, the menuToggle appears, but it does not go away once I try to click on the button, it just does something like move and come back again and stays opened "forever" (the menuToggle).
the TS is:
//import {Page} from 'ionic-angular';
import {Page, NavController, NavParams} from 'ionic-angular';
import {ViewController, Platform} from 'ionic-angular';
import {GitHubService} from '../../services/github.service';
import {Grupo} from '../../datos/grupo';
import {DetalleGrupo} from '../detalle-grupo/detalle-grupo';
#Page({
templateUrl: 'build/pages/list-grupos/list-gruposxl.html',
providers: [GitHubService]
})
class Grupos {
isAndroid: boolean = false;
public grupos: Grupo[];
public selectedGrupo: Grupo;
constructor(platform: Platform,
private nav: NavController,
private github: GitHubService) {
this.isAndroid = platform.is('android');
}
onPageWillEnter() {
//document.getElementById('md-tabs-icon').style.display = "block";
//document.getElementById('md-only').style.display = "none";
}
getGrupos() {
this.github.getGrupos().then(grupos => this.grupos = grupos);
}
ngOnInit() {
this.getGrupos();
}
onSelect(grupo: Grupo) {
this.selectedGrupo = grupo;
console.log('Hola' + grupo.nombre);
this.nav.push(DetalleGrupo, { paramGrupo: grupo});
}
}
#Page({
templateUrl: 'build/pages/list-grupos/stds_usr.html',
})
class Estados_usr {
isAndroid: boolean = false;
constructor(platform: Platform,
private nav: NavController) {
this.isAndroid = platform.is('android');
}
onPageWillEnter() {
//document.getElementById('md-tabs-icon').style.display = "block";
//document.getElementById('md-only').style.display = "none";
}
}
//Chats abiertos del usuario
#Page({
templateUrl: 'build/pages/list-grupos/opened-chats.html',
//providers: [GitHubService]
/* template:
'<ion-navbar *navbar hideBackButton [attr.danger]="isAndroid ? \'\' : null">' +
'<ion-title>Últimas conversaciones</ion-title>' +
'</ion-navbar>' +
'<ion-content>' +
'Chats</ion-content>'*/
})
class Chats_usr {
isAndroid: boolean = false;
constructor(platform: Platform) {
this.isAndroid = platform.is('android');
}
onPageWillEnter() {
//document.getElementById('md-tabs-icon').style.display = "block";
//document.getElementById('md-only').style.display = "none";
}
}
#Page({
template:
'<ion-tabs class="tabs-icon" [attr.danger]="isAndroid ? \'\' : null">' +
'<ion-tab tabIcon="contact" [root]="tabOne"></ion-tab>' +
'<ion-tab tabIcon="calendar" [root]="tabTwo"></ion-tab>' +
'<ion-tab tabIcon="chatbubbles" [root]="tabThree"></ion-tab>' +
'</ion-tabs>',
providers: [GitHubService]
})
export class ListGruposPageXL {
tabOne = Grupos;
tabTwo = Estados_usr;
tabThree = Chats_usr;
isAndroid: boolean = false;
constructor(platform: Platform,
private github: GitHubService,
private nav: NavController) {
this.isAndroid = platform.is('android');
}
onPageWillLeave() {
//document.getElementById('md-tabs-icon').style.display = "none";
//document.getElementById('md-only').style.display = "block";
}
}
<!-- ** list-gruposxl.html**
This is the page where the menut WORKS -->
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
<ion-menu [content]="content" id="leftMenu2" side="right">
<ion-toolbar primary>
<ion-title>Opciones</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item>
Login
</button>
<button ion-item>
Signup
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-navbar *navbar hideBackButton class="show-navbar">
<ion-title>Mis Grupos</ion-title>
<ion-buttons start>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button menuToggle="leftMenu2">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content class="card-background-page">
<ion-list *ngFor="#grupo of grupos"
[class.selected]="grupo === selectedGrupo">
<ion-card>
<img src={{grupo.imagen}}/>
<div class="card-title">{{grupo.nombre}}</div>
<div class="card-subtitle">{{grupo.descripcion}}</div>
<button primary clear item-left>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-card>
</ion-list>
</ion-content>
<!-- **stds_usr**
In this page I have the problem mentioned before -->
<ion-nav id="nav2" #content [root]="rootPage"></ion-nav>
<ion-menu [content]="content" id="leftMenu" side="right">
<ion-toolbar primary>
<ion-title>Opciones</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item>
opcion menu estados 1
</button>
<button ion-item>
opcion menu estados 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-navbar *navbar hideBackButton class="show-navbar">
<ion-title>todos los estados</ion-title>
<ion-buttons start>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content>
Página de Estados
</ion-content>
I'm using Ionic 2.0.0-beta.30 and buttons in the navigation bar just disappear with the menuToggle attribute.
This is my workaround:
constructor(private menu: MenuController) {
menu.enable(true);
}
toggle(){
this.menu.toggle();
}
<button (tap)="toggle()">
<ion-icon name="menu"></ion-icon>
</button>