CODEWITHSUNDEEP
angularangular-materialcolor-picker
Umesh Patadiya
Umesh Patadiya

Reputation: 740

ngx-color-picker is being closed on input change

I'm using ngx-color-picker in my angular 6 project, it is working on my project component HTML. but when I try to use the picker on mat-menu, the color picker is being closed while changing the input. It's not giving any error. the color is being selected successfully but while typing color value in color picker input it is being closed. I don't know why. Here is my code.

<div class="d-flex mb-2" *ngFor="let clr of gradientArray; let i = index;">
   <input class="form-control" [cpPosition]="'right'" [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color, i)">
</div>

Upvotes: 2

Views: 3729

Answers (2)

Umesh Patadiya
Umesh Patadiya

Reputation: 740

Got it worked myself, Just added trackBy.

<div class="d-flex mb-2" *ngFor="let clr of gradientArray; let i = index; trackBy: trackBgGradient">
   <input class="form-control" [cpPosition]="'right'" [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color, i)">
</div>

Upvotes: 2

Abhishek
Abhishek

Reputation: 1778

this is working code try:

HTML: 

<button mat-button [matMenuTriggerFor]="menu" (click)="openMyMenu()">Menu</button>
<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="closeMyMenu()">
    <input *ngFor="let clr of gradientArray; let i = index;" mat-menu-item [cpPosition]="'right'" [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color, i)" (click) = "$event.stopPropagation()">
  </span>
</mat-menu>

TS: 

@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
  gradientArray: any[] = [
    {color: 'red'},
     {color: 'blue'},
      {color: 'green'},
       {color: 'yellow'},
        {color: 'black'},
  ];

Also check on stackblitz link: https://stackblitz.com/edit/angular-u7vj8e?file=src%2Fapp%2Fapp.component.ts

Upvotes: 1

Related Questions