How can I use a media query in ng-style - angularjs

Question

I would like to set the width of an element using ng-style and a media query.
I have tried this:
{'width' : #media (max-width: 480px) ? '70%' : '90%' , 'border-radius': '6px', 'background':'#F5F2ED'}
But it doesn't seem to work.
Any ideas?

Answer 1

There is a trick to this problem,
create another inner <div> in your outer <div>
It works because you can reverse the effect of your applied style, by setting the values as 0, none or initial.
Example:
The effects you want for your<div>
IN TS: setting background-color according to the data parsed in from parent. (unable to do in CSS)
IN CSS: no background when the screen width is larger than 1024px (you do not want to check width to change accordingly in TS)
The problem you faced is that:
When using [ngStyle] to set the style, it will overwrite your media query for devices larger than 1024 px.
The solution is that: you create a inner div and set the css as:
outer div | color according to the data parsed in, use [ngStyle]
max-width | more than 1024 | less than 1024
inner div | background-color : white | background-color : initial
In your HTML
<div [ngStyle]="'background-color':color[2]">
<div class="inner">
some component
</div>
</div>
In your CSS
.inner{
background-color: white;
}
#media (max-width:1024px){
background-color: initial;
}
In your TS
#Input() color
This will reverse the effect or set it to none so that outer div color can be applied.
Also, note that the CSS for inner div for more than 1024px should be your default website theme background, so change to anything which is your default background.
Because they are in different div outer div cannot overwrite inner div.

Answer 2

Let's see to this directive source:
var ngStyleDirective = ngDirective(function(scope, element, attr) {
scope.$watch(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
if (oldStyles && (newStyles !== oldStyles)) {
forEach(oldStyles, function(val, style) { element.css(style, '');});
}
if (newStyles) element.css(newStyles);
}, true);
});
There is nothing to support this functionality.