Angular 4 Material custom color for component

Question

Is it possible to add custom (HEX) color to material component in Angular 4? For example something like this:

<div *ngFor="let factor of factors">
   <button md-button color="factor.color">Button</button>
</div>

Where factor.color is string in hex format (for example '#CCC')

Answer 1

You can use [style.color] attribute and some helpful posts about converting hexa code to RGB:

DEMO

HTML:

<button mat-button [style.color]="hexToRgb(factor.color)">Click me</button>

Typescript:

....

hexToRgb(hex) {
  hex = hex.replace("#",'');
  let arrBuff = new ArrayBuffer(4);
  let vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  let arrByte = new Uint8Array(arrBuff);

  return 'rgb(' + arrByte[1] + "," + arrByte[2] + "," + arrByte[3] +')';
}