ng-custom-checkbox

ng-custom-checkbox

Description

Simple checkbox and checkbox group components for Angular.

Installation

npm i ng-custom-checkbox

Usage example

// some.module.ts
import { NgCheckboxModule } from "ng-custom-checkbox";

@NgModule({
  imports: [NgCheckboxModule],
})
export class SomeModule {}

// some.component.ts
import { CheckboxGroupData } from "ng-custom-checkbox";

@Component({})
export class SomeComponent {
  formGroup = new FormGroup({
    checkbox: new FormControl(false, Validators.requiredTrue),
  });
  checkboxGroupData: CheckboxGroupData = [
    {
      id: 1,
      checked: false,
      label: "NYC Thin Crust",
    },
    {
      id: 2,
      checked: false,
      label: "Chicago Deep Dish",
    },
    {
      id: 3,
      checked: false,
      label: "Californian",
    },
    {
      id: 4,
      checked: false,
      label: "Neapolitan",
    },
    {
      id: 5,
      checked: false,
      label: "Detroit",
    },
  ];
}

<!-- some.component.html -->
<form [formGroup]="formGroup">
  <ng-checkbox formControlName="checkbox">Check</ng-checkbox>

  <ng-checkbox-group
    [checkAllEnabled]="true"
    [checkboxGroupData]="checkboxGroupData"
  ></ng-checkbox-group>
</form>

NgCheckboxComponent specs

Decorator	Property Name	Type
@Input	checked	boolean
@Output	checkedChange	EventEmitter<boolean>
@Input	disabled	boolean
@Input	invalid	boolean

NgCheckboxGroupComponent specs

Decorator	Property Name	Type
@Input	checkAllEnabled	boolean
@Input	checkboxGroupData	CheckboxGroupData

Contributing

If something does not work or you want to improve the package, feel free to create an issue on GitHub.

License

ISC