From d10c90c279067b4f24b3645d52c4eb9862987b3c Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <a.zhukov@akveo.com>
Date: Fri, 21 Jul 2017 16:35:36 +0300
Subject: [PATCH] fix(buttons): fix the binding models

---
 .../button-groups.component.html              | 40 +++++++++----------
 .../button-groups/button-groups.component.ts  | 10 +++++
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
index 64de7bf6..46afae75 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
@@ -5,15 +5,15 @@
       <div class="col-md-12">
         <div class="example-container">
           <div class="container-title">Toggle Types</div>
-          <div class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width" data-toggle="buttons">
-            <label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
-              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
+          <div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width">
+            <label class="btn btn-outline-primary">
+              <input type="radio" value="left"> Left
             </label>
-            <label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
-              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
+            <label class="btn btn-outline-primary">
+              <input type="radio" value="middle"> Middle
             </label>
-            <label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
-              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
+            <label class="btn btn-outline-primary">
+              <input type="radio" value="right"> Right
             </label>
           </div>
           <div class="btn-group btn-toggle-group btn-group-full-width" data-toggle="buttons">
@@ -95,26 +95,26 @@
         </div>
         <div class="example-container">
           <div class="container-title">Divided Button Group</div>
-          <div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width" data-toggle="buttons">
-            <label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
-              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
+          <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
+            <label class="btn btn-outline-primary">
+              <input type="radio" value="left"> Left
             </label>
-            <label class="btn btn-outline-primary" [class.active]="checkboxModel.middle">
-              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
+            <label class="btn btn-outline-primary">
+              <input type="radio" value="middle"> Middle
             </label>
-            <label class="btn btn-outline-primary" [class.active]="checkboxModel.right">
-              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
+            <label class="btn btn-outline-primary">
+              <input type="radio" value="right"> Right
             </label>
           </div>
           <div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
-            <label class="btn btn-primary" [class.active]="checkboxModel.left">
-              <input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
+            <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left">
+              <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
             </label>
-            <label class="btn btn-primary" [class.active]="checkboxModel.middle">
-              <input type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
+            <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.middle">
+              <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
             </label>
-            <label class="btn btn-primary" [class.active]="checkboxModel.right">
-              <input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
+            <label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.right">
+              <input type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
             </label>
           </div>
         </div>
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
index e1590975..6d646bef 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
@@ -7,6 +7,8 @@ import { Component } from '@angular/core';
 })
 export class ButtonGroupsComponent {
 
+  radioModel = 'left';
+
   checkboxModel = {
     left: false,
     middle: false,
@@ -31,4 +33,12 @@ export class ButtonGroupsComponent {
     four: false,
     five: false,
   };
+
+  dividedButtonGroupOne = 'left';
+
+  dividedButtonGroupTwo = {
+    left: false,
+    middle: false,
+    right: false,
+  };
 }