I have a tab navigation under the header on my subview, so i wrote the following html:
<ion-header>
<ion-navbar primary>
<ion-title>Productos</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs tabsPlacement="top">
<ion-tab tabTitle="Catalogo"></ion-tab>
<ion-tab tabTitle="Pedido"></ion-tab>
</ion-tabs>
<ion-content padding>Foo !!</ion-content>
The navbar and the "Foo !!" are displayed but, not the tabs. Any ideas ?
I was wrong. The ion-tabs must be have your own component:
import { Component } from '#angular/core';
import { ProductCatalog } from './catalog.component';
import { ProductCart } from './cart.component';
#Component({
templateUrl: 'tabs.html'
})
export class ProductTabs {
catalog:any = ProductCatalog;
cart:any = ProductCart;
constructor() {}
}
<!-- tabs.html only tabs widget -->
<ion-tabs tabsPlacement="top">
<ion-tab [root]="catalog" tabTitle="CATALOGO"></ion-tab>
<ion-tab [root]="cart" tabTitle="CARRITO"></ion-tab>
</ion-tabs>
ProductCatalog and ProductCart are two normal pages.
Related
my ionic 5 app has a side menu and tabs. Each page can have different contents for the side menu and the tabs. I don't want to be duplicating the ion-menu in each page so I created a header component like so (I also do one for the tabs):
HEADER COMPONENT:
<ion-menu contentId="content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{pageObj.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let page of pageObj.pages">
<ion-item [routerLink]="page.url" routerDirection="root" [class.active-item]="selectedPath.startWith(page.url)">
<ion-icon>{{page.icon}}</ion-icon>
<ion-label>
{{page.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
Now I use this header component in app.component.html like so:
<ion-app>
<ion-split-pane>
<app-header></app-header>
<ion-router-outlet id="content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
And app.component.ts:
...........
.........
export class AppComponent {
pageObj: any = '';
selectedPath = '';
pages = [
{
title: 'Become a Member',
url: '/pages/membership'
},
{
title: 'Make a Posts',
url: '/pages/posts'
}
]
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router: Router
) {
this.initializeApp();
this.pageObj.title = 'Menu';
this.pageObj.pages = this.pages;
this.router.events.subscribe((event:RouterEvent) => {
if (event && event.url) {
this.selectedPath = event.url;
}
})
}
.........
........
So the problem is requires variables (pageObg) that exist in app.component.ts. I am not sure how to pass those variables? I believe I can do something like this:
<app-header [pageObj]="pageObj"><app-header>
but I am not sure how this works! Is there a better way to achieve what I am trying to do?
You are on the right path, but that is not enough. You need to create the corresponding #Input pageObj property in the child component's class. That should be sufficient in your case.
This is the comprehensive guide on Component Interaction, please refer to the first section on "input binding" at this link: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
I'm working on IONIC and I'm trying to do a "dynamic" side menu.
My problem is to call a method from the side-menu "component".
Well there is no problem to call it if the method was in the "TS file" related to the "HTML file" like this <ion-label (click)="onSearch()"> But the method onSearch() is not in the "TS file" related to the "HTML file". Let me explain...
The side-menu as been made like this:
in app.component.html
<ion-app>
<app-side-menu></app-side-menu>
<ion-router-outlet id="mainContent" main></ion-router-outlet>
</ion-app>
in the side-menu.html component
<ion-menu slide="start" type="overlay" contentId="mainContent" menuId="slidingMenu1" id="slidingMenu1">
<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">
<ion-item>
<ion-icon name="Search" color="primary" slot="start"></ion-icon>
<ion-label (click)="onSearch()">
Search
</ion-label>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
and I have a service, CoreMenuService, that call the side-menu, like this :
constructor(public menu: MenuController) { }
// Toggle the Menu1 and hide the one you do not need
public toggleMenu1() {
this.menu.enable(true, 'slidingMenu1');
this.menu.toggle('slidingMenu1');
then in the page I need I will call the side menu:
HTML File
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="onOpenMenu()"><ion-icon name="menu"></ion-icon></ion-button>
</ion-buttons>
<ion-title>person</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p class="ion-padding">It's the Person page</p>
</ion-content>
TS File where I want use the method trigger by the side-menu
export class PersonPage implements OnInit {
constructor( public menu: CoreMenuService ) {}
ngOnInit() {}
onOpenMenu() {
this.menu.toggleMenu();
}
onShare() {
console.log('shared');
}
}
So how can I use the method declared in the PersonPage.ts, onShare() from the side-menu component ?
I hope it's clear for you, and that you understand me well. :)
There is the source code if you need it to understand better :
Code
Thanks for your help
Try this
In your side menu component.ts you can do something like:
import { PersonPage } from './../../pages/person/person.page';
export class SideMenuComponent implements OnInit , OnDestroy {
onShare() {
const personPage = new PersonPage(null);
personPage.onShare();
}
}
I am trying to get the button when clicked on to go to a second page in the app but I cannot figure out how to do so. (I am new to Ionic but have been stuck on this for hours)
This is the HTML in home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>
The God Taco
</ion-title>
<ion-buttons end>
<button (click)="gotoAbout()">
About
<ion-icon name="information-circle-outline"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
This is the code in home.page.ts:
import { Component } from '#angular/core';
import { ToastController } from '#ionic/angular';
import { NavController } from '#ionic/angular';
import { AboutPage } from './about.page';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
gotoAbout() {
this.navCtrl.push('AboutPage');
}
Also the folders look like this:
![1]
[link]https://imgur.com/a/fXKxs6D
ERROR in src/app/home/home.page.ts(4,27): error TS2307: Cannot find module './about.page'.
[ng] src/app/home/home.page.ts(12,1): error TS2304: Cannot find name 'gotoAbout'.
When the recompiling this is the error in the terminal.
If you are using Ionic 4 :
You can also redirect it directly in html file :
<ion-button routerLink="/AboutPage"><ion-button>
or another way :
visit this link:
If you're using Ionic 4:
constuctor(private router: Router){}
goToAbout(){
this.router.navigate(['/AboutPage']);
}
Where AboutPage should be the name of the page as defined by the path label in your app-routing.module.ts
I am making a custom map in my application. Which is essentially a large map image where I move a small avatar image over the large map image based on a gps location.
I allow the user to scroll around the map to look at places off the screen.
I now want to include a button which will center the user back on their location. but it is not working, I have tried using:
window.moveTo()
window.scrollTo()
but nothing happens. Can anyone assist with this?
html
<ion-content padding id=ionScroll scrollX="true" scrollY="true">
<div id = "main" >
<img class = "map"
id = "map"
src = "../../assets/img/limerickmap.JPG"
alt = "map"/>
<img class = "avatar"
id = "avatar"
src = "../../assets/img/satan.png"
alt = "avatar" />
</div>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click) = "centreMap()">
<ion-icon name="compass"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
Typescript
ngOnInit() {
ionScroll = window.document.getElementById("ionScroll");
}
centreMap() {
ionScroll.scrollTo(avatar.style.left , avatar.style.top);
console.log("TEST scroll" +avatar.style.left+" "+avatar.style.top)
}
Trying to set the id isn't the right way I don't think.
Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.
First, you need scrollEvents on the ion-content:
<ion-header>
<ion-toolbar>
<ion-title>
Ion Content Scroll
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [scrollEvents]="true">
<div style="height: 50px;width:600px;" text-right>
<ion-button (click)="ScrollToPoint(-300, -120)">
Scroll To Point Right
</ion-button>
</div>
</ion-content>
In the code you need to use a #ViewChild to get a code reference to the ion-content then you can use its ScrollToPoint() api:
import { Component, ViewChild } from '#angular/core';
import { IonContent } from '#ionic/angular';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
#ViewChild(IonContent) content: IonContent;
constructor(
){
}
ScrollToPoint(X,Y){
this.content.scrollToPoint(X,Y,1500);
}
}
I've simplified the article so you will need to put some content in that adds scrollbars to the page if you want this to actually work.
I try to pass a method with (click)="method()" but is not working in tabs ,
can anybody help me ?
This is my tab.html :
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Carro" tabIcon="cart" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Perfil" tabIcon="md-person" (click)="method()"></ion-tab>
</ion-tabs>
In order to call a method when tapping on a tab you can use the ionSelect on the tab element like this.
Template
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>
Component
export class Tabs {
constructor(public modalCtrl: ModalController) {
}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}
You can check more on the Ionic Api Page.