Feature/td media

[emoralesb05]

Description

Added a basic query media support inside core module. (might relocate in the future)
#20

What's included?

tdMediaService

This service is designed to provide basic media query evaluation for responsive applications.
It has pre-programmed support for media queries that match the layout breakpoints.

Usage in Typescript:

constructor(private _mediaService: TdMediaService, private _ngZone: NgZone) {
  }
  checkScreen(): void {
    this._ngZone.run(() => {
      this.isSmallScreen = this._mediaService.query('md'); // or '(min-width: 960px) and (max-width: 1279px)'
    });
  }
  watchScreen(): void {
    this._querySubscription = this._mediaService.registerQuery(demoObj.query).subscribe((matches: boolean) => {
      this._ngZone.run(() => {
        this.isSmallScreen = matches;
      });
    });
  }

tdMediaService methods:

tdMediaToggleDirective

Added tdMediaToggleDirective directive to leverage tdMediaService and toggle attributes, classes or/and styles from an element.

Usage in HTML:

<div tdMediaToggle="sm" [mediaClasses]="['classOne', 'classTwo'']"
  [mediaAttributes]="{title: 'tooltip'}" [mediaStyles]="{color: 'red'}">
  ...
</div>

Properties:

Test Steps

• Go to components docs and see Media link.
• Use demo and see documentation.
• Try to use directive and service anywhere in app.
• ✌️

Screenshots or link to CodePen/Plunker/JSfiddle