adding json model to application, the objective is reduce the html code and transfer to typescript component all configurations.

Author: rfz182

ng-package.json

@@ -1,6 +1,6 @@
-{
-    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-    "lib": {
-        "entryFile": "public_api.ts"
-    }
+{
+    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public_api.ts"
+    }
 }

src/app/app.component.css

@@ -1,17 +1,17 @@
-.container {
-    margin: 25px;
-}
-
-pre {
-    display: block;
-    padding: 9.5px;
-    margin: 10px 0;
-    font-size: 13px;
-    line-height: 1.42857143;
-    color: #333;
-    word-break: break-all;
-    word-wrap: break-word;
-    background-color: #f5f5f5;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+.container {
+    margin: 25px;
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 10px 0;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }

src/app/app.component.html

@@ -2,12 +2,12 @@
 
   <h2>Basic Configuration</h2>
 
-  <ngx-checkbox [label]="'Checkbox 1'" [color]="'p-success'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
+  <ngx-checkbox [configuration]="jsonModel" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
   <pre class="boolean">{{ isSelected }}</pre>
   <b>Code:</b>
   <pre><![CDATA[<ngx-checkbox [label]="'Checkbox 1'" [color]="'p-success'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>]]></pre>
 
-  <h4>Colors</h4>
+  <!-- <h4>Colors</h4>
   <ngx-checkbox [label]="'p-primary'" [color]="'p-primary'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
 
   <ngx-checkbox [label]="'p-success'" [color]="'p-success'" [rounded]="true" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
@@ -36,5 +36,5 @@ <h4>Icons and Colors</h4>
   <br>
   <b>Code:</b>
   <pre><![CDATA[  <ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#18CDCA'" [colorInside]="'#FFF'" [rounded]="true" [icon]="'fa fa-check'" [(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>]]></pre>
-  <pre><![CDATA[  <ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#FF302C'" [colorInside]="'#FFF'" [rounded]="false" [icon]="'fa fa-times'" [(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>]]></pre>
+  <pre><![CDATA[  <ngx-checkbox [label]="'Font-Awesome'" [colorHex]="'#FF302C'" [colorInside]="'#FFF'" [rounded]="false" [icon]="'fa fa-times'" [(ngModel)]="isSelected2" name="isSelected2"></ngx-checkbox>]]></pre> -->
 </div>

src/app/app.component.ts

@@ -1,12 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CustomCheckBoxModel } from './custom-checkbox/custom-checkbox.model';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+
+export class AppComponent implements OnInit {
   title = 'app';
   isSelected: boolean = true;
   isSelected2: boolean = true;
+  jsonModel: CustomCheckBoxModel;
+
+  ngOnInit() {
+    this.jsonModel = new CustomCheckBoxModel('Test', 'fa fa-check', true, 'p-success', null, '#FFF');
+  }
 }

src/app/custom-checkbox/custom-checkbox.component.css

@@ -1,7 +1,7 @@
 <div (click)="toggleCheckbox()" [class]="styleCheckBox">
   <input [value]="isSelected" type="checkbox" [checked]="isSelected" />
   <div [class]="styleColor">
-    <i [class]="this.styleIcon" [style.background]="colorHex" [style.color]="colorInside"></i>
+    <i [class]="styleIcon" [style.background]="configuration.colorHex" [style.color]="configuration.colorInside"></i>
     <label>{{ label }}</label>
   </div>
 </div>

src/app/custom-checkbox/custom-checkbox.component.html

@@ -1,65 +1,77 @@
-import { Component, OnInit, Input, ViewChild, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NgModel, ControlValueAccessor } from '@angular/forms';
+import {
+  Component,
+  OnInit,
+  Input,
+  ViewChild,
+  forwardRef
+} from '@angular/core';
+import {
+  NG_VALUE_ACCESSOR,
+  NgModel,
+  ControlValueAccessor
+} from '@angular/forms';
+import {
+  CustomCheckBoxModel
+} from './custom-checkbox.model';
 
 @Component({
   selector: 'ngx-checkbox',
   templateUrl: './custom-checkbox.component.html',
   styleUrls: ['./custom-checkbox.component.css'],
-  providers: [
-    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomCheckboxComponent), multi: true }
-  ]
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CustomCheckboxComponent),
+    multi: true
+  }]
 })
 export class CustomCheckboxComponent implements OnInit, ControlValueAccessor {
 
   writeValue(obj: any): void {
     this.isSelected = obj;
-    console.log(obj);
   }
   registerOnChange(fn: any): void {
     this._onChange = fn;
   }
   registerOnTouched(fn: any): void {
     this._onTouched = fn;
   }
-  setDisabledState?(isDisabled: boolean): void {
-  }
+  setDisabledState ? (isDisabled: boolean) : void {}
 
   // call if value was changed inside our component
-  private _onChange = (_: any) => { };
+  private _onChange = (_: any) => {};
   // call if input was "touched" .. !
-  private _onTouched = () => { };
+  private _onTouched = () => {};
 
-  @Input() label: String;
-  @Input() icon: string;
-  @Input() rounded?: boolean = false;
-  @Input() color?: string;
-  @Input() colorHex?: string;
-  @Input() colorInside?: string;
+  // @Input() label: String;
+  // @Input() icon: string;
+  // @Input() rounded ? : boolean = false;
+  // @Input() color ? : string;
+  // @Input() colorHex ? : string;
+  // @Input() colorInside ? : string;
+  @Input() configuration: CustomCheckBoxModel;
 
   isSelected: boolean;
   styleCheckBox: String;
   styleColor: String;
   styleIcon: String;
-  constructor() { }
+  constructor() {}
 
   ngOnInit() {
-    
+    console.log(this.configuration);
     // STYLE CHECKBOX
     this.styleCheckBox = 'pretty p-icon p-smooth';
-    if (this.rounded) this.styleCheckBox += ' p-round';
-    //if (this.curved) this.styleCheckBox += ' p-curve';
-    
+
+    if (this.configuration.rounded) this.styleCheckBox += ' p-round';
+
     // COLORS CHECKBOX
     this.styleColor = 'state ';
-    if (this.color) this.styleColor += this.color;
-    
+    if (this.configuration.color) this.styleColor = `${this.styleColor}${this.configuration.color}`;
+
     this.styleIcon = 'icon ';
-    if(this.icon) this.styleIcon += this.icon;
-    
+    if (this.configuration.icon) this.styleIcon = `${this.styleIcon}${this.configuration.icon}`;
   }
 
-  ngAfterViewInit() {
-  }
+  ngAfterViewInit() {}
 
   toggleCheckbox() {
     this.isSelected = !this.isSelected;

src/app/custom-checkbox/custom-checkbox.component.ts

@@ -0,0 +1,17 @@
+export class CustomCheckBoxModel {
+  label: String;
+  icon: String;
+  rounded?: boolean = false;
+  color?: String;
+  colorHex?: String;
+  colorInside?: String;
+
+  constructor(label: String, icon: String, rounded?: boolean, color?: String, colorHex?: String, colorInside?: String) {
+    this.label = label;
+    this.icon = icon;
+    this.rounded = rounded;
+    this.color = color;
+    this.colorHex = colorHex;
+    this.colorInside = colorInside;
+   }
+}