Material: md-class-** feature

[thatisuday]

As angular provide various features for adaptive layout, I guess feature like toggling class for various screen resolutions can also help on larger scale. For example md-class-xs="padding-5px"

As for now, angular material doesn't provide any feature to adjust _font sizes_, _padding_ or _margin_ according to the device resolution. Hence with this feature, a lot can be done to adjust various thing like these to better suit a device.

Expected behavior of this feature would be the add a class to the directive when device resolution matches the md-class-** and remove it when it doesn't.

[ThomasBurleson]

@thatisuday - a PR would be welcome for ngMaterial 1. This is already in planning for ngMaterial 2.

Note that this issue does NOT conform to the required new Issue format. Typically this forces an auto-close.

[devversion]

@ThomasBurleson I already had a PR for that (just with md-media instead of md-class, but you rejected it, with the reason, that developers can inject the $mdMedia service their self.

See https://github.com/angular/material/pull/7121

[ThomasBurleson]

@DevVersion - thanks for the correction. Now I recall that we wanted to minimize new, un-necessary APIs when existing, familiar ones will already work:

Currently we support breakpoint triggers for classes using this:

<div ng-class="{$mdMedia('gt-sm'):'blue'}"`> 
    Testing breakpoint changes to trigger class changes
</div>

Close this issue as will not fix. BTW, the Angular 2 Layouts will probably also do this:

@Component({
    template : `
      <div [class]="{$mdMedia('gt-sm'):'blue'}"></div>
   `
})
export class MyComponent {
    constructor(private $mdMedia:LayoutMediaService){ }

[thatisuday]

@ThomasBurleson Yeah, this probably will do it. No need to create such a directive. My bad. Sorry.

[ThomasBurleson]

@thatisuday - no worries. We also had your idea initially and then realized that ng-class and $mdMedia could already support that feature.

Kudos to @DevVersion for reminding me.