Buttons component on github

There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.

The easiest way to add the buttons component to your app (will be added to the root module)

Basic

#

<button type="button" class="btn btn-primary">
  Single Button
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-basic',
  templateUrl: './basic.html',
  standalone: false
})
export class DemoButtonsBasicComponent {}

Checkbox

#

Checkbox-like buttons set with variable states

{
  "left": false,
  "middle": true,
  "right": false
}
<pre class="card card-block card-header">{{checkModel | json}}</pre>

<div class="btn-group">
  <label class="btn btn-primary" [(ngModel)]="checkModel.left"
         btnCheckbox tabindex="0" role="button">Left</label>
  <label class="btn btn-primary" [(ngModel)]="checkModel.middle"
         btnCheckbox tabindex="0" role="button">Middle</label>
  <label class="btn btn-primary" [(ngModel)]="checkModel.right"
         btnCheckbox tabindex="0" role="button">Right</label>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-checkbox',
  templateUrl: './checkbox.html',
  standalone: false
})
export class DemoButtonsCheckboxComponent {
  checkModel: { left?: boolean; middle?: boolean; right?: boolean } = { left: false, middle: true, right: false };
}

Custom checkbox value

#

1
<pre class="card card-block card-header">{{singleModel}}</pre>
<button type="button" class="btn btn-primary"
        [(ngModel)]="singleModel" btnCheckbox
        btnCheckboxTrue="1" btnCheckboxFalse="0">
  Single Toggle
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-custom-checkbox-value',
  templateUrl: './custom-checkbox-value.html',
  standalone: false
})
export class DemoButtonsCustomCheckboxValueComponent {
  singleModel = '1';
}

Checkbox with Reactive Forms

#

Checkbox buttons with ReactiveForms

{
  "left": false,
  "middle": true,
  "right": false
}
<pre class="card card-block card-header">{{myForm?.value | json}}</pre>
@if (myForm) {
  <form [formGroup]="myForm">
    <div class="btn-group">
      <label class="btn btn-primary" [class.active]="myForm?.value.left"
        btnCheckbox formControlName="left"
      tabindex="0" role="button">Left</label>
      <label class="btn btn-primary" [class.active]="myForm?.value.middle"
        btnCheckbox formControlName="middle"
      tabindex="0" role="button">Middle</label>
      <label class="btn btn-primary" [class.active]="myForm?.value.right"
        btnCheckbox formControlName="right"
      tabindex="0" role="button">Right</label>
    </div>
  </form>
}

import { Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-checkbox-reactiveforms',
  templateUrl: './checkbox-reactiveforms.html',
  standalone: false
})
export class DemoButtonsCheckboxReactiveFormsComponent implements OnInit {
  myForm?: UntypedFormGroup;

  constructor(private formBuilder: UntypedFormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      left: false,
      middle: true,
      right: false
    });
  }
}

Radio with radio group

#

Radio buttons with checked/unchecked states. Radio buttons used together with a btnRadioGroup can be used in template driven and reactive forms. They follow the W3C WAI-AIRA design pattern for radio groups. Meaning

  • The Radio Group is inserted in the tab-order of the page by automatically adding a tabindex attribute
  • The selected radio element can be changed with the arrow keys if the focus is in the group
  • The role of the group is set to "radiogroup" and the aria-checked attributes are added according to the state
Individual buttons or the whole group can be marked as disabled. 

Middle
Middle
<pre class="card card-block card-header">{{radioModel || 'null'}}</pre>
<div class="form-inline d-flex align-items-center">
  <div class="btn-group" btnRadioGroup [(ngModel)]="radioModel" [disabled]="modelGroupDisabled">
    <label class="btn btn-success mb-0" btnRadio="Left">Left</label>
    <label class="btn btn-success mb-0" btnRadio="Middle">Middle</label>
    <label class="btn btn-success mb-0" btnRadio="Another" [disabled]="true">Disabled</label>
    <label class="btn btn-success mb-0" btnRadio="Right">Right</label>
  </div>
  <button class="btn btn-warning" (click)="modelGroupDisabled = !modelGroupDisabled">Enable/Disable</button>
</div>


<pre class="card card-block card-header">{{radioModelDisabled || 'null'}}</pre>
<div class="form-inline d-flex align-items-center">
  <div class="btn-group" btnRadioGroup [(ngModel)]="radioModelDisabled" disabled>
    <label class="btn btn-success" btnRadio="Left">Left</label>
    <label class="btn btn-success" btnRadio="Middle">Middle</label>
    <label class="btn btn-success" btnRadio="Right">Right</label>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-radio-with-group',
  templateUrl: './radio-with-group.html',
  standalone: false
})
export class DemoButtonsRadioWithGroupComponent {
  radioModel = 'Middle';
  radioModelDisabled = 'Middle';
  modelGroupDisabled=false;
}

