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/[email protected]/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.