import { Component , ElementRef , HostListener , Input , OnDestroy , Optional , Renderer , ViewEncapsulation } from '@angular/core' ; import { NG_VALUE_ACCESSOR } from '@angular/forms' ; import { Config } from '../../config/config' ; import { isTrueProperty } from '../../util/util' ; import { Form , IonicTapInput } from '../../util/form' ; import { BaseInput } from '../../util/base-input' ; import { Item } from '../item/item' ; name module description usage advanced Component demo see {@link /docs/components#checkbox Checkbox Component Docs} @ Component ( { selector : 'ion-checkbox' , template : '<div class="checkbox-icon" [class.checkbox-checked]="_value">' + '<div class="checkbox-inner"></div>' + '</div>' + '<button role="checkbox" ' + 'type="button" ' + 'ion-button="item-cover" ' + '[id]="id" ' + '[attr.aria-checked]="_value" ' + '[attr.aria-labelledby]="_labelId" ' + '[attr.aria-disabled]="_disabled" ' + 'class="item-cover"> ' + '</button>' , host : { '[class.checkbox-disabled]' : '_disabled' } , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : Checkbox , multi : true } ] , encapsulation : ViewEncapsulation . None , } ) export class Checkbox extends BaseInput < boolean > implements IonicTapInput , OnDestroy { input @ Input ( ) get checked ( ) : boolean { return this . value ; } set checked ( val ) { this . value = val ; } constructor ( config , form , @ Optional ( ) item , elementRef , renderer ) { super ( config , elementRef , renderer , 'checkbox' , false , form , item , null ) ; } hidden @ HostListener ( 'click' , [ '$event' ] ) _click ( ev ) { ev . preventDefault ( ) ; ev . stopPropagation ( ) ; this . value = ! this . value ; this . _fireTouched ( ) ; } hidden _inputNormalize ( val ) { return isTrueProperty ( val ) ; } hidden _inputUpdated ( ) { this . _item && this . _item . setElementClass ( 'item-checkbox-checked' , this . _value ) ; } }