How to use ion-toggle button Ionic 7

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

ion-toggle

Toggles are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the checked property.

Ionic's ion-toggle is a user interface (UI) component that allows the user to toggle between two states, such as "on" and "off". Here are the steps to use ion-toggle in your Ionic application:

1. In your component's HTML template, add the ion-toggle element:

You can customize the ion-toggle by adding attributes to the element. For example, you can set the initial state of the toggle by adding the checked attribute:

You can also add a label to the ion-toggle by wrapping the element in an ion-item element and adding the label attribute:

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="success">
    <ion-title>
      Ionic toggle
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
      <ion-item>
        <ion-label>Toggle me</ion-label>
        <ion-toggle (ionChange)="toggleChanged($event)"></ion-toggle>
      </ion-item>
</ion-content>

To handle changes to the ion-toggle state, you can listen for the ionChange event in your component's TypeScript code:

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  toggleChanged(event: any) {
    console.log('Toggle state changed:', event.detail.checked);
  }

}

These are the basic steps to use ion-toggle in your Ionic application. You can further customize the ion-toggle using CSS and other attributes provided by Ionic.