I have to solve this problem: I want to display a list of rows with fixed height. Each row has to be horizontally divided in 2 equal parts. Each part has its background color, derived from the i-th element of the list they are referred. Each object in the list has 2 fields (named leftColor and rightColor) that contain the color to be displayed.
In pseudo-code:
<ion-row *ngFor="let colorSource of sources">
<ion-col col-6 background-color="{colorSource.leftColor}"> </ion-col>
<ion-col col-6 background-color="{colorSource.rightColor}"> </ion-col>
</ion-row>
Something like...
How could i obtain something like this?
TY in advance!
Instead of background-color="{colorSource.leftColor}", try to use [ngStyle]="{'background-color': colorSource.leftColor}".
So your final code will be:
<ion-row *ngFor="let colorSource of sources">
<ion-col col-6 [ngStyle]="{'background-color': colorSource.leftColor}"> </ion-col>
<ion-col col-6 [ngStyle]="{'background-color': colorSource. rightColor}"> </ion-col>
</ion-row>
For information about ngStyle diective please look here official doc.
I hope this will help you.
Related
I have a list of image they come from an json array with 7 elements :
The key of image is
<ion-grid>
<ion-row *ngFor="let image of imageList; let i = index;">
<ion-col>
<div >
<img [src]="image.imageUrl" />
</div> </ion-col>
<ion-col>
<div >
<img [src]="image.imageUrl" />
</div>
</ion-col>
</ion-row>
</ion-grid>
But this code show me the same pic per row , I have tried to set image[i] on the first col and image[i+1] on the second but nothing.
I want to show two image per row like this but without same image.
Thanks.
Something like this should work:
<ion-grid>
<ion-row *ngFor="let image of imageList; let i = index;">
<ion-col>
<div >
<img [src]="imageList[i]?.imageUrl" />
</div> </ion-col>
<ion-col>
<div >
<img [src]="imageList[i + 1]?.imageUrl" />
</div>
</ion-col>
</ion-row>
Inside de *ngFor loop, the image will always be one image for every iteration. You should iterate the imageList and use the index to access the images from imageList. Hope it makes sense
I placed many cols in 1 row.
When the screen size is big, ion-cols are placed in a row in a clean manner, but in mobile view of chrome, when the screen size is small, most of ion-cols are placed in a row and a few remaining are in the second row.
My code looks like this.
<ion-row>
<ion-col size="3" size-sm="2">
<ion-icon name="add-circle"></ion-icon>
<ion-icon name="remove-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="cloud-download"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="save"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="settings"></ion-icon>
</ion-col>
<ion-col>
<ion-icon [name]="icon_show_hide === 'Hide' ? 'eye-off' : 'eye'">
</ion-icon>
</ion-col>
<ion-col>
<ion-icon name="map"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="triangle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="arrow-undo-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="arrow-redo-circle"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="trash"></ion-icon>
</ion-col>
</ion-row>
how can I make the number of the cols in each row same like 5 cols in the first row and another 5 in the second row?
I need this in all mobile devices.
can anyone give me the solution to this problem?
a row can have maximum 12 unit. you can divided 12 between 5 col. and for this pattern you fill first row and another cols is in second row
<ion-row>
<!-- fill first row-->
<ion-col size="5"></ion-col>
<ion-col size="5"></ion-col>
<ion-col size="2"></ion-col>
</ion-row>
in this case i fill a row with 3 col. and also you can fill row with offset
<ion-row>
<!-- fill first row-->
<ion-col size="5" offset="2"></ion-col>
<ion-col size="5"></ion-col>
</ion-row>
in this case i fill offset 2 unit from the left.
and for customize for screen size you can use permistion after size and offset.
<ion-row>
<!-- fill first row-->
<ion-col size-md="5" offset-md="2"></ion-col>
<ion-col size="5"></ion-col>
</ion-row>
i customize my col when screen size is md or lover . but you can learn about all about this in ionic offcial
I am trying to display images beginning at the left of each row in an ngFor. The images are displaying successfully, however, in 1 row if there is only one image and the same with another the images are placed on opposite sides. For example row 1 image at left and row 2 large gap and image at right .
html file
<ion-icon class="ion-icon1" name="calendar"></ion-icon>
<ion-card [ngClass]="note.card ? 'card-item' : 'no-card' ">
<ion-card-header>
<b>Date:</b> {{note?.Created}}
</ion-card-header>
<ion-card-content [ngClass]="isMenuOpen[i] ? 'active' : 'inactive'" *ngFor='let ind of individuals'>
<ion-list>
<b>Injury: </b> {{ind?.InjuryType}}
</ion-list>
<ion-row class="ion-align-items-start">
<ion-col size="6" *ngFor='let img of pImages'>
<div *ngIf="img" class="ion-align-self-start">
<span *ngIf="note.noteID === img.NoteID">
<img src="http://ccoulter12.lampt.eeecs.qub.ac.uk/api/{{img.Image}}" (click)="photoLarge(img.Image)" />
</span>
</div>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</timeline-item>
</timeline>
What you can do is use display property of css. Like below in ngStyle
<span [ngStyle]="{'display':note.noteID === img.NoteID?'block':'none'} ">
<img src="http://ccoulter12.lampt.eeecs.qub.ac.uk/api/{{img.Image}}" (click)="photoLarge(img.Image)" />
</span>
I have one row with two columns as grid view to populate the date from the sevrver. By view everything is fine. But say i have 2 row with 4 column.like below :
a b
c d
So i have a click function on my row where selected item can see as detail view page.But the issues here is .For example if i select first grid cell in first row. that is ‘A’.Then in detail page its showing all the details about ‘A’
Same if i select ‘B’ then also in detail screen its showing as ‘A’ grid cell data only.Which is showing all the data about ‘A’.
Things i tried :
print the function of on click .if i select “A” then A is showing.If i select “B” then also on selected click function “A” Data only showing.
Here is my code :
<ion-grid no-padding>
<ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
<ng-container *ngIf="i % 2 == 0">
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1 < Data.length">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
Any help.I don't know what i am doing wrong here.
Thanks in advance !!
Its simple put the click in ion-col and that's it what you need is to pass the Data array with index in showDetails function
<ion-grid no-padding>
<ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
<ng-container *ngIf="i % 2 == 0">
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length" (click)="showDetails(Data[i])">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1 < Data.length" (click)="showDetails(Data[i+1])">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
If I understand this right, it looks as though you're iterating over Data four times, but only actually outputting two rows from it (your *ngIf="i % 2 == 0" is causing you to lose access to two of your items.
So you're outputting the column for B on the first pass, in which case item is actually still item A.
Because of the way the Ionic columns work, you probably don't need to write it like this. Try the following:
<ion-grid no-padding>
<ion-row no-padding>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngFor="let item of Data" (click)="showDetails(item)">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{ item.ProductName }}</h2>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
You're only going to have one row with this, but the columns should work out the way you want.
The click event you have bound is on the row not the column. I would suggest moving the click event to the <ion-col elements instead.
Im populating dynamic data using ionic 2 & angular here im getting and displaying the data but im getting table in non responsive format and below is my code
<ion-grid>
<ion-row style="padding-top:5px;paddind:bottom:5px;background:#488aff">
<ion-col>
A
</ion-col>
<ion-col>
B
</ion-col>
</ion-row>
<ion-row *ngFor="let value of resultData" style="background:#eff0f1">
<ion-col>
{{value.A}}
</ion-col>
<ion-col>
{{value.b}}
</ion-col>
</ion-row>