NgxPrettyCheckbox

Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular

Demo and documentation
https://miladfm.github.io/ngx-pretty-checkbox/

Changes log

Installation

• Step 1

Install the pretty-checkbox from npm or yarn package manager

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

Alternatively, you can also use CDN link

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

• Step 2

Download pretty-checkbox angular module from npm package manager

1> npm install ngx-pretty-checkbox

• Step 3

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

1@import '~pretty-checkbox/src/pretty-checkbox.scss';

• Step 4

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

1import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
2
3@NgModule({
4  imports: [
5    ...,
6    NgxPrettyCheckboxModule
7  ],
8  ...
9})
10export class AppModule { 
11  ...
12}

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

1import {
2  NgxPrettyCheckboxComponent,
3  NgxPrettyCheckboxWillChangeComponent,
4  NgxPrettyHoverComponent,
5  NgxPrettyHoverWillChangeComponent,
6  NgxPrettyIconDirective,
7  NgxPrettyImageDirective,
8  NgxPrettyIndeterminateComponent,
9  NgxPrettyIndeterminateWillChangeComponent,
10  NgxPrettyRadioComponent,
11  NgxPrettyRadioGroupDirective,
12  NgxPrettyRadioWillChangeComponent,
13  NgxPrettySvgDirective,
14  NgxPrettyToggleComponent,
15  NgxPrettyToggleWillChangeComponent,
16} from 'ngx-pretty-checkbox';
17
18@Component({
19  standalone: true,
20  imports: [
21    NgxPrettyCheckboxComponent,
22    NgxPrettyCheckboxWillChangeComponent,
23    NgxPrettyHoverComponent,
24    NgxPrettyHoverWillChangeComponent,
25    NgxPrettyIndeterminateComponent,
26    NgxPrettyIndeterminateWillChangeComponent,
27    NgxPrettyRadioComponent,
28    NgxPrettyRadioWillChangeComponent,
29    NgxPrettyToggleComponent,
30    NgxPrettyToggleWillChangeComponent,
31    NgxPrettyIconDirective,
32    NgxPrettyImageDirective,
33    NgxPrettyRadioGroupDirective,
34    NgxPrettySvgDirective
35  ],
36  selector: 'my-component',
37  ...
38})
39export class MyComponent {
40}

• Step 5

Basic usage

1<p-checkbox>
2  Default
3</p-checkbox>

Stateless usage

1@Component({
2  standalone: true,
3  imports: [NgxPrettyCheckboxComponent],
4  selector: 'app-root',
5  template: `
6    <p-checkbox [stateless]="true" [checked]="checked" (change)="onStateChange($event)">Stateless Checkbox</p-checkbox>
7  `
8})
9export class MyComponent {
10  
11  public checked = false;
12
13  private http = inject(HttpClient);
14  private cd = inject(ChangeDetectorRef);
15  
16  onStateChange(change: PrettyCheckBoxChange) {
17    this.http.post(...).subscribe(_ => {
18      this.checked = true;
19      this.cd.detectChanges();
20    })
21  }
22}

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.

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.