ngx-pretty-checkbox

NgxPrettyCheckbox

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

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

Changes log

ngx-pretty-checkbox	angular	feature
18.0.0	18.x
17.0.1	17.x
16.0.0	16.x
15.1.0	15.x	Stateless 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.0	15.x	Standalone component
12.0.0	12.x
11.0.0	11.x
1.2.0	>10.x	ivy
1.1.0	>8.x
1.0.4	6.x 7.x

Installation

• Step 1

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

• Step 2

Download pretty-checkbox angular module from npm package manager

> 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

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

• Step 4

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 {
}

• Step 5

Basic usage

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

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.

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.