Angular 4 Material benutzerdefinierte Farbe für Komponente

Question

Ist es möglich, benutzerdefinierte (HEX) Farbe Materialkomponente in Angular 4 hinzuzufügen? Zum Beispiel so etwas wie diese:

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

Wo factor.color ist Zeichenfolge im Hex-Format (zum Beispiel '#ccc')

Answer 1

Sie können [style.color] Attribut und ein paar hilfreichen Beiträge über das Konvertieren Hexa-Code zu RGB:

DEMO

HTML:

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

Typoskript:

.... 

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] +')'; 
}