Dynamic load color for mat-input

Question

I got the following system. We have a back-end system that get input from another system for setting for our angular application.

So for each module we load a different color to style our application. Module 1 = red. Module 2 = blue.

What we are looking for is is a dynamic change of color, cause it can be changed any second. Most solutions I have seen are hardcoded css but that doesn't work.

What we have tried is:

<mat-form-field floatLabel="always" color="primary">
   <input #input matInput  [ngStyle]="{'color':  color }" />
</mat-form-field>

We have tried to adjust the primary color pallet or set the color with ngStyle but to no succes.

Yes it is but for example we use a color selector so it's not any kind of red it can also be #990000. — Swoox, Jan 23 '20 at 08:45
Not really this is the color of the primary (default purple of deeppurple-amber.css) depend on which pre-build theme you get. — Swoox, Jan 23 '20 at 08:47

score 0 · Accepted Answer · answered Jan 23 '20 at 08:38

0

I think you could use "ngClass" instead of ngStyle. You can refer angular docs for its implementation. I hope it helps. Official docs here

answered Jan 23 '20 at 08:38

Rounak Snehasis

91
5

Like I said we get it from an API call so that say it's red or yellow. A ngClass require you to set up the css(static data). – Swoox Jan 23 '20 at 08:42
Then in that case I think you have to use ElementRef and Renderer2 to do it. First find the value from the API response then set the value using elref and renderer. Hope it will helps. – Rounak Snehasis Jan 23 '20 at 09:12
Can you put an example of this in the answer? – Swoox Jan 23 '20 at 09:13

Swoox · Answer 2 · 2020-01-23T09:25:37.727

0

After some more digging. Few hours now I found this answer.

https://stackoverflow.com/a/57503414/7672014

This require you to use a 3rd party: https://github.com/johannesjo/angular-material-css-vars

What this does is override the primary, accent or warn pallets of Angular materials. Also I did apply this on the highest lvl where the color is set otherwise it will generate a overload.

edited Jan 23 '20 at 09:25

answered Jan 23 '20 at 09:10

Swoox

3,707
2
21
32

Dynamic load color for mat-input

2 Answers2