How to change the id of clicked image - css

Question

I want to change the id of selected image on click. Currently, clicking one image will affect all the images with [id]="available". How can I change for specific image. Here is my html
<ion-row>
<ion-avatar *ngFor="let seat of row1.seats; let i=index;" id="item-
{{i}}">
<ion-label>{{seat.label}}</ion-label>
<img *ngIf="seat.booked===true" src="assets/st.png" id="booked">
<img *ngIf="seat.booked===false" src="assets/st.png"
[id]="available" (click)="selectedSeat(seat.id)">
</ion-avatar>
</ion-row>
Here is ts.
available = "available";
selectedSeat(id) {
this.available = "selected";
}
css:
#available {
background-color: cornsilk;
}
#selected {
background-color: #614056;
}

Answer 1

You can use setAttribute() of Renderer2 and template reference like following:
In template, add #myImg to img tag:
<img *ngIf="seat.booked===false" src="assets/st.png #myImg (click)="selectedSeat(myImg, seat.id)">
In component (.ts) file, inject Renderer2 and use it in selectedSeat method:
constructor(private renderer: Renderer2){}
selectedSeat(seletctedSeat: ElementRef, id) {
this.renderer.setAttribute(seletctedSeat.nativeElement, 'id', 'selected');
}
!BUT!
I think assigning id attribute is not the right way to do it. ID should be unique by nature, so you are assignin same ID to multiple elements. This sounds wrong. I think you should change CSS class if you only want to change styling but not applying any logic (like doing something with selected seat) with following:
In .ts file:
selectedSeat(seletctedSeat: ElementRef, id) {
this.renderer.addClass(seletctedSeat.nativeElement, 'selected');
}
In CSS:
.selected {
background-color: #614056;
}
UPDATE
You can create an array and push selected ID's to it. Then check if the array includes the seat.id:
In template:
<img *ngIf="seat.booked===false" src="assets/st.png"
[ngClass]="selectedSeatList.includes(seat.id) ? 'selected' : 'available'" (click)="toggleSelection(seat.id)">
In component (.ts) file:
selectedSeatList: Array<number> = [];
toggleSelection = (seatID) => {
if(this.selectedSeatList.includes(seatID)){
this.selectedSeatList = this.selectedSeatList.filter(id => id !== seatID);
}else{
this.selectedSeatList.push(seatID);
}
}

Answer 2

It looks like you want to change the background-color for an ngFor-created element with an index, when that index is selected through the selectedSeat() function.
If this is accurate, I would say to ignore the element's id entirely and use class instead.
You could start by using your selectedSeat() function to accept the template element's index as well as seat.id, then change your available variable to something like currentlySelectedSeat to the currently selected ngFor element's index:
currentlySelectedSeat = 0; // <-- default to first index (if you wish)
selectedSeat(seatId, index) {
if (index) { // <-- basic check
this.currentlySelectedSeat = index; // <-- assign id
}
// do whatever else with seatId
}
If you slightly alter your css to define classes instead of ids like this:
.available {
background-color: cornsilk;
}
.selected {
background-color: #614056;
}
..you could then use a ternary in an ngClass and structure your template like this:
<ion-row>
<ion-avatar *ngFor="let seat of row1.seats; index as i;"> // <-- id not necessarily needed. index still assigned to i, just written differently
<ion-label>{{seat.label}}</ion-label>
<img *ngIf="seat.booked===true" src="assets/st.png" class="booked"> // <-- unless there will only ever be one of these images, use class instead of id
<img *ngIf="seat.booked===false" src="assets/st.png"
[ngClass]="currentlySelectedSeat === i ? 'selected' : 'available'" // <-- *this line clarified below
(click)="selectedSeat(seat.id, i)"> // <-- expand function to accept template index as well.
</ion-avatar>
</ion-row>
*Clarified ngClass template line: this is the same as writing:
if (available === i) { // <-- if the variable named available's value is the same as the index which was passed through selectedSeat() on click
return 'selected'; // <-- give ngClass a string which corresponds to .selected
} else {
return 'available'; // <-- give ngClass a string which corresponds to .available