How to convert color code into actual color

Question

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,

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,

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

Yes as the accepted answer I have tried it and it worked perfectly for me. Thank you @Reactgular — INDRAJITH EKANAYAKE, Aug 13 '19 at 04:14

Chris Edgington · Answer 1 · 2019-08-12T12:51:45.373

2

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>

edited Aug 12 '19 at 12:51

answered Aug 12 '19 at 12:23

Chris Edgington

2,937
5
23
42

The answer is working but I can't understand the use of '@Input colorCode: string;' and '' – INDRAJITH EKANAYAKE Aug 13 '19 at 04:10
If you can explain it would be very helpfull – INDRAJITH EKANAYAKE Aug 13 '19 at 04:10
1

The `@Input` field is just a way of passing data into the component. So you use `@Input myProperty: string` then assign a value to the property by using `[myProperty]="someValue"`. More info here https://angular.io/guide/component-interaction – Chris Edgington Aug 13 '19 at 08:42
Thankyou very much – INDRAJITH EKANAYAKE Aug 15 '19 at 03:40

score 1 · Answer 2 · answered Aug 12 '19 at 12:27

1

Try this:

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

Example:

<input matInput type="color" value="#904A91">

answered Aug 12 '19 at 12:27

HV Sharma

4,891
3
15
30

score 1 · Accepted Answer · answered Aug 12 '19 at 13:10

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;
}

this answer workes for me and since I think this is simple than others I accepted the answer. Thank you! — INDRAJITH EKANAYAKE, Aug 13 '19 at 04:05

How to convert color code into actual color

3 Answers3