angular4- show element only when texbox is focused - javascript

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;
}
}

Related

How create a scrollTop button on ionic 3

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>

How to implement swipeable segments in ionic 3?

I have to implement swipeable segments in ionic 3 application.
I am using https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages directives but i am getting following error:
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[ERROR ->][(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-area">
<ion-list *ngSw"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:66
Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [ERROR ->] .
[tabsList]="categories" [(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-ar"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:42
Can't bind to 'currentTab' since it isn't a known property of 'div'.
("
My code is:
In app.module.ts:
import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';
#NgModule({
declarations: [
MyApp,
SwipeSegmentDirective
// ProgressBarComponent
],
In invitefriend.ts:
export class InvitefriendPage {
public category: string = 'everyone';
public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
// tab1Root: any = "EveryonePage";
// tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
constructor(public navCtrl: NavController, public navParams:
NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad InvitefriendPage');
}
onTabChanged(tabName) {
this.category = tabName;
}
In invitefriend.html:
<ion-header>
<ion-navbar color="danger">
<ion-toolbar class="toolbar-color myToolbar">
<ion-segment [(ngModel)]="category" class="tabsSeg">
<ion-segment-button value="everyone" class="segBtn tabname
active activated">
Everyone
</ion-segment-button>
<ion-segment-button value="group" class="segBtn tabname">
Group
</ion-segment-button>
<ion-segment-button value="contact" class="segBtn tabname">
Contact
</ion-segment-button>
<ion-segment-button value="directory" class="segBtn tabname">
Directory
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[(currentTab)]="category" (tabChanged)="onTabChanged($event)"
class="swipe-area">
<ion-list *ngSwitchCase="'everyone'">
<ion-item>
Batman Begins
</ion-item>
<ion-item>
Transporter
</ion-item>
<ion-item>
Million Dollar Baby
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'group'">
<ion-item>
Game of Thrones
</ion-item>
<ion-item>
Daredevil
</ion-item>
<ion-item>
Arrow
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'contact'">
<ion-item>
Ice Age
</ion-item>
<ion-item>
Lion King
</ion-item>
<ion-item>
Up
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'directory'">
<ion-item>
Ice Age1
</ion-item>
<ion-item>
Lion King1
</ion-item>
<ion-item>
Up1
</ion-item>
</ion-list>
</div>
</ion-content>
I need any solution to solve above error, please give here solution as soon as possible, it would be really appreciated.

Ionic 2 reference a value in html file from ts file?

I am querying a set of data from firebase and successfully pulled a list of data to my html page. Is there any way to reference the corresponding item.uid value from the html page in my onViewProfile function so that I can push it to another page? Thanks.emphasized text
HTML file
<ion-content padding>
<ion-label>Type</ion-label>
<ion-select [(ngModel)]="type" (ionChange)="searchPitchesByType(type)">
<ion-option value="test1">test1</ion-option>
<ion-option value="test">test</ion-option>
</ion-select>
<ion-list>
<ion-item *ngFor="let item of pitches | async">
Name: {{ item.name }}
<p>
Description:{{ item.description }}
</p>
<p>
uid:{{ item.uid }}
</p>
<button right ion-button icon-only (click)="onViewProfile()">
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>
TS file
export class DiscoverPage {
public pitches: FirebaseListObservable<any>;
constructor(
private navCtrl: NavController,
private loadingCtrl: LoadingController,
private popoverCtrl: PopoverController,
public afDatabase: AngularFireDatabase
) {this.pitches = afDatabase.list('/Pitches/');}
searchPitchesByType(type: string){
this.pitches = this.afDatabase.list('Pitches', {
query: {
orderByChild: 'type',
equalTo: type
}
})
}
onViewProfile() {
let data = {
uid: **(uid that corresponds to the uid in html)**
}
console.log(this.navCtrl.push(ViewProfilePage, data));
}
}
Well it is so simple that I feel I'm not getting it right.
You have to pass it as a parameter like this
<ion-item *ngFor="let item of pitches | async">
Name: {{ item.name }}
<p>
Description:{{ item.description }}
</p>
<p>
uid:{{ item.uid }}
</p>
<button right ion-button icon-only (click)="onViewProfile(item)">
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
Then your ts will turn into
onViewProfile(item) {
let data = {
uid: item.uid
}
console.log(this.navCtrl.push(ViewProfilePage, data));
}

Scroll not working when from Popover

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
})
});
}

Order list ionic 2

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.

Categories