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}}
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
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>
I've an ion-card that get its contents from a web server, all is working fine except linking ion-card click event to external url, below is my code
<ion-content no-padding >
<ion-item no-padding *ngFor="let item of items" >
<ion-card (click)="goToDetails('{{item.link}}')">
<img class="images" src="http://mydomain/{{item.captionImage}}">
<ion-item text-wrap>
<div class="headings">{{item.title}}</div>
</ion-item>
<ion-card-content text-wrap>
<p>{{item.message}}"</p>
</ion-card-content>
<ion-row>
<ion-col col-9>
<ion-row>
<ion-col>
<img class="owner-logo" src="http://mydomain/{{item.sourceLogo}}">
</ion-col>
<ion-col>
<div class="owner-name">{{item.source}}</div>
</ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
</ion-row>
</ion-col>
<ion-col col-3 text-right>
<button ion-button clear small color="danger" icon-start (click)="regularShare(index)">
<ion-icon name='share'></ion-icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>
</ion-item>
</ion-content>
my .ts file is
public goToDetails(url : string){
let target = "_self";
this.theInAppBrowser.create(url,target,this.options);
}
I got this error message
Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 13.
You need to write ion-card like this
<ion-card (click)="goToDetails(item.link)">
If you are in in-build directive like click, ngIf you don't need to use interpolation
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.