ngx-admin/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html

<nga-card>
  <nga-card-header>Button Groups</nga-card-header>
  <nga-card-body>
    <div class="row">
      <div class="col-md-12">
        <div class="example-container">
          <div class="container-title">Toogle Types</div>
          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons">
            <label class="btn btn-primary">
              <input type="radio" value="Left"/> Left
            </label>
            <label class="btn btn-primary">
              <input type="radio" value="Middle"/> Middle
            </label>
            <label class="btn btn-primary">
              <input type="radio" value="Right"/> Right
            </label>
          </div>
          <div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
            <label class="btn btn-primary" [class.active]="checkboxModel.left">
              <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
            </label>
            <label class="btn btn-primary" [class.active]="checkboxModel.middle">
              <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
            </label>
            <label class="btn btn-primary" [class.active]="checkboxModel.right">
              <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
            </label>
          </div>
        </div>
        <div class="example-container toolbars-container">
          <div class="pagination-container">
            <div class="container-title">Pagination</div>
            <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
              <label class="btn btn-success">
                <input type="radio"/> 1
              </label>
              <label class="btn btn-success">
                <input type="radio"/> 2
              </label>
              <label class="btn btn-success">
                <input type="radio"/> 3
              </label>
              <label class="btn btn-success">
                <input type="radio"/> 4
              </label>
              <label class="btn btn-success">
                <input type="radio" /> 5
              </label>
            </div>
          </div>
          <div class="icon-toolbar-container">
            <div class="container-title">Icon Toolbar</div>
            <div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
              <label class="btn btn-success">
                <input type="radio"/> <i class="ion-ionic"></i>
              </label>
              <label class="btn btn-success">
                <input type="radio"/> <i class="ion-ionic"></i>
              </label>
              <label class="btn btn-success">
                <input type="radio"/> <i class="ion-ionic"></i>
              </label>
              <label class="btn btn-success">
                <input type="radio"/> <i class="ion-ionic"></i>
              </label>
            </div>
          </div>
        </div>
        <div class="example-container">
          <div class="container-title">Divided Button Group</div>
          <div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"/> <i class="ion-paper-airplane"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"/> <i class="ion-paper-airplane"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"/> <i class="ion-paper-airplane"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"/> <i class="ion-paper-airplane"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"/> <i class="ion-paper-airplane"></i>
            </label>
            <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
              <input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"/> <i class="ion-paper-airplane"></i>
            </label>
          </div>
        </div>
        <div class="example-container">
          <div class="container-title">Divided Button Group</div>
          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
            <label class="btn btn-primary">
              <input type="radio" value="Left"/> Left
            </label>
            <label class="btn btn-primary">
              <input type="radio" value="Middle"/> Middle
            </label>
            <label class="btn btn-primary">
              <input type="radio" value="Right"/> Right
            </label>
          </div>
          <div class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
            <label class="btn btn-primary" [class.active]="checkboxModel.left">
              <input type="checkbox" [(ngModel)]="checkboxModel.left"/> Left
            </label>
            <label class="btn btn-primary" [class.active]="checkboxModel.middle">
              <input type="checkbox" [(ngModel)]="checkboxModel.middle"/> Middle
            </label>
            <label class="btn btn-primary" [class.active]="checkboxModel.right">
              <input type="checkbox" [(ngModel)]="checkboxModel.right"/> Right
            </label>
          </div>
        </div>
      </div>
    </div>
  </nga-card-body>
</nga-card>