IONIC 2: Searhing with json parsing - ionic2

I have two pages, search page which contains some filter searches like marital status, age etc.. and those filters are as combobox, firstly i want to display each option in combo box to fetch from json. and i do have another page called matches with a card containing details of a person. SO I want to store some peoples details as json. And when I search with particular filters I need to display the results in matches as card by fetching from json. Please do help.
search page ts and html:
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatriregPage } from '../matrireg/matrireg';
import { MatrimatPage } from '../matrimat/matrimat';
#Component({
selector: 'page-matrisear',
templateUrl: 'matrisear.html',
providers: [ObsAuthService]
})
export class MatrisearPage{
maritalfilter=[
{
"marital":"Single"
},
{
"marital":"Divorced"
},
{
"marital":"Widowed"
}
];
religionfilter=[
{
"religion":"Any"
},
{
"religion":"Hindu"
},
{
"religion":"Muslim"
},
{
"religion":"Christian"
}
];
selectedMarital:string;
selectedReligion:string;
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
}
selectChange(e) {
console.log(e);
}
public create(){
this.nav.push(MatriregPage);
}
public search(){
this.nav.push(MatrimatPage);
}
}
<ion-header>
<ion-navbar>
<ion-title>Search</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-label class="link" (click)="create()">Create a Profile</ion-label>
<ion-row>
<ion-col>
<ion-label>Age:</ion-label>
</ion-col>
<ion-col>
<ion-select [(ngModel)]="selectedAge" interface="popover" placeholder="Select">
<ion-option *ngFor="let ageObj of agefilter" [value]="ageObj">{{ageObj.age}}</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-label>to</ion-label>
</ion-col>
<ion-col>
<ion-select [(ngModel)]="selectedAge" interface="popover" placeholder="Select">
<ion-option *ngFor="let ageObj of agefilter" [value]="ageObj">{{ageObj.age}}</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label>Height:</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="nes">4ft 8in</ion-option>
<ion-option value="n64">4ft 9in</ion-option>
<ion-option value="ps">5ft</ion-option>
<ion-option value="genesis">5ft 1in</ion-option>
<ion-option value="saturn">5ft 2in</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-label>to</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="nes">4ft 8in</ion-option>
<ion-option value="n64">4ft 9in</ion-option>
<ion-option value="ps">5ft</ion-option>
<ion-option value="genesis">5ft 1in</ion-option>
<ion-option value="saturn">5ft 2in</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label>Marital Status:</ion-label>
</ion-col>
<ion-col>
<ion-select [(ngModel)]="selectedMarital" interface="popover" placeholder="Select">
<ion-option *ngFor="let maritalObj of maritalfilter" [value]="maritalObj">{{maritalObj.marital}}</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-label>Religion</ion-label>
</ion-col>
<ion-col>
<ion-select [(ngModel)]="selectedReligion" interface="popover" placeholder="Select">
<ion-option *ngFor="let religionObj of religionfilter" [value]="religionObj">{{religionObj.religion}}</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label>Mother Toungue</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="ns">Any</ion-option>
<ion-option value="nes">Hindi</ion-option>
<ion-option value="n64">Tamil</ion-option>
<ion-option value="ps">Malayalam</ion-option>
<ion-option value="genesis">English</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-label>Country</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="ns">Any</ion-option>
<ion-option value="nes">India</ion-option>
<ion-option value="n64">USA</ion-option>
<ion-option value="ps">UAE</ion-option>
<ion-option value="genesis">France</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label>State</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="ns">Any</ion-option>
<ion-option value="nes">Kerala</ion-option>
<ion-option value="n64">TamilNadu</ion-option>
<ion-option value="ps">Washington</ion-option>
<ion-option value="genesis">Paris</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-label>City/District</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="ns">Any</ion-option>
<ion-option value="nes">Thrissur</ion-option>
<ion-option value="n64">Trivandrum</ion-option>
<ion-option value="ps">North Washington</ion-option>
<ion-option value="genesis">Georgia</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label>Education</ion-label>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Select">
<ion-option value="ns">Any</ion-option>
<ion-option value="nes">UG</ion-option>
<ion-option value="n64">PG</ion-option>
<ion-option value="ps">Ph.D.</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<button ion-button (click)="search()" color="primary" block>Search</button>
</ion-row>
</ion-content>
matches page html and ts:
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatrisubPage } from '../matrisub/matrisub';
import { MatrirepPage } from '../matrirep/matrirep';
#Component({
selector: 'page-matrimat',
templateUrl: 'matrimat.html',
providers: [ObsAuthService]
})
export class MatrimatPage{
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
}
selectChange(e) {
console.log(e);
}
goback() {
this.nav.pop();
}
public report(){
this.nav.push(MatrirepPage);
}
}
<ion-header>
<ion-navbar>
<ion-title>Matches</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>
<ion-label>Name:</ion-label>
<ion-row>
<ion-col col-2>
<img src="assets/images/users.png" />
</ion-col>
<ion-col>
<ion-row>
<ion-label>Age:</ion-label>
</ion-row>
<ion-row>
<ion-label>Religion:</ion-label>
</ion-row>
<ion-row>
<ion-label>Marital Status:</ion-label>
</ion-row>
<ion-row>
<ion-label>Location:</ion-label>
</ion-row>
<ion-row>
<ion-label>Education:</ion-label>
</ion-row>
<ion-row>
<ion-label>Profession:</ion-label>
</ion-row>
<ion-row>
<ion-label>Annual Income:</ion-label>
</ion-row>
</ion-col>
<ion-col>
<ion-label item-end>Height:</ion-label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button ion-button full color="secondary" block>View Profile</button>
</ion-col>
<ion-col>
<button ion-button (click)="report()" full color="primary" block>Report</button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-content>

