I am new to ionic4. Before that i try ionic3 in that menu is working proper.
But now i migrate to ionic4.
I just create new project with inbuild menu option. It run successfully in web browser But When I run on my Android mobile device , Menu open but after clicking it did not close.
I use:
Ionic version:5.2.3
Node version:v10.16.3
Cordova version:9.0.0
First attempt:
my app.component.html file:
<ion-app>
<ion-menu type="overlay"side="start" contentId="menu-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngFor="let p of appPages" (click)="togglemenu()">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main id="menu-content"></ion-router-outlet>
</ion-app>
my app.component.ts file:
import { Component } from '#angular/core';
import { Platform,MenuController } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
public menu: MenuController,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
togglemenu(){
this.menu.close();
console.log("clikc");
}
}
Second attempt:
<ion-app>
<ion-split-pane contentId="menu-content" side="start">
<ion-menu type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" *ngFor="let p of appPages">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
Looking at the ion-menu-toggle documentation it states:
"In case it's desired to keep ion-menu-toggle always visible, the autoHide property can be set to false."
https://ionicframework.com/docs/api/menu-toggle
It looks like you have this set to false. You can remove auto-hide="false" because it defaults to true.
Related
Well, i have a problem with design in ionic 4 with Pop Over Component...
Thanks for you time.
I do the following.
App.Module
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
AppRoutingModule,
PopoverLogoPageModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
TS
import { PopoverLogoPage } from '../PopOvers/popover-logo/popover-logo.page';
import { PopoverController } from '#ionic/angular';
constructor(public popoverController: PopoverController)
{}
async presentPopover(ev: any) {
const popoverElement = await this.popoverController.create({
component: PopoverLogoPage,
event: ev,
translucent: true
});
return await popoverElement.present();
}
Html
<ion-toolbar>
<ion-title>
Bienvenido
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="presentPopover()">
<ion-icon size="large" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I want my popover to be show under my button , but this is presented in the middle.
What all you need to do is just pass $event in your presentPopover method like -
<ion-button (click)="presentPopover($event)">
<ion-icon size="large" name="contact"></ion-icon>
</ion-button>
I hope it will solve your problem...
I am using Ionic 4, I want to do different menu content in different page. I have add menuId inside my code, but I only get the second page menu. My first page menu is missing.
I think you should build 1 menu and then just populate its page list depending on the page being visited.
So your code would look something like this:
import { Component, OnInit } from '#angular/core';
import { Router, RouterEvent } from '#angular/router';
#Component({
selector: 'app-menu',
templateUrl: './menu.page.html',
styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {
selectedPath = '';
pages = getPages();
constructor(private router: Router) {
this.router.events.subscribe((event: RouterEvent) => {
if (event && event.url) {
this.selectedPath = event.url;
}
});
}
getPages() : any[] {
if (this.router.url === '/page1') {
return [
{
title: 'First Page with Tabs',
url: '/menu/first'
},
{
title: 'Second Page blank',
url: '/menu/second'
}
];
}
if (this.router.url === '/page2') {
return [
{
title: 'First Page with Tabs',
url: '/menu/first'
},
{
title: 'Second Page blank',
url: '/menu/second'
}
];
}
}
ngOnInit() {
}
}
And then display it like this:
<ion-split-pane>
<ion-menu contentId="content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath.startsWith(p.url)">
<ion-label>
{{ p.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item tappable routerLink="/login" routerDirection="root">
<ion-icon name="log-out" slot="start"></ion-icon>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
Full tutorial about setting up a menu like this is available here:
How to Combine Ionic 4 Tabs and Side Menu Navigation [v4] - Ionic AcademyIonic Academy
Although the code I used as an example above for get getPages() is the bit you would write yourself.
I tried installing npm i -S #ionic-super-tabs/angular , which doesn’t work in Ionic 4. Please let me know if there any way to do this
Yes, there is a way to achieve this.
page.ts
import { Component, ViewChild } from '#angular/core';
import { IonSlides } from '#ionic/angular';
#Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
#ViewChild('slider') slider: IonSlides;
page = "0";
selectedTab(index) {
this.slider.slideTo(index);
}
async moveButton() {
let index = await this.slider.getActiveIndex();
this.page = index.toString();
// console.log("0")
}
segmentChanged(ev: any) {
// console.log('Segment changed', ev);
}
}
page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Notifications</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="page">
<ion-segment-button value="0" (click)="selectedTab(0)">
<ion-label>All</ion-label>
</ion-segment-button>
<ion-segment-button value="1" (click)="selectedTab(1)">
<ion-label>Mentions</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides #slider (ionSlideWillChange)="moveButton()">
<ion-slide>
<ion-label>All</ion-label>
</ion-slide>
<ion-slide>
<ion-label>Mentions</ion-label>
</ion-slide>
</ion-slides>
</ion-content>
Segment work as swipeable tabs, Hope it help you :)
Please help me understand how to pass an imported single file vue component inside a vue-grid-layout item.
I know how to pass simple html, like here:
https://jsfiddle.net/gmsa/jw2mmmpq/1/
But I need to insert other components with buttons and axios calls, etc
HTML:
<template>
<div class="hello">
<grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<div v-html="item.c">
</div>
<Test></Test>
</grid-item>
</grid-layout>
</div>
</template>
JS:
import VueGridLayout from 'vue-grid-layout';
import Test from './test.vue';
import Test from './test2.vue';
let a = `This needs to be another component, like Test`;
let b = `This needs to be another component, like Test2`;
var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0", "c": a},
{"x":2,"y":0,"w":2,"h":4,"i":"1", "c": b}
];
export default {
name: 'HelloWorld',
props: {
msg: String
},
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
Test,
Test2
},
data: function (){
return {
layout: testLayout
}
}
}
Cannot find any ideas here:
https://github.com/jbaysolutions/vue-grid-layout
You want dynamic components, which can be done using the <component :is="component"></component> syntax. If all of the items you wish to display are components, you could do something like this:
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<component :is="item.c"></component>
</grid-item>
And the JavaScript:
import VueGridLayout from 'vue-grid-layout';
import Test from './test.vue';
import Test2 from './test2.vue';
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
Test,
Test2
},
data: function (){
return {
layout: [
{"x":0,"y":0,"w":2,"h":2,"i":"0", "c": 'Test'}, // component name used but you could also use a reference to the component
{"x":2,"y":0,"w":2,"h":4,"i":"1", "c": 'Test2'}
];
}
}
}
If only some of the items will be components and some are plain HTML, you could perhaps flag which are components in the layout array:
layout: [
{"x":0,"y":0,"w":2,"h":2,"i":"0", "c": 'Test', isComponent: true},
{"x":2,"y":0,"w":2,"h":4,"i":"1", "c": '<h1>Hello World</h1>', isComponent: false}
];
And then conditionally render the component or plain HTML in the grid-item slot.
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<template>
<component v-if="item.isComponent" :is="item.c"></component>
<div v-else v-html="item.c"></div>
</template>
</grid-item>
I will create a shopping app using ionic 2. In the products details I have created a stepper for increment and decrement value of quantity.
How can I get the input value within ionic 2 in my Component?
Solution:
1- app/pages/index.html
In Angular 2, you should use ngModel in the template.
<ion-header>
<ion-navbar primary>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item>
<button lightgray full (click)="incrementQty()">+</button>
<ion-item>
<ion-input type="number" min="1" [value]="qty" [(ngModel)]="qty"></ion-input>
</ion-item>
<button lightgray full (click)="decrementQty()">-</button>
</ion-item>
</ion-content>
2- app/pages/index.ts
import { Component} from '#angular/core';
import { NavController, Slides} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/titlepage/titlepage.html',
})
export class titlePage {
qty:any;
constructor(private nav: NavController) {
this.qty = 1;
}
// increment product qty
incrementQty() {
console.log(this.qty+1);
this.qty += 1;
}
// decrement product qty
decrementQty() {
if(this.qty-1 < 1 ){
this.qty = 1
console.log('1->'+this.qty);
}else{
this.qty -= 1;
console.log('2->'+this.qty);
}
}
}
Or as an alternative solution you may use the more appropriate Form controls designed for angular 2. (learn more here )
Example:
Typescript
import {Component, Input} from '#angular/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl} from '#angular/common';
import {IONIC_DIRECTIVES} from 'ionic-angular';
#Component({
selector: 'chat-form',
templateUrl: '/client/components/chat-form/chat-form.html',
directives: [IONIC_DIRECTIVES, FORM_DIRECTIVES],
pipes: [],
styleUrls: []
})
export class ChatFormComponent {
chatForm:ControlGroup;
messageInput:AbstractControl;
constructor(private translate:TranslateService, private formBuilder:FormBuilder) {
this.chatForm = formBuilder.group({messageInput: ['']})
this.messageInput = this.chatForm.controls['messageInput'];
}
sendMessage() {
console.log('sendMessage: ', this.messageInput.value);
}
}
Template
<form [ngFormModel]="chatForm" (ngSubmit)="sendMessage()">
<ion-input type="text" [ngFormControl]="messageInput" placeholder="{{'chat.form.placeholder' | translate }}"></ion-input>
<button fab>
<ion-icon name="send"></ion-icon>
</button>
</form>