added update method for properties in control-base.ts

morrisjdev · Aug 6, 2019 · e68f180 · e68f180
1 parent 94c2007
commit e68f180
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 113 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/projects/ng-metro4/package.json b/projects/ng-metro4/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng-metro4",
   "description": "ng-metro4 is an implementation of the beautiful metro4 components",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "peerDependencies": {
     "@angular/common": "~8.1.0",
     "@angular/core": "~8.1.0",

diff --git a/projects/ng-metro4/src/lib/form/checkbox-group/checkbox-group.component.ts b/projects/ng-metro4/src/lib/form/checkbox-group/checkbox-group.component.ts
@@ -1,4 +1,13 @@
-import {ChangeDetectionStrategy, Component, ContentChildren, ElementRef, forwardRef, OnInit, QueryList} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  forwardRef,
+  OnInit,
+  QueryList
+} from '@angular/core';
 import {ControlBase} from '../control-base';
 import {DefaultValueAccessor} from '../../helper/default-value-accessor';
 import {RadioComponent} from '../radio/radio.component';
@@ -17,8 +26,8 @@ import {asapScheduler} from 'rxjs';
 export class CheckboxGroupComponent extends ControlBase<any[]> {
   @ContentChildren(forwardRef(() => CheckboxComponent), { descendants: true }) checkboxes: QueryList<CheckboxComponent>;
 
-  constructor(element: ElementRef) {
-    super(element);
+  constructor(element: ElementRef, cdRef: ChangeDetectorRef) {
+    super(element, cdRef);
   }
 
   createControl() {

diff --git a/projects/ng-metro4/src/lib/form/control-base.ts b/projects/ng-metro4/src/lib/form/control-base.ts
@@ -1,8 +1,17 @@
 import {ControlValueAccessor} from '@angular/forms';
-import {AfterViewInit, ElementRef, OnChanges, OnDestroy, Optional, SimpleChanges} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  ElementRef,
+  EventEmitter,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output, SimpleChange,
+  SimpleChanges
+} from '@angular/core';
 import {ObjectHelper} from '../helper/object-helper';
 import {asapScheduler} from 'rxjs';
-import {observerClassExceptions} from '../helper/lists';
 import {AttributeHelper} from '../helper/attribute-helper';
 
 export abstract class ControlBase<T> implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
@@ -14,7 +23,7 @@ export abstract class ControlBase<T> implements ControlValueAccessor, AfterViewI
   public touchCallback: () => void = () => {};
   public changeCallback: (currentValue: T) => void = (_) => {};
 
-  constructor(@Optional() private mainElement: ElementRef) {}
+  constructor(@Optional() public mainElement: ElementRef, protected cdRef: ChangeDetectorRef) {}
 
   private observeClassValue() {
     this.classObserver = AttributeHelper.createObserver(this.mainElement, (newClasses, oldClasses) => {
@@ -89,4 +98,16 @@ export abstract class ControlBase<T> implements ControlValueAccessor, AfterViewI
       this.classObserver.disconnect();
     }
   }
+
+  updateProperty(key: keyof this, newValue: any) {
+    const oldValue = this[key];
+
+    if (oldValue !== newValue) {
+      this[key] = newValue;
+      this.cdRef.detectChanges();
+      const changes: SimpleChanges = {};
+      changes[key as string] = { previousValue: oldValue, currentValue: newValue, firstChange: false } as SimpleChange;
+      this.ngOnChanges(changes);
+    }
+  }
 }
diff --git a/projects/ng-metro4/src/lib/form/input/input.component.ts b/projects/ng-metro4/src/lib/form/input/input.component.ts
@@ -1,4 +1,14 @@
-import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output, SimpleChange,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import {ControlBase} from '../control-base';
 import {DefaultValueAccessor} from '../../helper/default-value-accessor';
 import {TypeAlias} from '../../helper/type-alias';

diff --git a/projects/ng-metro4/src/lib/form/radio-group/radio-group.component.ts b/projects/ng-metro4/src/lib/form/radio-group/radio-group.component.ts
@@ -20,8 +20,8 @@ export class RadioGroupComponent extends ControlBase<any> {
 
   private name: string;
 
-  constructor(element: ElementRef) {
-    super(element);
+  constructor(element: ElementRef, cdRef: ChangeDetectorRef) {
+    super(element, cdRef);
     this.name = StringHelper.guid();
   }
 

diff --git a/src/app/form/input/input.component.html b/src/app/form/input/input.component.html
@@ -2,6 +2,8 @@ <h1>Input</h1>
 
 <m4-input [(ngModel)]="model"></m4-input>
 
+<button m4-button (click)="updateProp()">Update Test</button>
+
 <m4-input [(ngModel)]="model" (ngModelChange)="classTest($event)" [class.alert]="alert"></m4-input>
 <m4-checkbox caption="alert" [(ngModel)]="alert"></m4-checkbox>
 

diff --git a/src/app/form/input/input.component.ts b/src/app/form/input/input.component.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ContentChildren, OnInit, QueryList, ViewChildren} from '@angular/core';
-import {ControlBase} from 'ng-metro4';
+import {ControlBase, InputComponent as ic} from 'ng-metro4';
 
 @Component({
   selector: 'app-input',
@@ -58,4 +58,9 @@ export class InputComponent implements OnInit, AfterViewInit {
   ngAfterViewInit(): void {
     console.log(this.controls);
   }
+
+  updateProp() {
+    const input: ic = this.controls.first as ic;
+    input.updateProperty('prepend', 'Das ist ein test');
+  }
 }