make-alpha-channel-reactive-and-add-example-in-app (#357)

zefoy · Jul 7, 2024 · 0495c1b · 0495c1b
1 parent 9466924
commit 0495c1b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/projects/app/src/app/app.component.html b/projects/app/src/app/app.component.html
@@ -345,6 +345,14 @@ <h4><b>based on angular2-color-picker by Alberto Pujante</b></h4>
 
  <input [value]="color15" [style.background]="color15" [cpAlphaChannel]="'forced'" [cpOutputFormat]="'hex'" [(colorPicker)]="color15"/>
 
+ <br>
+
+ <label>
+ Alpha enabled:
+ <input type="checkbox" [(ngModel)]="alphaEnabled"/>
+ </label>
+ <input [value]="color20" [style.background]="color20" [cpAlphaChannel]="alphaEnabled ? 'always' : 'disabled'" [cpOutputFormat]="'hex'" [(colorPicker)]="color20"/>
+
  </div>
 
  <div class="col-md-7">
@@ -374,6 +382,12 @@ <h4><b>based on angular2-color-picker by Alberto Pujante</b></h4>
  [cpAlphaChannel]="'forced'"
  [cpOutputFormat]="'hex'"
  [(colorPicker)]="color"/&gt;
+
+&lt;input [value]="color"
+ [style.background]="color"
+ [cpAlphaChannel]="alphaEnabled ? 'always' : 'disabled'"
+ [cpOutputFormat]="'hex'"
+ [(colorPicker)]="color"/&gt;
  </pre>
  </div>
  </div>
@@ -461,15 +475,14 @@ <h3>Custom template content here.</h3>
  </div>
  <hr><br>
 
- <div class="row">
- <div class="col-md-12">
- <table class="table">
- <thead>
- <tr>
- <th>Options</th>
- <th>Values (default values in bold)</th>
- </tr>
- </thead>
+ <div class="col-md-12">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Options</th>
+ <th>Values (default values in bold)</th>
+ </tr>
+ </thead>
 
  <tbody>
  <tr>

diff --git a/projects/app/src/app/app.component.ts b/projects/app/src/app/app.component.ts
@@ -42,11 +42,14 @@ export class AppComponent {
  public color17: string = '#666666';
  public color18: string = '#fa8072';
  public color19: string = '#f88888';
+ public color20: string = '#ff0000';
 
  public cmykValue: string = '';
 
  public cmykColor: Cmyk = new Cmyk(0, 0, 0, 0);
 
+ public alphaEnabled = false;
+
  constructor(public vcRef: ViewContainerRef, private cpService: ColorPickerService) {}
 
  public onEventLog(event: string, data: any): void {

diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { ColorPickerModule } from 'ngx-color-picker';
@@ -14,7 +15,8 @@ import { AppComponent } from './app.component';
  ],
  imports: [
  BrowserModule,
- ColorPickerModule
+ ColorPickerModule,
+ FormsModule,
  ]
 })
 export class AppModule {}
diff --git a/projects/lib/src/lib/color-picker.directive.ts b/projects/lib/src/lib/color-picker.directive.ts
@@ -226,6 +226,10 @@ export class ColorPickerDirective implements OnChanges, OnDestroy {
  this.cmpRef.changeDetectorRef.detectChanges();
  }
  } else if (this.dialog) {
+ // Update properties.
+ this.cmpRef.instance.cpAlphaChannel = this.cpAlphaChannel;
+
+ // Open dialog.
  this.dialog.openDialog(this.colorPicker);
  }
  }