Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months ago
JSON representation
Quickly integrate pretty checkbox components with Angular
- Host: GitHub
- URL: https://github.com/miladfm/ngx-pretty-checkbox
- Owner: miladfm
- License: mit
- Created: 2018-10-21T10:28:52.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T09:17:41.000Z (9 months ago)
- Last Synced: 2024-04-24T13:52:22.779Z (9 months ago)
- Topics: angular, checkbox, css, ngx-pretty-checkbox, pretty, pretty-checkbox, radio, radio-buttons, switch
- Language: HTML
- Homepage: https://miladfm.github.io/ngx-pretty-checkbox/
- Size: 2.13 MB
- Stars: 26
- Watchers: 7
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - ngx-pretty-checkbox
README
NgxPrettyCheckbox
Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular
### 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.