fix set value using form control directive

Author: vicmans

CHANGELOG.md

@@ -1,9 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-## [Unreleased]
+## [0.2.1] - 2021-11-15
 ### Added
-- Changelog
+- Fixed issue setting default value when using Reactive Forms
+- Fixed issue with margin in toggle
+- Addes Changelog
 
 ## [0.2.0] - 2021-07-25
 ### Added

package.json

@@ -2,7 +2,7 @@
   "name": "ng-toggle-button",
   "description": "A toggle button component",
   "author": "vicmans",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "homepage": "https://github.com/vicmans/ng-toggle-button#readme",
   "repository": {
     "type": "git",

projects/demo/src/app/app.component.ts

@@ -40,7 +40,7 @@ export class AppComponent {
   myForm: FormGroup;
   constructor() {
     this.myForm = new FormGroup({
-      'show': new FormControl()
+      'show': new FormControl(false)
     })
   }
 

projects/demo/src/index.html

@@ -12,8 +12,8 @@
 
   <meta property="og:title" content="Toggle Button Demo">
   <meta property="og:type" content="article">
-  <meta property="og:url" content="https://vicmans.com/">
-  <meta property="og:image" content="https://vicmans.com/toggle.png">
+  <meta property="og:url" content="http://vicmans.com/">
+  <meta property="og:image" content="http://vicmans.com/toggle.png">
   <meta property="og:description" content="This is a toggle switch button component, you can use this components in your Angular projects">
   <meta property="og:site_name" content="Vicmans's demos">
 
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="Toggle Button Demo">
   <meta name="twitter:description" content="This is a toggle switch button component, you can use this components in your Angular projects">
   <meta name="twitter:creator" content="@vmsanchz">
-  <meta name="twitter:image" content="https://vicmans.com/toggle.png">
+  <meta name="twitter:image" content="http://vicmans.com/toggle.png">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

projects/ng-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-toggle-button",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Angular toggle button switch",
   "author": "vicmans",
   "license": "MIT",

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

@@ -1,3 +1,11 @@
+label {
+  margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
 .ng-toggle-switch {
   display: inline-block;
   position: relative;

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

@@ -61,11 +61,8 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
   }
 
   writeValue(value: any): void {
-    if (value) {
-      this.value = value == true ? this.values.checked : this.values.unchecked;
-    } else {
-      this.value = this.values.unchecked;
-    }
+    this.value = value;
+    this.setToogle();
   }
   registerOnChange(fn: any): void {
     this.onChange = fn;
@@ -96,7 +93,8 @@ export class NgToggleComponent implements OnInit, ControlValueAccessor {
     }
   }
   get buttonRadius () {
-    return this.height - this.margin * 2;
+    const radius = this.height - this.margin * 2;
+    return radius > 0 ? radius : 0;
   }
   get distance () {
     return px(this.width - this.height + this.margin)