On hitting toggle button new page opens. How to avoid it?

Question

I want to achieve below two functionalities :

1. toggle button ON/OFF. (Not want new details page to be open here)
2. clicking on CardView new details page should open.

On clicking cardView new details page opens, this working as expected. but, currently on hitting toggle button new page opens. I need help to avoid it.

Html Code for cardview:

<ion-list *ngFor="let individual_room of data?.rooms">
        <ion-list-header>
            <ion-label>{{ individual_room.name}}</ion-label>
        </ion-list-header>
        <ion-grid>
            <ion-row>
                <ion-col *ngFor="let device of individual_room.devices">
                    <ion-card (click)="openDetailsWithState(device)">
                        <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 (ionChange)="deviceStatusChange(device)" [checked]="device.state =='ON'"></ion-toggle>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-list>

home.page.ts :

deviceStatusChange(device: any) {
        device.state = device.state === 'ON' ? 'OFF' : 'ON'
        console.log('device toggle switch : ' + device.state)
    }

    openDetailsWithState(device: any) {
        let navigationExtras: NavigationExtras = {
            state: {
                device: device,
            },
        }
        this.router.navigate(['details'], navigationExtras)
    }