Radio without explicit group

#

The second method to create a radio button group is to use the same ngModel binding with several buttons. 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. 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 and then be toggled by using the space key. You can check out the demo below.

Middle
<pre class="card card-block card-header">{{radioModel || 'null'}}</pre>
<div class="btn-group">
  <label class="btn btn-primary" [(ngModel)]="radioModel"
         btnRadio="Left" tabindex="0" role="button">Left</label>
  <label class="btn btn-primary" [(ngModel)]="radioModel"
         btnRadio="Middle" tabindex="0" role="button">Middle</label>
  <label class="btn btn-primary" [(ngModel)]="radioModel"
         btnRadio="Right" tabindex="0" role="button">Right</label>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-radio',
  templateUrl: './radio.html',
  standalone: false
})
export class DemoButtonsRadioComponent {
  radioModel = 'Middle';
}

Uncheckable Radio

#

Middle
<pre class="card card-block card-header">{{uncheckableRadioModel || 'null'}}</pre>
<div class="btn-group" btnRadioGroup [(ngModel)]="uncheckableRadioModel">
  <label class="btn btn-info" btnRadio="Left"
         [uncheckable]="true" tabindex="0" role="button">Left</label>
  <label class="btn btn-info" btnRadio="Middle"
         [uncheckable]="true" tabindex="0" role="button">Middle</label>
  <label class="btn btn-info" btnRadio="Right"
         [uncheckable]="true" tabindex="0" role="button">Right</label>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-radio-uncheckable',
  templateUrl: './uncheckable-radio.html',
  standalone: false
})
export class DemoButtonsUncheckableRadioComponent {
  uncheckableRadioModel = 'Middle';
}

Radio with Reactive Forms

#

Radio buttons with ReactiveForms. Example below shows how to use radio buttons with reactive forms. Please be aware that for reactive forms it's required to use btnRadioGroup directive along with btnRadio's

{
  "radio": "C"
}
<pre class="card card-block card-header">{{ myForm?.value | json }}</pre>
@if (myForm) {
  <form [formGroup]="myForm" class="form-inline d-flex align-items-center">
    <div class="form-group mb-3">
      <div class="btn-group" btnRadioGroup formControlName="radio">
        <label btnRadio="A" class="btn btn-primary mb-0">A</label>
        <label btnRadio="B" class="btn btn-primary mb-0">B</label>
        <label btnRadio="C" class="btn btn-primary mb-0">C</label>
      </div>
      <button class="btn btn-primary" (click)="myForm?.disabled ? myForm?.enable() : myForm?.disable()">Enable/Disable</button>
    </div>
  </form>
}

import { Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-radio-reactiveforms',
  templateUrl: './radio-reactiveforms.html',
  standalone: false
})
export class DemoButtonsRadioReactiveFormsComponent implements OnInit {
  myForm?: UntypedFormGroup;

  constructor(private formBuilder: UntypedFormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      radio: 'C'
    });
  }
}

Disabled Buttons

#

<button type="button" class="btn btn-primary" [disabled]="disabled">Button</button>
<button type="button" class="btn btn-warning" (click)="disabled = !disabled">Enable/Disable</button>


import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-buttons-disabled',
  templateUrl: './disabled.html',
  standalone: false
})
export class DemoButtonsDisabledComponent {
  disabled = false;
}

Installation

ng add ngx-bootstrap  --component buttons
### Standalone component usage
import { ButtonsModule } from 'ngx-bootstrap/buttons';

@Component({
  imports: [
    ButtonsModule,
    ...
  ]
})
export class AppComponent(){}


### Module usage
import { ButtonsModule } from 'ngx-bootstrap/buttons';

@NgModule({
  imports: [ButtonsModule,...]
})
export class AppModule(){}

ButtonCheckboxDirective

Add checkbox functionality to any element

Selector

ButtonRadioDirective

Create radio buttons or groups of buttons. A value of a selected button is bound to a variable specified via ngModel.

Selector

ButtonRadioGroupDirective

A group of radio buttons. A value of a selected button is bound to a variable specified via ngModel.

Selector

Basic

Checkbox 

{
  "left": false,
  "middle": true,
  "right": false
}

Custom checkbox value 

1

Checkbox with Reactive Forms 

{
  "left": false,
  "middle": true,
  "right": false
}

Radio with radio group 

Middle
Middle

Radio without explicit group 

Middle

Uncheckable Radio 

Middle

Radio with Reactive Forms 

{
  "radio": "C"
}

Disabled Buttons

components