How to achieve a toggle effect to individual ion-card? - html

Question

Current issue : Whenever I am changing toggle, change-effect applying on every ion card.
Expected : I want to achieve a toggle effect individually on ion-card.
HTML :
<ion-grid>
<ion-row>
<ion-col *ngFor="let device of individual_room.devices">
<ion-card>
<ion-col><img src="assets/icon/favicon.png"/></ion-col>
<ion-card-content>
<ion-card-title>
{{ device.name }} <ion-badge item-end>{{ device.company }} </ion-badge>
</ion-card-title>
<ion-toggle [(ngModel)]="deviceStatus" (ionChange)="deviceStatusChange()"></ion-toggle>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
CSS :
ion-card {
--background:#262626;
height: 150px;
width: 80% !important;
}
ion-toggle[aria-checked="false"]{
position: relative;
width: 60px;
&::before {
position: absolute;
content: "";
font-size: 10px;
line-height: 10px;
}
&::after {
position: absolute;
content: "";
}
}
ion-toggle[aria-checked="true"]{
position: relative;
width: 60px;
&::before {
position: absolute;
content: "";
}
&::after {
position: absolute;
content: "";
font-size: 10px;
line-height: 10px;
top: 0;
left: 3px;
color: #fff;
}
}
TS file :
const TOKEN_KEY = 'CapacitorStorage.user-token'
#Component({
selector: 'app-tabhome',
templateUrl: './tabhome.page.html',
styleUrls: ['./tabhome.page.scss'],
})
export class TabhomePage implements OnInit, AfterViewInit {
public deviceStatus:boolean = true;
ngOnInit() {
// locally provided json file
fetch('./assets/data/tabHomeData.json').then(res => res.json())
.then(res => {
this.data = res
});
const headerHeight = isPlatform('ios') ? 44 : 56
this.document.documentElement.style.setProperty(
'--header-position',
`calc(env(safe-area-inset-top) + ${headerHeight}px)`
)
}
deviceStatusChange(){
console.log("device toggle switch : "+this.deviceStatus);
}
ngAfterViewInit() {
this.lists.changes.subscribe((_) => {
this.listElements = this.lists.toArray()
})
}
tabHomeData.json :
{
"user": "Ram",
"rooms": [
{
"name": "LIVING ROOM",
"devices": [
{
"name": "fan",
"type": "FAN",
"company": "Philips",
"state": "ON",
"speed": 100
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
},
{
"name": "Hall TV",
"type": "TV",
"company": "Redmi",
"state": "OFF"
},
{
"name": "AC",
"type": "AC",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
}
]
},
{
"name": "Kitchen",
"devices": [
{
"name": "fan",
"type": "FAN",
"company": "Philips",
"state": "OFF",
"speed": 50
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "OFF",
"colour": "YELLOW"
}
]
},
{
"name": "BED ROOM",
"devices": [
{
"name": "fan",
"type": "FAN",
"company": "Philips",
"state": "OFF",
"speed": 50
}
]
},
{
"name": "WASH ROOM",
"devices": [
{
"name": "exast",
"type": "FAN",
"company": "Philips",
"state": "OFF"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "OFF",
"colour": "YELLOW"
},
{
"name": "bulb",
"type": "BULB",
"company": "Philips",
"state": "ON",
"colour": "WHITE"
}
]
}
]
}
In HTML file through json file in a loop , I am trying to set every device in a cardView. And want to use toggle for each card separately.
Please find below attached screenshot :

Answer 1

There are many different ways to achieve the toggle on the ion-card, below is one way to achieve it:
use the state property on your json to manage the toggle state of the toggle component on the card
modify your toggle component like so:
<ion-toggle (click)="deviceStatusChange(device)"
[checked]="device.state =='ON'">
Add toggle state change to the deviceStatusChangeMethod
public deviceStatusChange(device:any) {
device.state = (device.state === 'ON') ? 'OFF' : 'ON';
}