How to use ion-checkbox 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-checkbox

Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property.

ion-checkbox is a component in the Ionic Framework that allows you to create a checkbox input element. Here's an example of how to use it:

1. Add the ion-checkbox component to your HTML template:

<ion-checkbox [(ngModel)]="isChecked"></ion-checkbox>

In this example, [(ngModel)]="isChecked" is a two-way data binding that binds the state of the checkbox to the isChecked property in your component's TypeScript file. This means that when the user checks or unchecks the checkbox, the isChecked property will be updated accordingly.

1. Set any additional properties or attributes for the ion-checkbox component as needed. For example, you can use the checked attribute to set the initial state of the checkbox:

<ion-checkbox [(ngModel)]="isChecked" checked></ion-checkbox>

1.Handle the ionChange event to perform any actions when the checkbox is checked or unchecked. For example, you can use the following code to display a message when the checkbox is checked:

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      ion-checkbox
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen>]="true>">
 <div>
   <ion-checkbox [(ngModel)]="isChecked" (ionChange)="onCheckboxChange($event)"></ion-checkbox>
 </div>
</ion-content>

In your component's TypeScript file, define the onCheckboxChange method to handle the ionChange event:

In this example, the event parameter contains the state of the checkbox (checked or unchecked). You can use this information to perform any actions that you want when the checkbox is checked or unchecked.

That's it! With these steps, you should be able to use ion-checkbox in your Ionic app.

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

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

  isChecked: any;
  constructor() {}
  
  onCheckboxChange(event: any) {
    if (event.detail.checked) {
      console.log('Checkbox is checked');
    } else {
      console.log('Checkbox is unchecked');
    }
  }

}

CSS Custom

CSS works by selecting HTML elements and applying styling rules to them. It can be used to control the size, position, and spacing of elements on a page, as well as the font styles, colors, and background images. CSS also allows for responsive design, where the layout of a page changes depending on the size of the screen it is being viewed on.

ion-checkbox {
  --size: 32px;
  --checkbox-background-checked: #6815ec;
}

ion-checkbox::part(container) {
  border-radius: 6px ;
  border: 2px solid     #6815ec ;
}
div {
  /* Center horizontally */
  margin: 0 auto;
  
  /* Center vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}