There are two directives that can make a group of buttons behave like a set of checkboxes, radio\r\n buttons, or a hybrid where radio buttons can be unchecked.
\r\nThe easiest way to add the buttons component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component buttons\r\n
Checkbox-like buttons set with variable states
`,\r\n component: require('!!raw-loader!./demos/checkbox/checkbox.ts'),\r\n html: require('!!raw-loader!./demos/checkbox/checkbox.html'),\r\n outlet: DemoButtonsCheckboxComponent\r\n },\r\n {\r\n title: 'Custom checkbox value',\r\n anchor: 'custom-checkbox-value',\r\n component: require('!!raw-loader!./demos/custom-checkbox-value/custom-checkbox-value.ts'),\r\n html: require('!!raw-loader!./demos/custom-checkbox-value/custom-checkbox-value.html'),\r\n outlet: DemoButtonsCustomCheckboxValueComponent\r\n },\r\n {\r\n title: 'Checkbox with Reactive Forms',\r\n anchor: 'checkbox-reactiveforms\"',\r\n description: `Checkbox buttons with ReactiveForms
`,\r\n component: require('!!raw-loader!./demos/checkbox-reactiveforms/checkbox-reactiveforms.ts'),\r\n html: require('!!raw-loader!./demos/checkbox-reactiveforms/checkbox-reactiveforms.html'),\r\n outlet: DemoButtonsCheckboxReactiveFormsComponent\r\n },\r\n {\r\n title: 'Radio with radio group',\r\n anchor: 'radio-button-with-group',\r\n description: `Radio buttons with checked/unchecked states. Radio buttons used together with a btnRadioGroup can be\r\nused in template driven and reactive forms.\r\nThey follow the W3C WAI-AIRA design pattern for radio groups.\r\nMeaning\r\n
The second method to create a radio button group is to use the same ngModel binding with several buttons.\r\n This works only for template driven forms and is not generally advised. But there are use cases were this might be useful, e.g. in tables.\r\n In terms of accessibility the buttons in the group can not be selected with the arrow keys, but individually reached by using the tab key\r\n and then be toggled by using the space key. You can check out the demo below.
Radio buttons with ReactiveForms. Example below shows how to use radio buttons with reactive\r\n forms. Please be aware that for reactive forms it's required to use btnRadioGroup directive along with\r\n btnRadio's
{{myForm.value | json}}\r\n\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-buttons-checkbox',\r\n templateUrl: './checkbox.html'\r\n})\r\nexport class DemoButtonsCheckboxComponent {\r\n checkModel: any = { left: false, middle: true, right: false };\r\n}\r\n","{{checkModel | json}}\r\n\r\n{{singleModel}}\r\n\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-buttons-disabled',\r\n templateUrl: './disabled.html'\r\n})\r\nexport class DemoButtonsDisabledComponent {\r\n disabled: boolean = false;\r\n}\r\n","\r\n\r\n\r\n","import { Component, OnInit } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'demo-buttons-radio-reactiveforms',\r\n templateUrl: './radio-reactiveforms.html'\r\n})\r\nexport class DemoButtonsRadioReactiveFormsComponent implements OnInit {\r\n myForm: FormGroup;\r\n\r\n constructor(private formBuilder: FormBuilder) {}\r\n\r\n ngOnInit() {\r\n this.myForm = this.formBuilder.group({\r\n radio: 'C'\r\n });\r\n }\r\n}\r\n","{{ myForm.value | json }}\r\n\r\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-buttons-radio-with-group',\r\n templateUrl: './radio-with-group.html'\r\n})\r\nexport class DemoButtonsRadioWithGroupComponent {\r\n radioModel = 'Middle';\r\n radioModelDisabled = 'Middle';\r\n modelGroupDisabled=false\r\n}\r\n","{{radioModel || 'null'}}\r\n{{radioModelDisabled || 'null'}}\r\n{{radioModel || 'null'}}\r\n{{uncheckableRadioModel || 'null'}}\r\n{{myForm.value | json}}\\r\\n\\r\\n\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\nimport { FormBuilder, FormGroup } from '@angular/forms';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-buttons-checkbox-reactiveforms',\\r\\n templateUrl: './checkbox-reactiveforms.html'\\r\\n})\\r\\nexport class DemoButtonsCheckboxReactiveFormsComponent implements OnInit {\\r\\n myForm: FormGroup;\\r\\n\\r\\n constructor(private formBuilder: FormBuilder) {}\\r\\n\\r\\n ngOnInit() {\\r\\n this.myForm = this.formBuilder.group({\\r\\n left: false,\\r\\n middle: true,\\r\\n right: false\\r\\n });\\r\\n }\\r\\n}\\r\\n\";","export default \"{{checkModel | json}}\\r\\n\\r\\n{{singleModel}}\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-custom-checkbox-value',\\r\\n templateUrl: './custom-checkbox-value.html'\\r\\n})\\r\\nexport class DemoButtonsCustomCheckboxValueComponent {\\r\\n singleModel = '1';\\r\\n}\\r\\n\";","export default \"\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-buttons-disabled',\\r\\n templateUrl: './disabled.html'\\r\\n})\\r\\nexport class DemoButtonsDisabledComponent {\\r\\n disabled: boolean = false;\\r\\n}\\r\\n\";","export default \"{{ myForm.value | json }}\\r\\n\\r\\n\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\nimport { FormBuilder, FormGroup } from '@angular/forms';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-buttons-radio-reactiveforms',\\r\\n templateUrl: './radio-reactiveforms.html'\\r\\n})\\r\\nexport class DemoButtonsRadioReactiveFormsComponent implements OnInit {\\r\\n myForm: FormGroup;\\r\\n\\r\\n constructor(private formBuilder: FormBuilder) {}\\r\\n\\r\\n ngOnInit() {\\r\\n this.myForm = this.formBuilder.group({\\r\\n radio: 'C'\\r\\n });\\r\\n }\\r\\n}\\r\\n\";","export default \"{{radioModel || 'null'}}\\r\\n{{radioModelDisabled || 'null'}}\\r\\n{{radioModel || 'null'}}\\r\\n{{uncheckableRadioModel || 'null'}}\\r\\n