Related

ionic 4 label display issue

i have problem with labels on Ionic v4.
When i look at the screenshot, you will see the weird look.
But my code just copied from Ionic docs.
Here my code
[![<ion-header>
<ion-toolbar color="primary">
<ion-title>
Titel
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Default</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
</ion-content>]
screenshot

You can try with removing the tag because in their official website they didn't used tag to wrap the elements.So You can try like that -
<!-- Inputs with labels -->
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input></ion-input>
</ion-item>

Ionic ItemSliding with ion-row loop

<ion-list>
<ion-item-sliding #item>
<ion-item class="green">
<ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
<button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options class="green" side="left">
<button ion-button color="danger" (click)="deleteItem(item)">Entfernen</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Problem: When I have multiple rows and I try to slide one, but it slides all rows along with it and instead of having the action button left to the slided row only, the button appears as one big button on the left of all rows.

You need to make multiple ion-item-sliding elements instead of multiple rows within one ion-item-sliding element.
<ion-list>
<ion-item-sliding *ngFor="let row of grid; let rowIndex=index"> <!-- for loop here -->
<ion-item class="green">
<ion-row class="row">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
<button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options class="green" side="left">
<button ion-button color="danger" (click)="deleteItem(row)">Entfernen</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>

form goes behind <ion-header> in IONIC

Ionic Form's top item goes behind ion-header. Below is the HTML.
<ion-header>
<ion-navbar hideBackButton color="dark">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>REGISTER</ion-title>
</ion-navbar>
</ion-header>
<ion-content class='has-header'>
<form [formGroup]="todo" (submit)="logForm()" padding class="bg-register-image">
<ion-list>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input [(ngModel)]="emaill" type="email" formControlName="emaill"></ion-input>{{emaill}}
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input [(ngModel)]="Password" type='password' formControlName="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button block position="bottom" type="submit" item-left [disabled]="!todo.valid">Submit</button>
<button block ion-button color="secondary" [navPush]="homepage" item-left>CANCEL</button>
</form>
</ion-content>
Let me know what to change. Thanks in Advance.

Ionic2 - Labels not appearing for input

I am trying to do something very basic: A label above the input field.
For some reason, this is not working. Any clue ?
<ion-header>
<ion-navbar>
<ion-title>
The App
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item no-lines>
<ion-label stacked>First name</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item no-lines>
<ion-label stacked>Last name</ion-label>
<ion-input type="text" placeholder="Last Name"></ion-input>
</ion-item>
</ion-content>
<ion-footer>
<div (click)="goHome()">Cancel</div>
<div (click)="save()">Update</div>
</ion-footer>

As you can see in the docs
change your code to <ion-label stacked> and it should appear on top of your ion-input

How do I align items in Ionic2?

How do we apply the default alignment classes provided by Ionic2? For example, I want a button to appear on the right side of a card.
<ion-card *ngFor="let table of tables">
<ion-card-content>
Card Text
<button ion-button>
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-card-content>
</ion-card>

Check Item placement section here
You can use ion-item to wrap and placement attribute.
for example:
<ion-card *ngFor="let table of tables">
<ion-card-content>
<ion-item>
Card Text
<button item-right ion-button>//item right
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-item>
</ion-card-content>
</ion-card>
Or you can use Grid-row ,cols
<ion-card *ngFor="let table of tables">
<ion-card-content>
<ion-row>
<ion-row>
<ion-col width-80>
Card Text
</ion-col>
<ion-col>
<button ion-button>
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>