pardon if it's a simple issue to solve or it has already been solved here. But, I just can not figure it out. The issue is, I have two tabs. While in the content page if I call content.scrollToTop() then it works fine. But, I am not sure about how to scroll to the top of a tab content page when the tab is clicked or selected?
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home" **(click)="scrollToTop()"**>
<ion-label>Home</ion-label>
<ion-icon name="home"></ion-icon>
<!-- <ion-badge>6</ion-badge> -->
</ion-tab-button>
<ion-tab-button tab="tab1">
<ion-label>About</ion-label>
<ion-icon name="information-circle"></ion-icon>
</ion-tab-button>
<!-- <ion-tab-button tab="tab2">
<ion-label>Profile</ion-label>
<ion-icon name="settings"></ion-icon>
</ion-tab-button> -->
</ion-tab-bar>
import { Component, OnInit , ViewChild } from '#angular/core';
import { Events } from '#ionic/angular';
import { IonContent } from '#ionic/angular';
#Component({
selector: 'app-tabs',
templateUrl: './tabs.page.html',
styleUrls: ['./tabs.page.scss'],
})
export class TabsPage implements OnInit {
#ViewChild(IonContent) content: IonContent;
constructor( public event:Events) { }
scrollToTop(){
this.content.scrollToTop();
}
}
you can keep separate method
<ion-tabs>
<ion-tab [root]="tab1Root" (click)="myMethod()"></ion-tab>
<ion-tab [root]="tab2Root" (click)="myMethod2()"></ion-tab>
<ion-tab [root]="tab3Root" (click)="myMethod3()"></ion-tab>
</ion-tabs>
then write your logic
myMethod()
{
this.content.scrollToTop();
}
What you need to do is use the ionViewWillEnter event which can be explained further in the Ionic Page Life Cycle documentation:
Ionic Page Life Cycle - Ionic Documentation
If your page was tabs2 then the code could look like this:
import { Component, OnInit, ViewChild } from '#angular/core';
import { IonContent } from '#ionic/angular';
#Component({
selector: 'app-tab2',
templateUrl: './tab2.page.html',
styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {
#ViewChild(IonContent) private content: IonContent;
constructor() { }
ngOnInit() {
}
ionViewWillEnter() {
this.content.scrollToTop();
}
}
Related
I'm new in Ionic Framework, and I'm using version 3 to build a simple application that redirects the user to an .html page after logging in. I've edited the home.ts file to make the log in possible, and I've built a test .html called index.html, in the folder "pages/home" inside the ionic project, but I'm getting an error when I try to conned the "submit" button to this index.html page:
Code in home.html
<ion-header>
<ion-navbar>
<ion-title>
Login
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list no-lines>
<ion-item>
<ion-label floating>User</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Senha</ion-label>
<ion-input type="text" [(ngModel)]="password"></ion-input>
</ion-item>
<button block ion-button block (click)="signIn()">Sign in</button>
</ion-list>
</ion-content>
Code in home.ts
import { Component } from '#angular/core';
import { NavController, AlertController, IonicPage } from 'ionic-angular';
import { index } from 'c:/Ionic/task-1/src/pages/home/index.html';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public username : any = '';
public password : any = '';
constructor(public navCtrl: NavController, public alertCtrl: AlertController)
{
}
signIn() {
this.navCtrl.push('index.html');
}
}
The code in index.html
<ion-header>
<ion-navbar>
<ion-title>
Login
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Testing HTML page redirect</p>
</ion-list>
</ion-content>
The error: https://i.stack.imgur.com/vRivh.png
What could I do?
In ionic 3 you can navigate through pages using NavController.You should create a component that you want to route.
For that you have to import the component(page)
HTML file
<button block ion-button block (click)="signIn()">Sign in</button>
TS file
import { NavController } from 'ionic-angular';
import { StartPage } from './start-page';
#Component(
selector: 'app-home',
templateUrl: 'home.html'
})
class HomePage {
constructor(public navCtrl: NavController){}
signIn() {
this.navCtrl.push(StartPage);
}
}
Refer NavController documentation in ionic
check here
In home.ts file :
import { Component } from '#angular/core';
import { NavController, AlertController, IonicPage } from 'ionic-angular';
import { IndexPage} from '../index/index';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public username : any = '';
public password : any = '';
constructor(public navCtrl: NavController, public alertCtrl: AlertController){}
signIn() {
this.navCtrl.push(IndexPage);
}
}
I have an ionic4 app that I retrieve some photo from firebase storage and show it on html page in my app, now I just could showed the photo in a console and I couldn't showed it on a page.
Can someone help me that how can I display a photo on html page please.
My code is below
home.page.ts
import { Component } from '#angular/core';
import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
storageRef: AngularFireStorageReference;
constructor(private afStorage: AngularFireStorage) { }
display() {
this.storageRef = this.afStorage.ref('rasool/download2.jpg');
this.storageRef.getDownloadURL().subscribe(url => console.log(url));
}
}
home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>its work sir</p>
<ion-button (click)="display()">click me</ion-button>
</ion-content>
// home.page.ts
import { Component } from '#angular/core';
import { AngularFireStorage, AngularFireStorageReference } from 'angularfire2/storage';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
storageRef: AngularFireStorageReference;
public imageUrl = '';
constructor(private afStorage: AngularFireStorage) { }
display() {
this.storageRef = this.afStorage.ref('rasool/download2.jpg');
this.storageRef.getDownloadURL().subscribe(url => this.imageUrl = url);
}
}
// home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<p>its work sir</p>
<img src="{{imageUrl}}" />
<ion-button (click)="display()">click me</ion-button>
</ion-content>`enter code here`
I'm new to ionic. I have a component called firstPage, this has a normal html view.
<ion-header>
<ion-navbar >
<ion-title align="center">first.</ion-title>
</ion-navbar>
</ion-header>
<button ion-button
block
color="primary"
[navPush]="second">
Ir página 2 navPush.
</button>
</ion-content>
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { secondPage} from '../index.paginas';
#Component({
selector: 'page-first',
templateUrl: 'first.html',
})
export class firstPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
second:any=secondPage;
}
and I have another component called secondPage.
<ion-header>
<ion-navbar>
<ion-title align-title="center">second</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
<!--<page-tabs></page-tabs>-->
</ion-content>
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { firstPage, Tab1Page,Tab2Page} from '../index.paginas';
#Component({
selector: 'page-second',
templateUrl: 'second.html',
})
export class secondPage {
Tab1Page,Tab2Page // are the component that has html and .ts
tab1: any;
tab2: any;
constructor() {
this.tab1 = Tab1Page;
this.tab2 = Tab2Page;
}
}
firstPage has a button to navigate directly to secondPage, but I want SecondPage to contain :
<ion-tabs color="primary" selectedIndex="1">
<ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1">tab1</ion-tab>
<ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab2">tab2</ion-tab>
</ion-tabs>
I want the second page to load the tabs only in this view
how can I do it?
Add tabs to second-page.html.
<ion-tabs color="primary" selectedIndex="1">
<ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1"></ion-tab>
<ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab1"></ion-tab>
</ion-tabs>
Your SecondPage.ts class is OK. Only thing you need to do is add below code to your html which related with your Tab2Page.ts.
<ion-content padding>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
</ion-content>
I created a demo for you. find it here
I am developing an IONIC-3 application, whether I want a dynamic nav bar with a title and a common button. For this reason, I have created a .ts file named
commonBtn.ts. Here is the code.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
#Component({
selector: 'common-button',
templateUrl: 'commonBtn.html'
})
export class CommonBtnPage {
constructor(public navCtrl: NavController) { }
logOut() {
this.navCtrl.setRoot(LoginPage);
}
}
And its html is :-
<ion-header>
<ion-navbar>
<ion-title> I want to create a dynamic name </ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Now, my question is that, How may I change the title name dynamically means when user come into "Home Page", title will be "Home" or user come into "About" page, title will be "About".
We can manage this in ionic v1 via $rootScope but here in Ionic v3, how can I resolve this ?
Also I am giving the html of Home page
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
<common-button></common-button>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click) = 'clickHere()'> Click </button>
</ion-content>
Please suggest me what to do.
Generally, you need to use Input decorator. Check Component Interactions.
In CommonBtnPage,
import { Component,Input } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
#Component({
selector: 'common-button',
templateUrl: 'commonBtn.html'
})
export class CommonBtnPage {
#Input()title:string;//here
constructor(public navCtrl: NavController) { }
logOut() {
this.navCtrl.setRoot(LoginPage);
}
}
In the html, set the title,
<ion-header>
<ion-navbar>
<ion-title>{{title}}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
You can set the component and send the title as:
<common-button [title]="'home'"></common-button>
Having had some experience with Angular 1.x (but not Ionic 1.x), I am now trying to develop a small mobile app using Ionic 2, which is based on Angular 2.
I am familiar with URL-based routing principles such as those used in ui-router. The concept in Ionic 2 is different and is based on pushing/popping pages on top of a root page.
So far I have managed to create 2 pages (Search and Person) with a nav bar on top, and to navigate from one to the other, and back. The navbar has a button to return to the root (Search) page (because later it will be possible to navigate from a person to other pages, further away from the root page).
However I could not figure out how to extract the navbar and navbar controller in a separate file. So the markup and the button handler (goToSearch) are repeated in every page.
How can I extract the navbar template and logic so as not to repeat it ?
Bonus question (and strongly related) : Can someone explain the difference between the ion-nav in app.html and the ion-navbar in the pages ?
app.ts :
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {Search} from './pages/search/search'
#App({
templateUrl: 'build/pages/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = Search;
constructor(platform: Platform) {
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();
});
}
}
app.html :
<ion-nav [root]="rootPage">
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-nav>
search.ts :
import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Person} from '../person/person'
#Page({
templateUrl: 'build/pages/search/search.html',
})
export class Search {
nav:Nav;
constructor(nav:Nav) {
this.nav = nav;
}
goToPerson() {
this.nav.push(Person);
}
}
search.html:
<ion-navbar *navbar>
<ion-title>Search</ion-title>
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to SEARCH</h2>
<button (click)="goToPerson()">Go to person</button>
</ion-content>
person.ts :
import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Search} from '../search/search'
#Page({
templateUrl: 'build/pages/person/person.html',
})
export class Person {
nav:Nav;
constructor(nav:Nav) {
this.nav = nav;
}
goToSearch() {
this.nav.push(Search);
}
}
person.html :
<ion-navbar *navbar>
<ion-title>Person</ion-title>
<ion-buttons end>
<button (click)="goToSearch()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to PERSON</h2>
<button (click)="goToSearch()">Go to search</button>
</ion-content>
you could create a component to hold your header config, components are reusable and can be very dynamic, just dont forget to import it on your module
default-header.html
<ion-navbar *navbar>
<ion-title>{{pageTitle}}</ion-title>
<ion-buttons end>
<button (click)="goToSearch()">
<ion-icon name="{{icon}}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
default-header.ts
import { Component, Input, Inject, ViewChild } from "#angular/core";
import { Content } from "ionic-angular";
import { NavController } from "ionic-angular/navigation/nav-controller";
import {Person} from '../person/person'
#Component({
selector: "default-header",
templateUrl: "default-header.html"
})
export class DefaultHeaderComponent {
#Input() pageTitle: any;
#Input() icon= true;
#ViewChild(Content) content: Content;
constructor(
public navCtrl: NavController,
) {
console.log("Hello DefaultHeaderComponent Component");
}
ionViewDidLoad() {
const self = this;
}
gotNotificationsPage() {
this.global.setRoot("NotificationsPage");
}
}
and call it in the place of your navbar like this in any page
<default-header [title]="'Person'" [icon]="'search'"></default-header>