NgxPrettyCheckbox

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

Demo and documentation

https://miladfm.github.io/ngx-pretty-checkbox/

$3

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

$3

Install the pretty-checkbox from npm or yarn package manager
``sh
> npm install pretty-checkbox // or
> yarn add pretty-checkbox
`
Alternatively, you can also use CDN link
`sh
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
`sh
> 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
`sh
@import '~pretty-checkbox/src/pretty-checkbox.scss';
`



- Step 4

Add ngx-pretty-checkbox in your AppModule or component to import all standalone components
`sh
import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';

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

Or import the ngx-pretty-checkbox standalone components to you component
`sh
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
`sh

Default

`






Stateless usage
`sh
@Component({
standalone: true,
imports: [NgxPrettyCheckboxComponent],
selector: 'app-root',
template:
Stateless 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.

$3

Works in all modern browsers.

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

$3