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>
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 want to position a div with the id "first" to the right of another div with the id "second" how to do that ?
<ion-col>
<div id="second">
<ion-img src="./assets/images/from_to.svg" style="height:30%;width:10%;"></ion-img>
</div>
<div id="first">
<ion-label>Domicile</ion-label>
<ion-label >120 Square de la Couronne,Paris</ion-label>
</div>
</ion-col>
First of all, I suggest you lessen the use of the basic html, for example, try using instead of .
Second, you practically never use id with html tags.
Now to answer your question, a little bit more code would help but here's one solution:
HTML:
<ion-col>
<ion-item class="second">
<ion-image class="img" src="/assets/images/from_to.svg" />
</ion-item>
<ion-item class="first">
<ion-label>Domicile</ion-label>
<ion-label>120 Square de la Couronne,Paris</ion-label>
</ion-item>
</ion-col>
CSS:
.first{
float: right;
}
.second{
float:left;
}
I assume that you already know that "HTML" goes to your x.page.html and the "CSS" goes to your x.page.scss of the same folder.
Looks like you want to create a list containing an image with an description on the right side on every element. If that's the case try ion-list which offers interacting with the list elements much easier, since you can use the included swiping, dragging within the list, and deleting items.
Example:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
</ion-list>
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
<ion-list>
<div>
<ion-list>
<div *ngFor="let itinerary of filteredItineraries">
<ion-card class="itinerary-module">
<ion-card-content *ngIf="itinerary.id !== selection.id">
<div>
<h2>{{itinerary.startDate | date: "MM/dd/yyyy"}} - {{itinerary.endDate | date: "MM/dd/yyyy"}}</h2>
</div>
<div>
<h1>{{itinerary.jobDesc}}</h1>
</div>
<div>
<h2>{{itinerary.jobCode}}</h2>
</div>
<ion-item lines="none">
<ion-icon slot="start" name="thumbs-down" (click)="removeItem(itinerary.id)></ion-icon>
<ion-icon slot="end" name="thumbs-up" (click)="removeItem(itinerary.id)" ></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
</div>
</ion-list>
</div>
</ion-list>
Is there a way to only display this list one item at a time...say index 0, then when I click one of the icons to remove the current item in index 0 so that index 1 then moves to 0 and is displayed on the screen?
Do not iterate over the loop and render. Just point the UI to first element filteredItenaries[0]
If you want to show the next item, call a function which has the implementation filteredIternaries.splice(0,1). So, therefore, the first element will be updated in the Array as well as in the UI.
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}}