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
Related
Is there a way I can remove the entire image element from DOM when 403 error occurs to that image while fetching it from the API so that the title of the card is expanded to the whole width of the card.
This is what I tried so far
HTML
<div *ngFor="let item of items">
<ion-row>
<ion-col>
<div>{{ item.title }}</div>
</ion-col>
<ion-col size="4" class="ion-text-center">
<img src="{{ item.imageurl }}" (error)="handleImageError($event)" />
</ion-col>
</ion-row>
</div>
TS
handleImageError(e) {
e.target.style.display = 'none';
}
I have created a working example using StackBlitz. Could anyone please help.
You are looking for *ngIf on image container, as it removes / adds the element from the DOM. And you will also have to slightly modify the handleImageError.
StackBlitz
<div *ngFor="let item of items">
<ion-row>
<ion-col>
<div>{{ item.title }}</div>
</ion-col>
<ion-col *ngIf="!item.hide" size="4" class="ion-text-center">
<img [src]="item.imageurl" (error)="handleImageError(item)" />
</ion-col>
</ion-row>
</div>
And then in the script, in the handleImageError - do this:
items = [
{imageUrl: '5353ssa.png'},
{imageUrl: 'https://latam.kaspersky.com/content/es-mx/images/product-icon-KSOS.png'},
{imageUrl: '5353ssa.png'},
{imageUrl: '5353ssa.png'},
]
handleImageError(image) {
image.hide = true;
}
Your problem is about your container. U have two columns. Then u will hide column instead of image. U can use ngIf
https://stackblitz.com/edit/ionic-a5wy8u
<ion-col *ngIf="!car.isSHOW">
<ion-card-content>
<img src="{{car.url}}" (error)="handleImageError(car)">
</ion-card-content>
</ion-col>
in component change its to true
handleImageError(e) {
e.isSHOW = true;
}
I would suggest you to use ngIf to hide the complete image, the way I would have address this is
Create a boolean variable at the top of your component.
let shouldHide = false;
Use this variable and ngIf at your image, you can use this at the container level or the image level itself like.
<img src="{{ imageurl }}" (error)="handleImageError($event)" *ngIf="shoudHide"/>
Assign true in case of error
handleImageError(e) {
e.target.style.display = 'none';
this.shouldHide = true;
}
Hope it helps
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>
In my app I'm doing this:
<ion-col *ngFor ="let place of intentList, let photo of photoList">
<ion-card>
<ion-card-content>
<img class="img" src = "{{photo}}" (click)="clickedImage(place.intent)">
<div>{{place.val}}</div>
</ion-card-content>
</ion-card>
</ion-col>
the array photoList contains strings with different photo url. This is the array:
this.photoList = ["./assets/images/001-breakfast.png", "./assets/images/002-brunch.png", "./assets/images/003-sandwich.png",
"./assets/images/004-food.png", "./assets/images/005-dinner.png", "./assets/images/006-cake.png", "./assets/images/007-cocktail.png"]
But this is what my app looks like:
<ion-col *ngFor ="let place of intentList; let i=index;">
<ion-card>
<ion-card-content>
<img class="img" src = "{{photo[i]}}" (click)="clickedImage(place.intent)">
<div>{{place.val}}</div>
</ion-card-content>
</ion-card>
</ion-col>
You can achieve it Using index:
This is because you can't run 2 loops in angular. So you are actually not getting the value of photo path in your variable photo.
But instead you are getting the value of variable place in the variable photo.
you can check it printing the value of photo
{{photo}}
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.
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.