Ngx Bootstrap Buttons

Ngx Bootstrap Buttons

There are two basic directives for ngx-bootstrap buttons that allow a group of buttons act as a checkbox or radio button or a hybrid where it is possible to uncheck a radio button.

ButtonCheckboxDirective

Add checkbox functionality to any element.

selector

• [btnCheckbox]
•  

Inputs

• btnCheckboxFalse − boolean, Falsy value, will be set to ngModel, default: false
• btnCheckboxTrue − boolean, Truthy value, will be set to ngModel, default: true

ButtonRadioDirective

Build radio buttons or button groups. The selected button boolean, If true - radio button can be unchecked selector

• [btnRadio]

Inputs

• btnRadio − string, Radio button value, will be set to ngModel
• disabled − boolean, If true - radio button is disabled
• uncheckable − boolean, If true - radio button can be unchecked
• value − string, Current value of radio component or group

ButtonRadioGroupDirective

A group of buttons for the radio. The selected button's value is bound to a variable defined by ngModel.

selector

• [btnRadioGroup]

Example

We have to update the app.module.ts used in the ngx-bootstrap Alerts chapter to use ButtonsModule as we are going to use buttons. We're also adding support using FormModule for input controls.

To use AlertModule and AlertConfig, update app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Update test.component.html to use the buttons.

test.component.html

<button type="button" class="btn btn-primary" (click)="clicked()">
   Single Button
</button>
<pre class="card card-block card-header">
   {{clickCounter}}
</pre>
<p>Button as Checkbox</p>
<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.right"
      btnCheckbox tabindex="0" role="button">Right</label>
</div>
<pre class="card card-block card-header">
   {{checkModel | json}}
</pre>
<p>Button as RadionButton</p>
<div class="form-inline">
   <div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
      <label class="btn btn-success" btnRadio="Left">Left</label>
      <label class="btn btn-success" btnRadio="Right">Right</label>
   </div>
</div>
<pre class="card card-block card-header">
   {{radioModel}}
</pre>

Update test.component.ts for corresponding variables and methods.

test.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   checkModel = { left: false, right: false };
   radioModel = 'Left';
   clickCounter = 0;
   constructor() { }

   ngOnInit(): void {
   }
   clicked(): void {
      this.clickCounter++;
   }
}

Build and Serve

Run the following command to start the angular server.

ng serve