Photoshop Question posted in
The official user guide can be found here.

How to convert color code into actual color – Photoshop

I’m using Angular material with Angular6 in my project. What I want to do is convert color codes which stored in the database into actual colors in my mat-table.

Currently, my table is as follows,
enter image description here

This is how I’m getting visible columns data from my component.ts file,

getIssueCategory() {
  this.IssueService.getAllIssueCategories().subscribe(result => {
      this.issueCategoryDTOList = result.reverse();

      //updating data source
      this.updatingDataSource(result);

      this.IssueService.issueCategoryDTOList = result;
    }
  );
}

get visibleColumns() {
  return this.displayedColumns.filter(column => column.visible).map(column => column.property);
}

applyFilter(filterValue: string) {
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

The color column in my HTML file is as follows,

<!-- color Column -->
    <ng-container matColumnDef="color">
      <mat-header-cell *matHeaderCellDef mat-sort-header="color" style="max-width: 25%; min-width: 25%;">COLOR
      </mat-header-cell>
      <mat-cell *matCellDef="let element" style="text-transform: uppercase; max-width: 25%; min-width: 25%;">
        {{element.color}}
      </mat-cell>
    </ng-container>

Finally to getting understand easier I have designed my expected output using photoshop,
enter image description here

PS: In my database, the colors are stored as color codes.

Tags:

3

Answers


  1. 0

    You can simply do something like –

    <!-- color Column -->
<ng-container matColumnDef="color">
   <mat-header-cell *matHeaderCellDef mat-sort-header="color" style="max-width: 25%; min-width: 25%;">COLOR
   </mat-header-cell>
   <mat-cell *matCellDef="let element" style="text-transform: uppercase; max-width: 25%; min-width: 25%;">
     <div style="width: 15px; height: 15px" [style.background-color]="element.color">/div>
   </mat-cell>
</ng-container>

    Or perhaps a better way would be to turn it into a component 

    @Component({
  selector: 'app-color-swatch',
  template: `<div [style.background-color]="colorCode"></div>`,
  styles: ['div { height: 15px; width: 15px }']
})
export class ColorSwatchComponent {

  @Input colorCode: string;

}

    Then – 

    <app-color-swatch [color]="element.color"></app-color-swatch>
    Login or Signup to reply.
  2. 0

    Try this:

    <input matInput type="color" value="color from Database">

    Example: 

    <input matInput type="color" value="#904A91">
    Login or Signup to reply.
  3. 0

    All you need to do is create a square using css and apply your color dynamically to the element as the background-color

    In place of where you were displaying the color in the table, add a div which we will style as a square using css. Then set the background color to it like below.

    <ng-container matColumnDef="color">
  <mat-header-cell *matHeaderCellDef mat-sort-header="color" style="max-width: 25%; min-width: 25%;">COLOR</mat-header-cell>
  <mat-cell *matCellDef="let element">
    <div class="square" [style.background-color]="element.color">
    </div>
  </mat-cell>
</ng-container>

    In your css

    .square {
  /* Specify the dimensions of your square here */
  height: 25px;
  width: 25px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search