Home

Awesome

<h1 align="center"> <br> <a href="https://miladfm.github.io/ngx-pretty-checkbox/"><img src="/logo.gif" alt="Pretty checkbox angular" width="100"></a> <br> <br> NgxPrettyCheckbox <br> </h1> <h4 align="center">Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular </h4> <p align="center"> <a href="https://github.com/miladfm/ngx-pretty-checkbox/releases"> <img src="https://img.shields.io/badge/release-v1.2.1-blue.svg"> </a> <a href="https://github.com/angular/angular"> <img src="https://img.shields.io/badge/angular-10.x-blue.svg"> </a> <a href="https://lokesh-coder.github.io/pretty-checkbox/"> <img src="https://img.shields.io/badge/pretty--checbox-3.x-blue.svg" alt="Github Release"> </a> <a href="LICENSE"> <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Licence"> </a> </p> <br> <div class="highlight highlight-source-shell"> <pre> <div align="center"><strong >Demo and documentation</strong></div> <div align="center"><a align="center" href="https://miladfm.github.io/ngx-pretty-checkbox/">https://miladfm.github.io/ngx-pretty-checkbox/</a></div> </pre> </div> <div align="center"> <img src="/preview.gif" alt="Pretty checkbox preview"/> </div>

<br><br><br><br>

Changes log

ngx-pretty-checkboxangularfeature
18.0.018.x
17.0.117.x
16.0.016.x
15.1.015.xStateless checkbox. There is no local state to update the checkbox by the user interaction. The component emit only the new state event. Use case: for a one-way data binding. For example, when the checkbox is clicked, a request should be sent to the server and the UI should be updated if the response is successful.
15.0.015.xStandalone component
12.0.012.x
11.0.011.x
1.2.0>10.xivy
1.1.0>8.x
1.0.46.x 7.x

Installation

Install the pretty-checkbox from npm or yarn package manager

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

Alternatively, you can also use CDN link

https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css
<br>

Download pretty-checkbox angular module from npm package manager

> npm install ngx-pretty-checkbox
<br>

Add dist/pretty-checkbox.min.css file from node_module of pretty-checkbox in your html or import src/pretty-checkbox.scss file in your scss file

@import '~pretty-checkbox/src/pretty-checkbox.scss';
<br>

Add ngx-pretty-checkbox in your AppModule or component to import all standalone components

import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';

@NgModule({
  imports: [
    ...,
    NgxPrettyCheckboxModule
  ],
  ...
})
export class AppModule { 
  ...
}

Or import the ngx-pretty-checkbox standalone components to you component

import {
  NgxPrettyCheckboxComponent,
  NgxPrettyCheckboxWillChangeComponent,
  NgxPrettyHoverComponent,
  NgxPrettyHoverWillChangeComponent,
  NgxPrettyIconDirective,
  NgxPrettyImageDirective,
  NgxPrettyIndeterminateComponent,
  NgxPrettyIndeterminateWillChangeComponent,
  NgxPrettyRadioComponent,
  NgxPrettyRadioGroupDirective,
  NgxPrettyRadioWillChangeComponent,
  NgxPrettySvgDirective,
  NgxPrettyToggleComponent,
  NgxPrettyToggleWillChangeComponent,
} from 'ngx-pretty-checkbox';

@Component({
  standalone: true,
  imports: [
    NgxPrettyCheckboxComponent,
    NgxPrettyCheckboxWillChangeComponent,
    NgxPrettyHoverComponent,
    NgxPrettyHoverWillChangeComponent,
    NgxPrettyIndeterminateComponent,
    NgxPrettyIndeterminateWillChangeComponent,
    NgxPrettyRadioComponent,
    NgxPrettyRadioWillChangeComponent,
    NgxPrettyToggleComponent,
    NgxPrettyToggleWillChangeComponent,
    NgxPrettyIconDirective,
    NgxPrettyImageDirective,
    NgxPrettyRadioGroupDirective,
    NgxPrettySvgDirective
  ],
  selector: 'my-component',
  ...
})
export class MyComponent {
}
<br>

Basic usage

<p-checkbox>
  Default
</p-checkbox>

<br><br><br>

Stateless usage

@Component({
  standalone: true,
  imports: [NgxPrettyCheckboxComponent],
  selector: 'app-root',
  template: `
    <p-checkbox [stateless]="true" [checked]="checked" (change)="onStateChange($event)">Stateless Checkbox</p-checkbox>
  `
})
export class MyComponent {
  
  public checked = false;

  private http = inject(HttpClient);
  private cd = inject(ChangeDetectorRef);
  
  onStateChange(change: PrettyCheckBoxChange) {
    this.http.post(...).subscribe(_ => {
      this.checked = true;
      this.cd.detectChanges();
    })
  }
}

More demos and document

There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.

Please refer the documentation to know about them.

<br><br>

Browser support

Works in all modern browsers.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9

License

This project is licensed under the MIT License. Copyright (c) milad faghihi.