Suggestion: add classes at breakpoints

In many cases I don’t want to create multiple elements for large/small layouts, I simply need a different css class applied. It would be nice to have a directive that would apply a css class based on the screen size (versus show/hiding the element). For example:

<p *sm-class="my-small-class" *lg-class="my-big-class">example</p>

When the window is small, .my-small-class is applied to the element, and when the screen is large, .my-big-class would be applied to the element.

[ackushiw]

I’ve just come across this repository so forgive me if this is already a feature, but what about injecting a service into components, that way we can use the ngClass directive, and even trigger functions on changes to orientation etc.

[no-more]

Hi,

That’s sound a good idea, but maybe instead of changing the class on the element, wouldn’t it be easier if there was a specific class on the body like “responsive-breakpoint-lg”. We could also add other devices information. In the application you could then use the class as a media query to handle different layout according to the screen size:

body.responsive-breakpoint-lg .myClass{/*layout for lg, same as .my-big-class*/}
body.responsive-breakpoint-sm .myClass{/*layout for sm, same as .my-small-class*/}

The main advantages of this :

• no need to redefine breakpoint size in the css
• can handle other type of information (device …)
• only one entry point, reduce number of watchers and directives to implements!!!

Would this meet your requirements ?