Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Quickly integrate pretty checkbox components with Angular
https://github.com/miladfm/ngx-pretty-checkbox

angular checkbox css ngx-pretty-checkbox pretty pretty-checkbox radio radio-buttons switch

Last synced: about 1 month ago
JSON representation

Quickly integrate pretty checkbox components with Angular

Awesome Lists containing this project

README

        




Pretty checkbox angular


NgxPrettyCheckbox

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







Github Release


Licence




Pretty checkbox preview





### 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
```sh
> npm install pretty-checkbox // or
> yarn add pretty-checkbox
```
Alternatively, you can also use CDN link
```sh
https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css
```


- **Step 2**

Download pretty-checkbox angular module from [`npm`](https://www.npmjs.com/package/ngx-pretty-checkbox) 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](https://miladfm.github.io/ngx-pretty-checkbox/) 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.