I am using Ionic 2.
I have a page, that scrolls perfectly when I navigate to the page from another page. However, when I navigate to the page from a Popover, the page displays, but I am unable to scroll.
Any ideas please?
Navigate to page from Popover and other page is the same:
this.nav.push(CategoryPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
page:
<ion-header>
<ion-navbar>
<ion-title>{{categoryModel.name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<center>
<ion-spinner icon="android" *ngIf="loading"></ion-spinner>
<div class="category-text animate-show">
<div class="select-text" *ngIf="getSelected().length === 0">Select the Roles</div>
<p class="item-selected-row" *ngFor="let subcategory of getSelected()">
<img class="item-stable" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" (click)="toggleItem(subcategory)"/>
</p>
</div>
</center>
<ion-row *ngFor="let trio of getTriples()">
<ion-col *ngFor="let item of trio">
<center>
<div class="row responsive-md">
{{ formatSubCategories(item) }}
<img class="item-stable-large" id="icon-image-{{item.id}}" src="{{item.icon}}" (click)="toggleItem(item)"
[class.item-selected]="isSubCategoryModelItemInArray(item) > -1" />
<p>{{item.name}}</p>
</div>
</center>
</ion-col>
</ion-row>
<ion-buttons>
<button (click)="next()" block round class="form-button-text">Next</button>
</ion-buttons>
</ion-content>
popover
import {Component, ViewChild, ElementRef} from '#angular/core';
import {App, PopoverController, NavController, Content, NavParams} from 'ionic-angular';
import {NgForm} from '#angular/forms'
import { MapPage } from '../map/map';
import { CategoryPage } from '../category/category';
import { EmployeeModel } from '../model/employeeModel';
#Component({
template: `
<ion-content padding id="search-popover">
<ion-list>
<ion-row>
<ion-col>
<center>
<div id="pinButton"><button class="search-popover-button" (click)="presentFilterMap()" danger><ion-icon class="search-popover-icon" name="pin"></ion-icon></button></div>
<p>Location</p>
</center>
</ion-col>
<ion-col>
<center>
<div id="pinButton"><button class="search-popover-button" (click)="presentFilterCategories()" primary><ion-icon class="search-popover-icon" name="happy"></ion-icon></button></div>
<p>Sectors</p>
</center>
</ion-col>
</ion-row>
</ion-list>
</ion-content>
`
})
export class SearchPopOverPage {
private nav: NavController = null;
private employeeModel: EmployeeModel = null;
constructor(private navParams: NavParams, nav: NavController) {
this.nav = nav;
this.employeeModel = navParams.get('employeeModel');
}
ngOnInit() {
}
presentFilterMap(event: Event) {
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
}
presentFilterCategories(event: Event) {
this.nav.push(CategoryPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
}
}
Here is the solution.
presentFilterCategories(event: Event) {
this.viewCtrl.dismiss().then(() => {
this.nav.push(CategoryPage, {
ev: event,
employeeModel: this.employeeModel,
fromSearch: true
})
});
}
Related
I'm trying to show an element on my page when a textbox is focused.
HTML
<ion-header>
<ion-navbar color="primary">
</ion-navbar>
<ion-toolbar>
<ion-row >
<ion-col>
<ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
</ion-col>
<ion-col col-2>
<ion-icon (click)="searchCustomer()" ion-item name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<p align="right" *ngIf="searchInput.length > 0">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
</ion-toolbar>
</ion-header>
JavaScript
export class AppHomePage {
searchInput: any;
searchResults: any;
constructor(public navCtrl: NavController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
public http: Http,
public alertCtrl: AlertController) {
this.searchResults = [];
}
}
With my script when the page loads i get this error:
Cannot read property 'length' of undefined
Option 1:
If you haven't initialised seachInput = '' then do it first.
Option 2: User (input) event and get length when user enter any data into text box.
<ion-searchbar placeholder="Search Account Number" (input)="getSeachData($event)" [(ngModel)]="searchInput"> </ion-searchbar>
In your .ts file.
// First set variable above constructor.
searchFlag : boolen = false;
getSeachData(event){
this.searchFlag = true ? event.target.value.length > 0 : false;
}
In your HTML file.
<p align="right" *ngIf="searchFlag">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
In this way you can do what you want. But Still I suggest to go with the first option. If it's not work well then go with second option.
Hope for the best.
You could use ionFocus event to achieve what you want.
HTML
<ion-header>
<ion-navbar color="primary">
</ion-navbar>
<ion-toolbar>
<ion-row >
<ion-col>
<ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
</ion-col>
<ion-col col-2>
<ion-icon (click)="searchCustomer()" (ionFocus)="showSwitchAdvanceSearch()" ion-item name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<p align="right" *ngIf="showSwitchAdvanceSearch">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
</ion-toolbar>
</ion-header>
Typescript
export class AppHomePage {
searchInput: any;
searchResults: any;
showSwitchAdvanceSearch = false;
constructor(public navCtrl: NavController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
public http: Http,
public alertCtrl: AlertController) {
this.searchResults = [];
}
showSwitchAdvanceSearch() {
this.displaySwitchAdvanceSearch = true;
}
}
I'm trying to create a scrollTop button on ionic 3 but it's not working, can someone give me a hint of what I'm doing wrong? How do I proceed to add the scrollTop in the fab ion
This is my code home.ts
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams, ToastController, Content }
from 'ionic-angular';
import { AngularFireAuth } from "angularfire2/auth";
import { MenuController } from "ionic-angular";
import { PrediosPage } from '../predios/predios';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
#ViewChild('pageTop') pageTop: Content;
public pageScroller(){
this.pageTop.scrollToTop();
}
searchQuery: string = '';
items: any[];
constructor(private afAuth: AngularFireAuth, private toast:
ToastController,
public navCtrl: NavController, public navParams: NavParams, public menu:
MenuController) {
this.initializeItems();
}
And this is my home.html
<ion-content #pageTop>
<div paddign>
<ion-searchbar (ionInput)="getItems($event)" placeholder="Pesquisar">
</ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-thumbnail item-left>
<img [src]="item.imagem">
</ion-thumbnail>
<h2 style="color:#886AEA">{{ item?.nome }}</h2>
<p>Rua: {{ item?.rua }} - {{ item?.numero }}</p>
</ion-item>
</ion-list>
</div>
<ion-fab right bottom>
<button ion-fab color="darkroyal" (click)="pageTop"><ion-icon name="ios-arrow-up"></ion-icon></button>
</ion-fab>
And this is my home app image
You have to change the following line:
#ViewChild(Content) pageTop: Content;
And, you have to change the click function name on your button on html to that one you have created to make the page scroll to top:
<ion-fab right bottom>
<button ion-fab color="darkroyal" (click)="pageScroller()">
<ion-icon name="ios-arrow-up"></ion-icon></button>
</ion-fab>
I have ionic page that have an image with 100% width and 100% height, I want to change the image source when I click on it.
this is the html source :
<ion-content>
<ion-img class="map" src="img/map.jpg" (click)="changeView()"></ion-img>
<ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
<ion-icon class="icon-heart" name="md-heart"></ion-icon>
<ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
<ion-fab top right>
<button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
</ion-fab>
<ion-fab top left>
<ion-searchbar> </ion-searchbar>
</ion-fab>
<ion-fab bottom right class="fablocate">
<button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
</ion-fab>
<ion-fab (click)="ListParrots();" bottom left class="linklist">
<ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
</ion-fab>
</ion-content>
ts source code is below :
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';
/**
* Generated class for the MapPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class MapPage {
images: String[] = Array("img//map.jpg", "img/map1.jpg");
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
changeView(){
}
ionViewDidLoad() {
console.log('ionViewDidLoad MapPage');
}
ListParrots(){
this.navCtrl.push(ParrotListPage);
}
}
can some one help please to complete all the function? thank !
Change your template:
<ion-img class="map" [src]="picToView" (click)="changeView()"></ion-img>
And declare a variable in the class:
picToView:string="img/map.jpg"; // always instatiate with a valid value
And changeView:
changeView(){
this.picToView=.....
}
Regards
Tom
So I'm building an app in Ionic 2 and I have a function to access the camera, but for some reason it's not working and the function doesn't even execute properly.
Below are the relevant HTML and JS files, as well as screenshots of the console log. Any help is very much appreciated!
app.html
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ngFor="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<ion-slides style="height: 50vh">
<ion-slide *ngFor="#image of images">
<ion-card>
<img [src]="image.src"/>
</ion-card>
</ion-slide>
</ion-slides>
</ion-list>
</ion-content>
</ion-menu>
<button fab primary fab-bottom fab-center (click)=takePicture() style="z-index: 999">
<ion-icon name="camera"></ion-icon>
</button>
<script src="camera.js" type="text/javascript"></script>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
camera.js
import {Page} from 'ionic-angular';
import {NgZone} from 'angular2/core';
import {Camera} from 'ionic-native';
#Page({
templateUrl: 'build/pages/app/app.html'
})
export class HomePage {
public base64Image: string;
constructor() {
}
takePicture(){
console.log('click');
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000
}).then((imageData) => {
// imageData is a base64 encoded string
this.base64Image = "data:image/jpeg;base64," + imageData;
}, (err) => {
console.log(err);
});
}
}
console
takePicture should be in quotes...
(click)="takePicture()"
I have a page with one list from a JSON file. What I want to do it's to add an order by funcionality. I don't understand yet if I need to use #Pipe or if there is a simpler way.
I'm planning to do it in a modal page.
Thanks in advance any help will be appreciated.
modalpage.html:
<ion-toolbar danger>
<ion-buttons start>
<button (click)="close()">
<ion-icon ios="ios-close" md="md-close"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>
Ajustes
</ion-title>
<ion-buttons end>
<button (click)="applyFilters()">
<ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-content padding class="rojo">
<h2 text-center>Ordenar resultados por:</h2>
</ion-content>
modalpage.js
import {Page, NavController,ViewController} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/ajustes-listado/ajustes-listado.html',
})
export class AjustesListadoPage {
static get parameters() {
return [[NavController],[ViewController]];
}
constructor(nav, viewController) {
this.nav = nav;
this.viewCtrl = viewController;
}
close(data) {
this.viewCtrl.dismiss(data);
}
applyFilters(){
console.log('aplicando filtros a la lista');
this.close();
}
}
list.html
<ion-navbar *navbar danger>
<ion-title text-center>Listado</ion-title>
<ion-buttons start *ngIf="buscar==false">
<button (click)="search()">
<ion-icon ios="ios-search" md="md-search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="options()">
<ion-icon ios="ios-options" md="md-options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content class="listado">
<ion-list [virtualScroll]="vets">
<button ion-item text-wrap *virtualItem="let vet" (click)="goToDetails(vet)">
<ion-avatar item-left>
<!-- <ion-img [src]="vet.img || defaultImg"></ion-img> -->
<img src="{{vet.img}}" onError="this.src='./files/gmaps.png';" />
</ion-avatar>
<h2>{{vet.nombre}}</h2>
<p>Direccion: {{vet.direccion}}</p>
</button>
</ion-list>
</ion-content>
list.js
import {DetallesPage} from '../detalles/detalles';
import {OnInit} from '#angular/core';
import {Page, NavController, Platform, NavParams, Modal} from 'ionic-angular';
import {MiServicio} from '../../providers/mi-servicio/mi-servicio';
import {AjustesListadoPage} from '../ajustes-listado/ajustes-listado';
#Page({
templateUrl: 'build/pages/listado/listado.html',
providers:[MiServicio]
})
export class ListadoPage {
static get parameters() {
return [[NavController],[Platform],[MiServicio]];
}
constructor(nav,platform, miServicio) {
this.nav = nav;
this.platform = platform;
this.miServ = miServicio;
this.ngOnInit();
}
ngOnInit() {
this.miServ.getVets().subscribe(
data => this.vets = data
);
}
}
Angular2 doesn't provide the orderBy filter (now "pipe") like angular 1 does.
Angular does not ship with pipes for filtering or sorting lists. Developers familiar with Angular 1 know these as filter and orderBy. There are no equivalents in Angular 2.
refer: https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe
You'll need to sort the items in your component. The best option is always sort them on the server-side, but if you know there's only a few items or you really want to sort on the client-side, you can use the array.sort() method.
Examples and documentation:
http://www.w3schools.com/jsref/jsref_sort.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
You said you have the list in a JSON file, so it's a persistent data isn't it?
Take a look at this: Sorting with map
I think this will be the best option for you.