Angular Material 2 dynamic Theme colors

Question

I need to build a form in my Angular 4 app that uses material2 and overwrite the chosen theme (I have imported one, deeppurple-amber, because without a theme some components do not load properly). I have seen I can define my own themes using a scss file but I need to overwrite the primary color to a one defined previously by the user, and stored in the local storage

So I have this in my components' ts:

export class MyFormComponent implements OnInit {
    ...
    myPrimaryColor: string
    ...

    ngOnInit(){
        ...
        this.myPrimaryColor = localStorage.getItem('primarycolor');
        ...
    }
}

Is there a way I can insert a material input and customize in the html file the primary color like this?

<mat-form-field *ngFor="let field of fields" [color]="#myPrimaryColor">
    <input matInput [placeholder]="field.text">
</mat-form-field>

I have searched material docs but not found any input nor formfield attribute to do so. How could I do it?

G. Tranter G. Tranter · Accepted Answer · 2018-05-02T16:39:47

The color option is not a CSS property - it is an Angular Material directive that accepts a ThemePalette which is either 'primary', 'accent', 'warn' or undefined. These colors are tied to your application's theme. If you want to change the style of an individual component based on a user chosen value, you could do that with ngStyle:

<mat-form-field *ngFor="let field of fields" [ngStyle]="{'color': myPrimaryColor}">
    <input matInput [placeholder]="field.text">
</mat-form-field>

Angular Material 2 dynamic Theme colors

1 Answers