this.tribesProvider.getMyTribeDetailsByTriberId().subscribe(tribeIds=>{
tribeIds.forEach(tribeId=>{
this.tribesProvider.getMyTribeDetailsByTribeId(tribeId).subscribe(tribe=>{
this.myTribeList.push(tribe);
console.log(this.myTribeList);
})
})
})
I have to access the array myTribeList from its view like this
<ion-item *ngFor="let tribe of myTribeList">
<ion-list>
<h2>{{tribe.TribeDesc}}</h2>
<h2>{{tribe.TribeName}}</h2>
<h2>{{tribe.Created}}</h2>
<h2>{{tribe.Updated}}</h2>
</ion-list>
</ion-item>
But with the above code its not possible.
Any suggestions?
UPDATE
The issue occurs because i was doing
this.angularFire.database.list
for getMyTribeDetailsByTribeId(tribeId) method
instead of
this.angularFire.database.object
which in turn generated an additional array of objects like
-array
-array
-object
-array
-object
Related
I am using <ion-select> for drop-down list and it working as expected but what I want here is Index of selected option from <ion-select>
I have used <ion-select> and change event like below:
<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
<ion-option *ngFor="let selectedProduct of productArray" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>
Change Event :
onSelectChange(selectedValue: any) {
//Here I want Index also.
//Currently I am getting selected Value.
}
let me know if any can help me on this!
Thanks in advance.
In your *ngFor you can also define a variable to receive que index
<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
<!-- you can also have your index by declaring a variable in ngFor that'll receive the index -->
<ion-option *ngFor="let selectedProduct of productArray; let i = index" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>
The case here is that your declared index is inside your ion-select so it's not available for onSelectChange method. So declare a property in your .TS file
public myIndex: number = 0;
And every time a user select an option the property will receive the index
<!-- on selecting an option your myIndex will receive the current selected option index -->
<ion-option *ngFor="let selectedProduct of productArray; let i = index" [value]=selectedProduct.pid (ionSelect)="myIndex = i">{{ selectedProduct.pid }}</ion-option>
Then you can use it in your onSelectChange()
onSelectChange(selectedValue: any) {
let index = this.myIndex;
}
There's another options but this is the most Angular way of doing this. Hope this helps.
I have one view in portrait mode and another in landscape mode where I want to show chart and I hide tabs and header (fullscreen mode, no scrolling). My view in landscape mode would look something like this:
<div showWhen="landscape" class="chart-settings split-container">
<ion-toolbar showWhen="landscape">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Period</ion-label>
<ion-select [(ngModel)]="period">
//options
</ion-select>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Won/Lost</ion-label>
<ion-select [(ngModel)]="gender">
//options
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<div class="flexChart">
<div id="chartdiv" [style.width.%]="100" [style.height.%]="100"></div>
</div>
I use flex to fill out the page and create "fullscreen effect with no scrolling".
Thanks
Well it seems there is this:
http://ionicframework.com/docs/api/platform/Platform/
It has:
isPortrait()
isLandscape()
so you can do:
platform.isPortrait() or platform.isLandscape()
if you inject platform into constructor.
Combine this with *NgIf:
https://angular.io/guide/template-syntax#ngif
CSS overflow, overflow-x, overflow-y is what you'd look to for prevent scrolling provided it's a block level container:
https://developer.mozilla.org/en/docs/Web/CSS/overflow
UPDATE
Based on this comment:
That was my initial thought. The problem with this is that it leaves
padding on top. I solved it by configuring styles, but it seemed
pretty dirty solution to me
You can fix that padding issue by getting the instance of the Content and call the resize() method like this:
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class MyPage{
#ViewChild(Content) content: Content;
public yourMethod(): void {
this.content.resize();
}
}
https://ionicframework.com/docs/api/components/content/Content/#resize
Tell the content to recalculate its dimensions. This should be called
after dynamically adding/removing headers, footers, or tabs.
You can check landscape or portrait with platform, then you can get the ref of nav from template:
<ion-header>
<ion-navbar #navBar>
...
</ion-navbar>
</ion-header>
and call setHidden(true) in component with its ref:
#ViewChild('navBar') navBar: Navbar
// call in proper place
this.navBar.setHidden(true)
for tabs, I think you can do in the same way
I have some cards that repeat using *ngFor. It works perfectly, however the array I pass to ngFor will have an amount that varies unpredictably, it could be a small number it could be big. I want to implement virtual scroll incase the number is large.
The ionic documentation examples show virtual scroll used with a list.
I don't see the need for a list tag in my code, but the way I've done it doesn't seem to be right for virtualScroll because the page won't render at all in the simulator. It's completely blank. Everything was fine before I added virtualScroll.
My Code:
<ion-card id="card" [virtualScroll]="listOfEvents" >
<ion-item *virtualItem="let event"]>
<ion-row>
<ion-col><span class="showDetails">Date:</span>{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}</ion-col><ion-col><span class="showDetails">Time:</span>{{getFormattedTime(event.eventTime, 'HH:MM')}}</ion-col><ion-col><span class="showDetails">Venue:</span> {{event.venue}}</ion-col> <!-- convert time to normal time-->
</ion-row>
<ion-row>
<ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col><ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col><ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>
</ion-row>
<ion-row>
<ion-col><span class="showDetails">Will Reimburse:</span> {{event.reimburse}}</ion-col>
</ion-row>
<button id="volunteer" ion-button block> volunteer </button>
</ion-item>
</ion-card>
</ion-content>
I have a filter (pipe) that I want to use on a VirtualScroll. Before I used the VirtualScroll I had a normal for-loop on ion-item using the formula:
<ion-item *ngFor="#item of items | myPipe : criteria">....</ion-item>
is it possible to use pipes with <ion-item *virtualItem="#item" > ...</ion-item> as well? Or do I have to do the pipe on the list in a controller instead?
I ended up using a pipe in the controller instead, creating a filteredItems list like so:
filteredItems = new MyPipe().transform(this.items, ["criteria"]);
Then, I display the filteredItems in the VirtualScroll instead of the original list:
<ion-list [virtualScroll]="filteredItems">
<ion-item *virtualItem="#item">
</ion-item>
</ion-list>
Here is an example of usage of Pipe filters with angular rc3.
<ion-list [virtualScroll]="items | SearchPipe:searchBar | SortItems:orderType">
<button ion-item *virtualItem="let item">
<span [innerHtml]='item.Name | BoldPipe:searchbar'></span>
<span [innerHtml]='item.Code | BoldPipe:searchbar'></span>
</button>
</ion-list>
The pipe should be applied on the list instead of the item.
The answer posted by John (a good answer) but you'd have to activate it on every change detection rather than it being part of the rendering
I have a string property with values like "primary", "secondary" or "danger". I am able to bind it to a badge in this way:
<ion-badge class="badge badge-{{product.colorStock}}">1</ion-badge>
But I am not able to do the same with a label (this does NOT work):
<ion-label class="label label-{{product.colorStock}}">Text</ion-label>
How could I bind my property to the label so it changes its color?
Thank you
I think this should work:
<ion-label class="label" [ngClass]="['label-'+product.colorStock]">Text</ion-label>
It was solved by Ionic2 Framework itself, introducing the "color" tag. Now label sintax is:
<ion-label color="danger">Text</ion-label>
So, the problem does not exist anymore.