i stuck , please help me
I am using ion-searchbar , i want that when there is no text on the searchbar the list must be hide but the list is still showing
Can anyone help me?
in .html file
<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts file
getItems(ev) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the ev target
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
You can use ngModel and ngIf :
<ion-searchbar [(ngModel)]="searchInput" (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="searchInput !== ''">
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts:
public searchInput='';
OR
If your variable items is empty at initalization :
<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="items && items.length">
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts:
public items = [];
Related
So i have this code for list-company.page.html
<div class="tab_container" [ngSwitch]="tab" *ngFor="let i of company_data">
<ion-list lines="none" *ngSwitchCase="'list'" >
<ion-item (click)="sendCompany(i.id)">
<div class="item_container">
<div class="syllabus">
<h3>{{i.name}}</h3>
</div>
<ion-row>
<ion-col size="7">
</ion-col>
<ion-col size="5" class="ion-text-end">
<div class="follow">
Follow
</div>
</ion-col>
</ion-row>
</div>
</ion-item>
</ion-list>
ion-list lines="none" *ngSwitchCase="'status'">
<ion-item *ng-init='getFollowedCompany()'>
<!-- <ion-item (click)="sendCompany(i.id)"> -->
<div class="item_container">
<div class="syllabus">
<h3>{{i.name}}</h3>
</div>
<ion-row>
<ion-col size="7">
<!-- <p class="d-flex">{{i.jml}} Questions
<span></span>
{{i.waktu || 0}} mins
</p> -->
</ion-col>
<ion-col size="5" class="ion-text-end">
<div class="follow">
Unfollow
</div>
</ion-col>
</ion-row>
</div>
</ion-item>
</ion-list>
</div>
So the idea is the first tab named List is showing a list of company from my DB with function getCompany() and to pick a company to choose
and then the second tab named Status is showing the company that has been choosen from the List tab with function getFollowedCompany()
The problem is i dont know how to set this to different function in the html page
This is the code :
getCompany()
this.api_url='https://exam.graylite.com/api/company'
await this.storage.get('email').then((val) => {
this.email = val
});
// console.log(this.email);
var formData : FormData = new FormData();
formData.set('email',this.email);
this.http.post(this.api_url,formData)
.subscribe((response) => {
if(response['message']=='error'){
this.presentToast(response['message']);
} else {
this.company_data = response['data'];
// this.name = response['data']['name'];
// this.company_id = response['data']['company_id'];
console.log(this.company_data);
}
});
getFollowedCompany()
this.api_url='https://exam.graylite.com/api/getuserapproval'
await this.storage.get('email').then((val) => {
this.email = val
});
// console.log(this.email);
var formData : FormData = new FormData();
formData.set('email',this.email);
this.http.post(this.api_url,formData)
.subscribe((response) => {
if(response['message']=='error'){
this.presentToast(response['message']);
} else {
this.company_followed = response['data'];
// this.name = response['data']['name'];
// this.company_id = response['data']['company_id'];
console.log(this.company_followed);
}
});
Hi guys i have this problem when i try to print an html item, but it also dispenses the whole page adding a call id does not function this is my code:
.html
<ion-row >
<ion-item *ngFor="let order of orders" id="pdf" >
<ion-icon name="mail-open" slot="start"></ion-icon>
<p> ordine: {{ order.id}}</p>
<p class="prob"> Indirizzo: {{ order.billing.address_1}} <br> Città : {{ order.billing.city}}
<br> Numero: {{ order.billing.phone}}</p>
<p class="prob"> Nome: <br> {{ order.billing.first_name}} {{ order.billing.last_name}}</p>
<button type="button" mat-button color="primary" (click)="printDocument()"></button>
</ion-item>
</ion-row>
.ts
import { Printer, PrintOptions } from '#ionic-native/printer/ngx';
printDocument() {
let options: PrintOptions = {
name: 'MyDocument',
duplex: true,
};
let content = document.getElementById('pdf');
this.printer.print(content, options);
}
and that's what happens:
print all page not a single item
I'm simulating something like a shopping cart using ionic 2. Basically you write the item's name and value and it's creating a list with checkbox as in the image below.
But I wanted the option only appear when selecting one of the checkboxes, and did not stay static on the screen as it is now. How can I do this?
grid calling the CheckBox:
<ion-grid>
<ion-row *ngFor="let item of produto">
<ion-item>
<ion-label (click)="clicou(item.desc)">
{{ item.desc }} {{ item.valor }}
</ion-label>
<ion-checkbox checked="false"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
button code part:
<button ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
<span class="button-inner">
<ion-icon name="close"></ion-icon>
Remover Selecionados
</span>
<div class="button-effect"></div>
</button>
in ts create a variable that contains the value of the checks, as an example I will use productState which will be boolean type, and create in produto a state.
you can use a ngmodel and the variable already created (productState) to validate the status of the product, and use the event (ionchange) to this
<ion-grid>
<ion-row *ngFor="let item of produto">
<ion-item>
<ion-label (click)="clicou(item.desc)">
{{ item.desc }} {{ item.valor }}
</ion-label>
<ion-checkbox (ionChange)="validState()" [(ngModel)]="productState" ></ion-checkbox>
</ion-item>
</ion-row>
in ts create a function to valid the state of products:
validState(){
let cont = 0;
for (let index = 0; index < this.produto.length; index++) {
if (this.produto[index].State){
cont++;
}
}
if(cont >=1){
this.productState = true;
}else{
this.productState = false;
}
}
and in the button we will use ngIf to validate the product status through productState
<button *ngIf="productState" ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
<span class="button-inner">
<ion-icon name="close"></ion-icon>
Remover Selecionados
</span>
<div class="button-effect"></div>
</button>
ngIf docs
ngmodel docs
I'm having a problem calling the data into the view. Console log is working as I included a screenshot.
ytapiUrl =https://www.googleapis.com/youtube/v3/playlistItems? part=snippet&playlistId='blahblahbla'
getECvideolists(){
return new Promise(resolve => {
this.httpClient.get(this.ytapiUrl).subscribe(ytdata => {
resolve(ytdata);
this.Ecvideos = ytdata;
console.log(ytdata);
}, err => {
console.log(err);
});
});
}
<ion-list *ngSwitchCase="'videos'">
<ion-item *ngFor="let Ecvideo of Ecvideos">
<h2> ***this doesn't display*** {{Ecvideo.items.snippet.title}}</h2>
</ion-item>
</ion-list>
[
items key has an array so you need to iterate it through *ngFor
for example,
<ion-list *ngSwitchCase="'videos'">
<ion-item *ngFor="let item of Ecvideos.items">
<h2>{{item.snippet.title}}</h2>
</ion-item>
</ion-list>
Im using ionic 3 for my mobile application. I have an issue with my item list, my issue is when i add a new item it does not show up at the top of the list, it always appears at the bottom , how to do that correctly?
Thanks
example
add Item -
first -A
second-B
its display
A
B
I want to know how can display this type
B
A
item list
<ion-list class="ion-addexe">
<ion-item *ngFor="let bill of Details">
<ion-label>
<p class="ion-lbl" style="position: relative;top:-0.2rem;">{{bill.billdescription}}</p>
</ion-label>
<ion-label>
<p class="ion-lbl" text-right style="position: relative;top:-0.2rem;">$ {{bill.billtotal}}</p>
</ion-label>
</ion-item>
</ion-list>
add item
<div>
<ion-item >
<ion-label id="ion-lbls">Select you want</ion-label>
<ion-select [(ngModel)]="addnewBill_category" okText="Add" cancelText="Close">
<ion-option *ngFor="let bill of Category" value="{{bill.billCategoryID}}">{{bill.CategoryName}}</ion-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Details</ion-label>
<ion-input type="text" value="" [(ngModel)] = "addnewBill_description" placeholder="Description" text-right></ion-input>
</ion-item>
<ion-item >
<ion-label id="ion-lbls">Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.addnewbill_Date" placeholder="MMM/DD/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label id="ion-lbls">Total ($)</ion-label>
<ion-input type="number" [(ngModel)]="addnewBill_amount" value="" placeholder="$0.0" text-right></ion-input>
</ion-item>
</div>
</ion-list>
First of all that is the correct way in which a ngFor works it displays the first element first and the next items at the bottom, because whenever you insert new items inside an array it follows the top to bottom approach. So basically you want to display your array items in reverse order that should be your question
The most simple and easy solution to this is by just using reverse() on your *ngfor. In your case it would be something like this:
<ion-item *ngFor="let bill of Details.reverse()">
...
<ion-item>
or one more solution is using a custom angular pipe which you could apply on the *ngFor and sort your array in reverse order.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value) {
if (!value) return;
return value.reverse();
}
}
and then in your html you can use that pipe like this:
<ion-item *ngFor="let bill of Details | reverse">
...
<ion-item>