fix updating value input programmatically

Author: vicmans

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.3.1] - 2022-05-22
+### Bug Fixed
+- Fix issue updating `value` input property programmatically ([#34](https://github.com/vicmans/ng-toggle-button/issues/34))
+
 ## [1.3.0] - 2022-03-06
 ### Change
 - Update to Angular 13

projects/demo/src/app/app.component.html

@@ -143,6 +143,28 @@ <h2 class="subtitle">
         </div>
       </div>
 
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label" for="disabled">value: </label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <ng-toggle
+              [(value)]="config.value"
+              [values]="{
+                checked: config.values.checked,
+                unchecked: config.values.unchecked
+              }"
+              [labels]="{
+                checked: config.values.checked,
+                unchecked: config.values.unchecked
+              }"
+              width="80"
+            ></ng-toggle> {{config.value}}
+          </div>
+        </div>
+      </div>
+
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label" for="disabled">width: </label>

projects/ng-toggle/src/lib/ng-toggle.component.html

@@ -29,9 +29,7 @@
       [ngStyle]="labelStyle"
       *ngIf="!toggled"
     >
-      <ng-container slot="unchecked">
-        {{labelUnchecked}}
-      </ng-container>
+      {{labelUnchecked}}
     </span>
   </ng-container>
 </label>

projects/ng-toggle/src/lib/ng-toggle.component.spec.ts

@@ -1,3 +1,4 @@
+import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NgToggleComponent } from './ng-toggle.component';
@@ -38,9 +39,20 @@ describe('NgToggleComponent', () => {
     let label = fixture.debugElement.nativeElement.querySelector('label');
     label.click();
     fixture.detectChanges();
-
     expect(component.value).toBeFalsy();
   })
+
+  it('should change the value programmatically via value input', () => {
+    component.value = false;
+    component.ngOnChanges({
+      value: new SimpleChange(true, false, true)
+    });
+    fixture.detectChanges();
+    let label = fixture.nativeElement.querySelector('.ng-toggle-switch-label');
+    expect(component.value).toBe(false);
+    expect(component.toggled).toBeFalsy();
+    expect(label.getAttribute('class')).toContain('ng-toggle-right');
+  })
 });
 
 describe('NgToggleComponent with values forRoot module imports', () => {

projects/ng-toggle/src/lib/ng-toggle.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgToggleConfig } from './ng-toggle.config';
 
@@ -22,7 +22,7 @@ const DISABLED_BUTTON_COLOR = 'silver'
     }
   ]
 })
-export class NgToggleComponent implements OnInit, ControlValueAccessor {
+export class NgToggleComponent implements OnInit, ControlValueAccessor, OnChanges {
 
   @Input() value: any = this.config.value || true
   @Input() name: string = this.config.name || ''
@@ -57,6 +57,7 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
 
   onInput(value: boolean) {
     this.value = value;
+    console.log(this.value, value, 'calue')
     this.onTouch();
     this.onChange(this.value);
   }
@@ -82,6 +83,14 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
       this.toggled = Object.keys(this.values)[index] == 'checked' ? true : false
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    for (const propName in changes) {
+      const chng = changes[propName];
+      if(propName == 'value')
+        this.writeValue(chng.currentValue)
+    }
+  }
+
   get coreStyle () {
     return {
       width: px(this.width),