first commit

Author: rafaelblink

.angular-cli.json

@@ -19,7 +19,9 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "../node_modules/pretty-checkbox/dist/pretty-checkbox.min.css",
+        "../node_modules/mdi/css/materialdesignicons.min.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

package.json

@@ -26,7 +26,7 @@
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.1",
+    "@angular/cli": "^1.6.1",
     "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^5.0.0",
     "@types/jasmine": "~2.5.53",

src/app/app.component.html

@@ -1,20 +1,3 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<ngx-checkbox [label]="'Teste'" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>
 
+<pre>{{ isSelected }}</pre>

src/app/app.component.ts

@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+  isSelected: boolean = true;
 }

src/app/app.module.ts

@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
 
 
 import { AppComponent } from './app.component';
+import { CustomCheckboxModule } from './custom-checkbox/custom-checkbox.module';
+import { FormsModule } from '@angular/forms';
 
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule, CustomCheckboxModule, FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,7 @@
+<div (click)="toggleCheckbox()" class="pretty p-icon p-round p-smooth">
+  <input [value]="isSelected" type="checkbox" />
+  <div class="state p-success">
+    <i class="icon mdi mdi-check"></i>
+    <label>{{ label }}</label>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomCheckboxComponent } from './custom-checkbox.component';
+
+describe('CustomCheckboxComponent', () => {
+  let component: CustomCheckboxComponent;
+  let fixture: ComponentFixture<CustomCheckboxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomCheckboxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomCheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,51 @@
+import { Component, OnInit, Input, ViewChild, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgModel, ControlValueAccessor } from '@angular/forms';
+
+@Component({
+  selector: 'ngx-checkbox',
+  templateUrl: './custom-checkbox.component.html',
+  styleUrls: ['./custom-checkbox.component.css'],
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomCheckboxComponent), multi: true }
+  ]
+})
+export class CustomCheckboxComponent implements OnInit, ControlValueAccessor {
+
+  writeValue(obj: any): void {
+    this.isSelected = obj;
+  }
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+  }
+
+  // call if value was changed inside our component
+  private _onChange = (_: any) => { };
+  // call if input was "touched" .. !
+  private _onTouched = () => { };
+
+  @Input() label: String;
+
+  isSelected: boolean;
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log(this.isSelected);
+  }
+
+  ngAfterViewInit() {
+    console.log(this.isSelected);
+  }
+
+  toggleCheckbox() {
+    this.isSelected = !this.isSelected;
+    this._onChange(this.isSelected);
+    console.log(this.isSelected);
+  }
+
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomCheckboxComponent } from './custom-checkbox.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    CustomCheckboxComponent
+  ],
+  declarations: [CustomCheckboxComponent]
+})
+export class CustomCheckboxModule { }