From 0c9e9cbdb176720042603aed4ebc9f988ff6852d Mon Sep 17 00:00:00 2001
From: Thomas Burleson <ThomasBurleson@Gmail.com>
Date: Tue, 1 Jan 2019 18:57:32 -0600
Subject: [PATCH] feat(core): add print support with mediaQuery override (#954)

When printing developers can now configure how layouts should render. Default print will use the current layout and current elements shown/visible. By specifying 1..n mediaQuery aliases, developers can specify alternate layouts with alternate breakpoints to be used for printing. Elements can also be shown and hidden for printing-only.

>  This feature supports totally different print outputs without modifying the current browser layout.

Implement PrintHook service to intercept print mediaQuery activation events.
  * add fxShow.print and fxHide.print support to show/hide elements during printing
  * suspend activation changes in MediaMarshaller while print-mode is active
  * trigger MediaObserver to notify subscribers with print mqAlias(es)
  * use PrintHook to intercept activation changes in MediaMarshaller while print-mode is active
  * trigger MediaObserver to notify subscribers with print mqAlias(es)
  * add watermark component to Demo app that is shown only during printing

Using the new `printWithBreakpoint` allows developers to specify a breakpoint that should be used to render layouts only during printing. With the configuration below, the breakpoint associated with the **`md`** alias will be used.

```ts
    FlexLayoutModule.withConfig({
      useColumnBasisZero: false,
      printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
    })
```
Shown below is the print layout rendered in floating dialog over the normal layout that is currently using 'lg' breakpoints.

![angular-layout-printing](https://user-images.githubusercontent.com/210413/50407211-2e04ca00-0798-11e9-8f35-b4e9e2fca864.jpg)

Fixes #603.
---
 docs/documentation/BreakPoints.md             |   4 +-
 docs/documentation/fxHide-API.md              |   2 +-
 docs/documentation/fxShow-API.md              |   2 +-
 src/apps/demo-app/src/app/app.component.html  |   6 +-
 src/apps/demo-app/src/app/app.module.ts       |  19 +-
 .../docs-responsive.component.ts              |   3 +-
 .../demo-app/src/app/watermark.component.scss |  16 +
 .../demo-app/src/app/watermark.component.ts   |  56 +++
 src/apps/demo-app/src/styles.scss             |  12 +
 src/lib/core/add-alias.ts                     |   2 +-
 src/lib/core/base/base2.ts                    |   2 +-
 .../core/breakpoints/break-point-registry.ts  |   4 +-
 src/lib/core/breakpoints/breakpoint-tools.ts  |   7 +-
 .../data/orientation-break-points.spec.ts     |  29 +-
 .../data/orientation-break-points.ts          |  18 +-
 src/lib/core/match-media/match-media.spec.ts  |   5 +-
 .../match-media/mock/mock-match-media.spec.ts |   2 +-
 .../core/match-media/mock/mock-match-media.ts |  15 +-
 .../media-marshaller/media-marshaller.spec.ts | 350 ++++++++++++------
 .../core/media-marshaller/media-marshaller.ts |  71 ++--
 src/lib/core/media-marshaller/print-hook.ts   | 215 +++++++++++
 .../media-observer/media-observer.spec.ts     | 336 +++++++++++------
 src/lib/core/media-observer/media-observer.ts |  34 +-
 src/lib/core/public-api.ts                    |   1 +
 src/lib/core/tokens/library-config.ts         |   2 +
 src/lib/extended/class/class.spec.ts          |   1 -
 src/lib/extended/show-hide/hide.spec.ts       |  53 ++-
 src/lib/extended/show-hide/show-hide.ts       |  38 +-
 src/lib/extended/show-hide/show.spec.ts       |  37 +-
 src/lib/flex/flex/flex.spec.ts                |  76 ++--
 src/lib/grid/grid-align/grid-align.spec.ts    |   8 +-
 src/lib/module.ts                             |   6 +-
 32 files changed, 1058 insertions(+), 374 deletions(-)
 create mode 100644 src/apps/demo-app/src/app/watermark.component.scss
 create mode 100644 src/apps/demo-app/src/app/watermark.component.ts
 create mode 100644 src/lib/core/media-marshaller/print-hook.ts

diff --git a/docs/documentation/BreakPoints.md b/docs/documentation/BreakPoints.md
index ed2b3a0ea..9d823431f 100644
--- a/docs/documentation/BreakPoints.md
+++ b/docs/documentation/BreakPoints.md
@@ -42,7 +42,7 @@ import {BREAKPOINT} from '@angular/flex-layout';
 const PRINT_BREAKPOINTS = [{
   alias: 'xs.print',
   suffix: 'XsPrint',
-  mediaQuery: 'print and (max-width: 297px)',
+  mediaQuery: 'screen and (max-width: 297px)',
   overlapping: false
 }];
 
@@ -157,4 +157,4 @@ export class CustomShowHideDirective extends ShowHideDirective {
     this._cacheInput("showXsPrint", negativeOf(val));
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/documentation/fxHide-API.md b/docs/documentation/fxHide-API.md
index 15f0a91f2..45ed55cd3 100644
--- a/docs/documentation/fxHide-API.md
+++ b/docs/documentation/fxHide-API.md
@@ -24,7 +24,7 @@ e.g.
 
 ### Using Responsive API
 
-When a mediaQuery range activates, the directive instances will be notified. If the current activate mediaQuery range 
+When a mediaQuery range activates, the directive instances will be notified. If the current activated mediaQuery range 
 (and its associated alias) are not used, then the static API value is restored as the fallback value.
 
 The *fallback* solution uses a **`largest_range-to-smallest_range`** search algorithm. Consider the following:
diff --git a/docs/documentation/fxShow-API.md b/docs/documentation/fxShow-API.md
index 10c7a3e54..5e9671647 100644
--- a/docs/documentation/fxShow-API.md
+++ b/docs/documentation/fxShow-API.md
@@ -24,7 +24,7 @@ e.g.
 
 ### Using Responsive API
 
-When a mediaQuery range activates, the directive instances will be notified. If the current activate mediaQuery range 
+When a mediaQuery range activates, the directive instances will be notified. If the current activated mediaQuery range 
 (and its associated alias) are not used, then the static API value is restored as the fallback value.
 
 The *fallback* solution uses a **`largest_range-to-smallest_range`** search algorithm. Consider the following:
diff --git a/src/apps/demo-app/src/app/app.component.html b/src/apps/demo-app/src/app/app.component.html
index da731abbf..693050a1c 100644
--- a/src/apps/demo-app/src/app/app.component.html
+++ b/src/apps/demo-app/src/app/app.component.html
@@ -13,8 +13,8 @@ <h2>Layout Demos: </h2>
     </span>
   </div>
   <div fxLayout="row"
-       fxLayoutAlign="start center"
        fxLayoutGap="20px"
+       fxHide.print
        style="height:40px; min-height:40px;">
     <button mat-raised-button color="primary" [routerLink]="['']">
       Static
@@ -30,4 +30,8 @@ <h2>Layout Demos: </h2>
 
 <div class="demo-content">
   <router-outlet></router-outlet>
+  <watermark
+      title="@angular/layout"
+      message="HTML Layouts w/ Flex and Grid CSS"
+      fxHide fxShow.print></watermark>
 </div>
diff --git a/src/apps/demo-app/src/app/app.module.ts b/src/apps/demo-app/src/app/app.module.ts
index 5a1ac8fa8..f39a75bd8 100644
--- a/src/apps/demo-app/src/app/app.module.ts
+++ b/src/apps/demo-app/src/app/app.module.ts
@@ -6,26 +6,31 @@ import {FlexLayoutModule, BREAKPOINT} from '@angular/flex-layout';
 import {RoutingModule} from './routing.module';
 import {AppComponent} from './app.component';
 import {DemoMaterialModule} from './material.module';
+import {WatermarkComponent} from './watermark.component';
 
-const PRINT_BREAKPOINTS = [{
-  alias: 'xs.print',
-  suffix: 'XsPrint',
-  mediaQuery: 'print and (max-width: 297px)',
+const EXTRA_BREAKPOINT = [{
+  alias: 'xs.landscape',
+  suffix: 'XsLandscape',
+  mediaQuery: 'screen and (orientation: landscape) and (max-width: 559px)',
+  priority: 1000,
   overlapping: false
 }];
 
 @NgModule({
   declarations: [
-    AppComponent,
+    AppComponent, WatermarkComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     BrowserAnimationsModule,
     RoutingModule,
     DemoMaterialModule,
-    FlexLayoutModule.withConfig({useColumnBasisZero: false}),
+    FlexLayoutModule.withConfig({
+      useColumnBasisZero: false,
+      printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
+    }),
   ],
-  providers: [{provide: BREAKPOINT, useValue: PRINT_BREAKPOINTS, multi: true}],
+  providers: [{provide: BREAKPOINT, useValue: EXTRA_BREAKPOINT, multi: true}],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/apps/demo-app/src/app/responsive/docs-responsive/docs-responsive.component.ts b/src/apps/demo-app/src/app/responsive/docs-responsive/docs-responsive.component.ts
index c4f77dbcc..43e1328f5 100644
--- a/src/apps/demo-app/src/app/responsive/docs-responsive/docs-responsive.component.ts
+++ b/src/apps/demo-app/src/app/responsive/docs-responsive/docs-responsive.component.ts
@@ -3,7 +3,8 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'demo-docs-responsive',
   template: `
-    <demo-responsive-layout-direction  class='small-demo'>  </demo-responsive-layout-direction>
+    <demo-responsive-layout-direction  class='small-demo' fxHide.print>
+    </demo-responsive-layout-direction>
     <demo-responsive-row-column class='small-demo'>  </demo-responsive-row-column>
     <demo-responsive-flex-directive  class='small-demo'>  </demo-responsive-flex-directive>
     <demo-responsive-flex-order  class='small-demo'>  </demo-responsive-flex-order>
diff --git a/src/apps/demo-app/src/app/watermark.component.scss b/src/apps/demo-app/src/app/watermark.component.scss
new file mode 100644
index 000000000..7bb4bf27f
--- /dev/null
+++ b/src/apps/demo-app/src/app/watermark.component.scss
@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  position: absolute;
+
+  width: 100vw;
+  min-height: 100vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  div {
+    width: 100vw;
+    min-height: 100vh;
+  }
+}
diff --git a/src/apps/demo-app/src/app/watermark.component.ts b/src/apps/demo-app/src/app/watermark.component.ts
new file mode 100644
index 000000000..9f58cdbd1
--- /dev/null
+++ b/src/apps/demo-app/src/app/watermark.component.ts
@@ -0,0 +1,56 @@
+import {Component, Input} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+@Component({
+  selector: 'watermark',
+  styleUrls: ['watermark.component.scss'],
+  template: `
+    <div [style.background]="backgroundImage">
+    </div>
+  `,
+})
+export class WatermarkComponent {
+  @Input() title = '@angular/layout';
+  @Input() message = 'Layout with FlexBox + CSS Grid';
+
+  constructor(private _sanitizer: DomSanitizer) {
+  }
+
+  /* tslint:disable:max-line-length */
+  get backgroundImage() {
+    const rawSVG = `
+       <svg id="diagonalWatermark"
+         width="100%" height="100%"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink" >
+          <style type="text/css">
+            text {
+              fill: currentColor;
+              font-family: Avenir, Arial, Helvetica, sans-serif;
+              opacity: 0.25;
+            }
+          </style>
+          <defs>
+            <pattern id="titlePattern" patternUnits="userSpaceOnUse" width="350" height="150">
+              <text y="30" font-size="30" id="title">
+               ${this.title}
+              </text>
+            </pattern>
+            <pattern xlink:href="#titlePattern">
+              <text y="60" x="0" font-size="16" id="message" width="350" height="150">
+                ${this.message}
+              </text>
+            </pattern>
+            <pattern id="combo" xlink:href="#titlePattern" patternTransform="rotate(-30)">
+              <use xlink:href="#title"/>
+              <use xlink:href="#message"/>
+            </pattern>
+          </defs>
+          	<rect width="100%" height="100%" fill="url(#combo)"/>
+        </svg>
+    `;
+    const bkgrndImageUrl = `data:image/svg+xml;base64,${window.btoa(rawSVG)}`;
+
+    return this._sanitizer.bypassSecurityTrustStyle(`url('${bkgrndImageUrl}') repeat-y`);
+  }
+}
diff --git a/src/apps/demo-app/src/styles.scss b/src/apps/demo-app/src/styles.scss
index f37e79889..8595a6f27 100644
--- a/src/apps/demo-app/src/styles.scss
+++ b/src/apps/demo-app/src/styles.scss
@@ -8,6 +8,18 @@ body {
   font-size: 16px;
   line-height: 1.4;
   -webkit-font-smoothing: antialiased;
+  -webkit-print-color-adjust: exact !important;
+}
+
+@page {
+   size: auto;   /* auto is the initial value */
+   margin: 2cm;
+}
+
+@media print {
+  body {
+    background: white;
+  }
 }
 
 h3 {
diff --git a/src/lib/core/add-alias.ts b/src/lib/core/add-alias.ts
index e419198e7..f098bb7bf 100644
--- a/src/lib/core/add-alias.ts
+++ b/src/lib/core/add-alias.ts
@@ -14,7 +14,7 @@ import {extendObject} from '../utils/object-extend';
  * and suffix (if available).
  */
 export function mergeAlias(dest: MediaChange, source: BreakPoint | null): MediaChange {
-  return extendObject(dest, source ? {
+  return extendObject(dest || {}, source ? {
         mqAlias: source.alias,
         suffix: source.suffix
       } : {});
diff --git a/src/lib/core/base/base2.ts b/src/lib/core/base/base2.ts
index ddaae9bba..330390296 100644
--- a/src/lib/core/base/base2.ts
+++ b/src/lib/core/base/base2.ts
@@ -37,7 +37,7 @@ export abstract class BaseDirective2 implements OnChanges, OnDestroy {
   }
   set activatedValue(value: string) {
     this.marshal.setValue(this.nativeElement, this.DIRECTIVE_KEY, value,
-      this.marshal.activatedBreakpoint);
+      this.marshal.activatedAlias);
   }
 
   /** Cache map for style computation */
diff --git a/src/lib/core/breakpoints/break-point-registry.ts b/src/lib/core/breakpoints/break-point-registry.ts
index ca6f49a7e..598e32591 100644
--- a/src/lib/core/breakpoints/break-point-registry.ts
+++ b/src/lib/core/breakpoints/break-point-registry.ts
@@ -11,7 +11,7 @@ import {BreakPoint} from './break-point';
 import {BREAKPOINTS} from './break-points-token';
 import {sortAscendingPriority} from './breakpoint-tools';
 
-type OptionalBreakPoint = BreakPoint | null;
+export type OptionalBreakPoint = BreakPoint | null;
 
 /**
  * Registry of 1..n MediaQuery breakpoint ranges
@@ -30,7 +30,7 @@ export class BreakPointRegistry {
    * Search breakpoints by alias (e.g. gt-xs)
    */
   findByAlias(alias: string): OptionalBreakPoint {
-    return this.findWithPredicate(alias, (bp) => bp.alias == alias);
+    return !alias ? null : this.findWithPredicate(alias, (bp) => bp.alias == alias);
   }
 
   findByQuery(query: string): OptionalBreakPoint {
diff --git a/src/lib/core/breakpoints/breakpoint-tools.ts b/src/lib/core/breakpoints/breakpoint-tools.ts
index 8bd553506..3938ab9e5 100644
--- a/src/lib/core/breakpoints/breakpoint-tools.ts
+++ b/src/lib/core/breakpoints/breakpoint-tools.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {OptionalBreakPoint} from './break-point-registry';
 import {BreakPoint} from './break-point';
 import {extendObject} from '../../utils/object-extend';
 
@@ -65,9 +66,9 @@ export function mergeByAlias(defaults: BreakPoint[], custom: BreakPoint[] = []):
 }
 
 /** HOF to sort the breakpoints by priority */
-export function sortDescendingPriority(a: BreakPoint, b: BreakPoint): number {
-  const priorityA = a.priority || 0;
-  const priorityB = b.priority || 0;
+export function sortDescendingPriority(a: OptionalBreakPoint, b: OptionalBreakPoint): number {
+  const priorityA = a ? a.priority || 0 : 0;
+  const priorityB = b ? b.priority || 0 : 0;
   return priorityB - priorityA;
 }
 
diff --git a/src/lib/core/breakpoints/data/orientation-break-points.spec.ts b/src/lib/core/breakpoints/data/orientation-break-points.spec.ts
index 640bf5e2d..80fd900fa 100644
--- a/src/lib/core/breakpoints/data/orientation-break-points.spec.ts
+++ b/src/lib/core/breakpoints/data/orientation-break-points.spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TestBed, inject} from '@angular/core/testing';
+import {TestBed, inject, async} from '@angular/core/testing';
 
 import {BreakPoint} from '../break-point';
 import {DEFAULT_BREAKPOINTS} from './break-points';
@@ -70,45 +70,44 @@ describe('break-point-provider', () => {
 
   describe('with custom breakpoint overrides', () => {
     const gtXsMediaQuery = 'screen and (max-width:20px) and (orientations: landscape)';
-    const mdMediaQuery = 'print and (min-width:10000px)';
+    const xxxlQuery = 'screen and (min-width:10000px)';
     const EXTRAS: BreakPoint[] = [
-      {alias: 'md', mediaQuery: mdMediaQuery},
-      {alias: 'gt-xs', mediaQuery: gtXsMediaQuery},
-      {alias: 'lt-ab', mediaQuery: '(max-width: 297px)'},
-      {alias: 'cd', mediaQuery: '(min-width: 298px) and (max-width:414px)'}
+      {alias: 'xxl',  priority: 2000, mediaQuery: xxxlQuery},
+      {alias: 'gt-xsl', priority: 2000, mediaQuery: gtXsMediaQuery},
+      {alias: 'lt-ab', priority: 2000, mediaQuery: '(max-width: 297px)'},
+      {alias: 'cd', priority: 2000, mediaQuery: '(min-width: 298px) and (max-width:414px)'}
     ];
-    const NUM_EXTRAS = 2;   // since md and gt-xs will not be added but merged
     let bpList: BreakPoint[];
     let accumulator: BreakPoint | null = null;
     let byAlias = (alias: string): BreakPoint | null => bpList.reduce((pos, it) => {
       return pos || ((it.alias === alias) ? it : null);
     }, accumulator);
 
-    beforeEach(() => {
+    beforeEach(async (() => {
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
         imports: [FlexLayoutModule.withConfig({addOrientationBps: true}, EXTRAS)]
       });
-    });
+    }));
     // tslint:disable-next-line:no-shadowed-variable
     beforeEach(inject([BREAKPOINTS], (breakPoints: BreakPoint[]) => {
       bpList = breakPoints;
     }));
 
     it('has merged the custom breakpoints as overrides to existing defaults', () => {
-      const total = ORIENTATION_BREAKPOINTS.length + DEFAULT_BREAKPOINTS.length + NUM_EXTRAS;
+      const total = ORIENTATION_BREAKPOINTS.length + DEFAULT_BREAKPOINTS.length + EXTRAS.length;
 
       expect(bpList.length).toEqual(total);
 
-      expect(byAlias('gt-xs')).toBeDefined();
-      expect(byAlias('gt-xs')!.mediaQuery).toEqual(gtXsMediaQuery);
+      expect(byAlias('gt-xsl')).toBeDefined();
+      expect(byAlias('gt-xsl')!.mediaQuery).toEqual(gtXsMediaQuery);
 
-      expect(byAlias('md')).toBeDefined();
-      expect(byAlias('md')!.mediaQuery).toEqual(mdMediaQuery);
+      expect(byAlias('xxl')).toBeDefined();
+      expect(byAlias('xxl')!.mediaQuery).toEqual(xxxlQuery);
     });
 
     it('can extend existing default breakpoints with custom settings', () => {
-      const total = ORIENTATION_BREAKPOINTS.length + DEFAULT_BREAKPOINTS.length + NUM_EXTRAS;
+      const total = ORIENTATION_BREAKPOINTS.length + DEFAULT_BREAKPOINTS.length + EXTRAS.length;
 
       expect(bpList.length).toEqual(total);
       expect(bpList[bpList.length - 2].alias).toEqual('lt-ab');
diff --git a/src/lib/core/breakpoints/data/orientation-break-points.ts b/src/lib/core/breakpoints/data/orientation-break-points.ts
index e3f3bf1be..1d1547259 100644
--- a/src/lib/core/breakpoints/data/orientation-break-points.ts
+++ b/src/lib/core/breakpoints/data/orientation-break-points.ts
@@ -36,15 +36,15 @@ export const ScreenTypes = {
  * Extended Breakpoints for handset/tablets with landscape or portrait orientations
  */
 export const ORIENTATION_BREAKPOINTS : BreakPoint[] = [
-  {'alias': 'handset',            priority: 10000, 'mediaQuery': ScreenTypes.HANDSET},
-  {'alias': 'handset.landscape',  priority: 10000, 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE},
-  {'alias': 'handset.portrait',   priority: 10000, 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT},
+  {'alias': 'handset',            priority: 2000, 'mediaQuery': ScreenTypes.HANDSET},
+  {'alias': 'handset.landscape',  priority: 2000, 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE},
+  {'alias': 'handset.portrait',   priority: 2000, 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT},
 
-  {'alias': 'tablet',             priority: 8000, 'mediaQuery': ScreenTypes.TABLET},
-  {'alias': 'tablet.landscape',   priority: 8000, 'mediaQuery': ScreenTypes.TABLET},
-  {'alias': 'tablet.portrait',    priority: 8000, 'mediaQuery': ScreenTypes.TABLET_PORTRAIT},
+  {'alias': 'tablet',             priority: 2100, 'mediaQuery': ScreenTypes.TABLET},
+  {'alias': 'tablet.landscape',   priority: 2100, 'mediaQuery': ScreenTypes.TABLET},
+  {'alias': 'tablet.portrait',    priority: 2100, 'mediaQuery': ScreenTypes.TABLET_PORTRAIT},
 
-  {'alias': 'web',                priority: 9000, 'mediaQuery': ScreenTypes.WEB, overlapping : true },
-  {'alias': 'web.landscape',      priority: 9000, 'mediaQuery': ScreenTypes.WEB_LANDSCAPE, overlapping : true },
-  {'alias': 'web.portrait',       priority: 9000, 'mediaQuery': ScreenTypes.WEB_PORTRAIT, overlapping : true }
+  {'alias': 'web',                priority: 2200, 'mediaQuery': ScreenTypes.WEB, overlapping : true },
+  {'alias': 'web.landscape',      priority: 2200, 'mediaQuery': ScreenTypes.WEB_LANDSCAPE, overlapping : true },
+  {'alias': 'web.portrait',       priority: 2200, 'mediaQuery': ScreenTypes.WEB_PORTRAIT, overlapping : true }
 ];
diff --git a/src/lib/core/match-media/match-media.spec.ts b/src/lib/core/match-media/match-media.spec.ts
index 308537b41..db67edc36 100644
--- a/src/lib/core/match-media/match-media.spec.ts
+++ b/src/lib/core/match-media/match-media.spec.ts
@@ -171,7 +171,7 @@ describe('match-media-observable', () => {
   });
 
   /**
-   * Only the ObservableMedia ignores de-activations;
+   * Only the MediaObserver ignores de-activations;
    * MediaMonitor and MatchMedia report both activations and de-activations!
    */
   it('ignores mediaQuery de-activations', () => {
@@ -189,9 +189,10 @@ describe('match-media-observable', () => {
 
     matchMedia.activate(breakPoints.findByAlias('md')!.mediaQuery);
     matchMedia.activate(breakPoints.findByAlias('gt-md')!.mediaQuery);
+    matchMedia.activate(breakPoints.findByAlias('lg')!.mediaQuery);
 
     // 'all' mediaQuery is already active; total count should be (3)
-    expect(activationCount).toEqual(3);
+    expect(activationCount).toEqual(4);
     expect(deactivationCount).toEqual(0);
 
     subscription.unsubscribe();
diff --git a/src/lib/core/match-media/mock/mock-match-media.spec.ts b/src/lib/core/match-media/mock/mock-match-media.spec.ts
index f1cdcef1c..b609185db 100644
--- a/src/lib/core/match-media/mock/mock-match-media.spec.ts
+++ b/src/lib/core/match-media/mock/mock-match-media.spec.ts
@@ -181,7 +181,7 @@ describe('mock-match-media', () => {
     subscription.unsubscribe();
   });
 
-  it('can activate with either a mediaQuery or an alias', () => {
+  it('can onMediaChange with either a mediaQuery or an alias', () => {
     let activates = 0;
     let bpGtSM = breakPoints.findByAlias('gt-sm'),
         bpLg = breakPoints.findByAlias('lg');
diff --git a/src/lib/core/match-media/mock/mock-match-media.ts b/src/lib/core/match-media/mock/mock-match-media.ts
index c1981d1fc..41910d480 100644
--- a/src/lib/core/match-media/mock/mock-match-media.ts
+++ b/src/lib/core/match-media/mock/mock-match-media.ts
@@ -68,7 +68,7 @@ export class MockMatchMedia extends MatchMedia {
   }
 
   /**
-   * Manually activate any overlapping mediaQueries to simulate
+   * Manually onMediaChange any overlapping mediaQueries to simulate
    * similar functionality in the window.matchMedia()
    */
   private _activateWithOverlaps(mediaQuery: string, useOverlaps: boolean): boolean {
@@ -92,7 +92,7 @@ export class MockMatchMedia extends MatchMedia {
           break;
       }
 
-      // Simulate activate of overlapping gt-<xxxx> mediaQuery ranges
+      // Simulate activation of overlapping gt-<xxxx> mediaQuery ranges
       switch (alias) {
         case 'xl'   :
           this._activateByAlias('gt-lg, gt-md, gt-sm, gt-xs');
@@ -137,15 +137,10 @@ export class MockMatchMedia extends MatchMedia {
     return this.hasActivated;
   }
 
-  /** Deactivate all current Mock MQLs */
+  /** Deactivate all current MQLs and reset the buffer */
   private _deactivateAll() {
-    if (this._actives.length) {
-      // Deactivate all current MQLs and reset the buffer
-      for (const it of this._actives) {
-        it.deactivate();
-      }
-      this._actives = [];
-    }
+    this._actives.forEach(it => it.deactivate());
+    this._actives = [];
     return this;
   }
 
diff --git a/src/lib/core/media-marshaller/media-marshaller.spec.ts b/src/lib/core/media-marshaller/media-marshaller.spec.ts
index b7e2516b1..e359376b8 100644
--- a/src/lib/core/media-marshaller/media-marshaller.spec.ts
+++ b/src/lib/core/media-marshaller/media-marshaller.spec.ts
@@ -8,132 +8,274 @@
 import {inject, TestBed} from '@angular/core/testing';
 import {Subject} from 'rxjs';
 
-import {MockMatchMedia, MockMatchMediaProvider} from '../match-media/mock/mock-match-media';
-import {MatchMedia} from '../match-media/match-media';
 import {MediaMarshaller} from './media-marshaller';
+import {MatchMedia} from '../match-media/match-media';
+import {DEFAULT_CONFIG, LAYOUT_CONFIG} from '../tokens/library-config';
+import {MockMatchMedia, MockMatchMediaProvider} from '../match-media/mock/mock-match-media';
 
 describe('media-marshaller', () => {
   let matchMedia: MockMatchMedia;
   let mediaMarshaller: MediaMarshaller;
 
-  beforeEach(() => {
-    // Configure testbed to prepare services
-    TestBed.configureTestingModule({
-      providers: [MockMatchMediaProvider]
+  describe('with layout printing NOT configured', () => {
+    beforeEach(() => {
+      // Configure testbed to prepare services
+      TestBed.configureTestingModule({
+        providers: [MockMatchMediaProvider]
+      });
+      spyOn(MediaMarshaller.prototype, 'onMediaChange').and.callThrough();
+      spyOn(MediaMarshaller.prototype, 'updateStyles').and.callThrough();
     });
-    spyOn(MediaMarshaller.prototype, 'activate').and.callThrough();
-    spyOn(MediaMarshaller.prototype, 'updateStyles').and.callThrough();
-  });
 
-  beforeEach(inject([MatchMedia, MediaMarshaller],
-      (service: MockMatchMedia, marshal: MediaMarshaller) => {
-        matchMedia = service;      // inject only to manually activate mediaQuery ranges
-        mediaMarshaller = marshal;
-      }));
-  afterEach(() => {
-    matchMedia.clearAll();
-  });
+    beforeEach(inject([MatchMedia, MediaMarshaller],
+        (service: MockMatchMedia, marshal: MediaMarshaller) => {
+          matchMedia = service;      // inject only to manually activate mediaQuery ranges
+          mediaMarshaller = marshal;
+        }));
+    afterEach(() => {
+      matchMedia.clearAll();
+    });
 
-  it('activates when match-media activates', () => {
-    matchMedia.activate('xs');
-    expect(mediaMarshaller.activate).toHaveBeenCalled();
-  });
+    it('activates when match-media activates', () => {
+      matchMedia.activate('xs');
+      expect(mediaMarshaller.onMediaChange).toHaveBeenCalled();
+    });
 
-  it('doesn\'t activate when match-media activates the same breakpoint twice', () => {
-    matchMedia.activate('xs');
-    matchMedia.activate('xs');
-    expect(mediaMarshaller.updateStyles).toHaveBeenCalledTimes(1);
-  });
+    it('doesn\'t trigger onMediaChange for same breakpoint activations', () => {
+      matchMedia.activate('xs');
+      matchMedia.activate('xs');
+      expect(mediaMarshaller.updateStyles).toHaveBeenCalledTimes(1);
+    });
 
-  it('should set correct activated breakpoint', () => {
-    matchMedia.activate('lg');
-    expect(mediaMarshaller.activatedBreakpoint).toBe('lg');
+    it('should set correct activated breakpoint', () => {
+      matchMedia.activate('lg');
+      expect(mediaMarshaller.activatedAlias).toBe('lg');
 
-    matchMedia.activate('gt-md');
-    expect(mediaMarshaller.activatedBreakpoint).toBe('gt-md');
-  });
+      matchMedia.activate('gt-md');
+      expect(mediaMarshaller.activatedAlias).toBe('gt-md');
+    });
 
-  it('should init', () => {
-    let triggered = false;
-    const builder = () => {
-      triggered = true;
-    };
-    mediaMarshaller.init(fakeElement, fakeKey, builder);
-    mediaMarshaller.setValue(fakeElement, fakeKey, 0, 'xs');
-    triggered = false;
-    matchMedia.activate('xs');
-    expect(triggered).toBeTruthy();
-  });
+    it('should init', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, 'xs');
+      triggered = false;
+      matchMedia.activate('xs');
+      expect(triggered).toBeTruthy();
+    });
 
-  it('should init with observables', () => {
-    let triggered = false;
-    const subject: Subject<void> = new Subject();
-    const obs = subject.asObservable();
-    const builder = () => {
-      triggered = true;
-    };
-    mediaMarshaller.init(fakeElement, fakeKey, builder, () => {
-    }, [obs]);
-    subject.next();
-    expect(triggered).toBeTruthy();
-  });
+    it('should init with observables', () => {
+      let triggered = false;
+      const subject: Subject<void> = new Subject();
+      const obs = subject.asObservable();
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder, () => {
+      }, [obs]);
+      subject.next();
+      expect(triggered).toBeTruthy();
+    });
 
-  it('should updateStyles', () => {
-    let triggered = false;
-    const builder = () => {
-      triggered = true;
-    };
-    mediaMarshaller.init(fakeElement, fakeKey, builder);
-    mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
-    triggered = false;
-    mediaMarshaller.updateStyles();
-    expect(triggered).toBeTruthy();
-  });
+    it('should updateStyles', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      triggered = false;
+      mediaMarshaller.updateStyles();
+      expect(triggered).toBeTruthy();
+    });
 
-  it('should updateElement', () => {
-    let triggered = false;
-    const builder = () => {
-      triggered = true;
-    };
-    mediaMarshaller.init(fakeElement, fakeKey, builder);
-    mediaMarshaller.updateElement(fakeElement, fakeKey, 0);
-    expect(triggered).toBeTruthy();
-  });
+    it('should updateElement', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.updateElement(fakeElement, fakeKey, 0);
+      expect(triggered).toBeTruthy();
+    });
 
-  it('should get the right value', () => {
-    const builder = () => {
-    };
-    mediaMarshaller.init(fakeElement, fakeKey, builder);
-    mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
-    const value = mediaMarshaller.getValue(fakeElement, fakeKey);
-    expect(value).toEqual(0);
-  });
+    it('should get the right value', () => {
+      const builder = () => {
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      const value = mediaMarshaller.getValue(fakeElement, fakeKey);
+      expect(value).toEqual(0);
+    });
+
+    it('should track changes', () => {
+      const builder = () => {
+      };
+      let triggered = false;
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.trackValue(fakeElement, fakeKey).subscribe(() => {
+        triggered = true;
+      });
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      expect(triggered).toBeTruthy();
+    });
 
-  it('should track changes', () => {
-    const builder = () => {
-    };
-    let triggered = false;
-    mediaMarshaller.init(fakeElement, fakeKey, builder);
-    mediaMarshaller.trackValue(fakeElement, fakeKey).subscribe(() => {
-      triggered = true;
+    it('should release', () => {
+      let triggered = false;
+      const subject: Subject<void> = new Subject();
+      const obs = subject.asObservable();
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder, () => {
+      }, [obs]);
+      mediaMarshaller.releaseElement(fakeElement);
+      subject.next();
+      expect(triggered).toBeFalsy();
     });
-    mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
-    expect(triggered).toBeTruthy();
   });
 
-  it('should release', () => {
-    let triggered = false;
-    const subject: Subject<void> = new Subject();
-    const obs = subject.asObservable();
-    const builder = () => {
-      triggered = true;
-    };
-    mediaMarshaller.init(fakeElement, fakeKey, builder, () => {
-    }, [obs]);
-    mediaMarshaller.releaseElement(fakeElement);
-    subject.next();
-    expect(triggered).toBeFalsy();
+  describe('with layout "print" configured', () => {
+    beforeEach(() => {
+      // Configure testbed to prepare services
+      TestBed.configureTestingModule({
+        providers: [
+          MockMatchMediaProvider,
+          {
+            provide: LAYOUT_CONFIG,
+            useValue: {
+              ...DEFAULT_CONFIG,
+              ...{printWithBreakpoint: 'sm'}
+            }
+          }
+        ]
+      });
+      spyOn(MediaMarshaller.prototype, 'onMediaChange').and.callThrough();
+      spyOn(MediaMarshaller.prototype, 'updateStyles').and.callThrough();
+    });
+
+    beforeEach(inject([MatchMedia, MediaMarshaller],
+        (service: MockMatchMedia, marshal: MediaMarshaller) => {
+          matchMedia = service;      // inject only to manually onMediaChange mediaQuery ranges
+          mediaMarshaller = marshal;
+        }));
+
+    afterEach(() => {
+      matchMedia.clearAll();
+    });
+
+    it('call onMediaChange when breakpoint activates', () => {
+      matchMedia.activate('xs');
+      expect(mediaMarshaller.onMediaChange).toHaveBeenCalled();
+    });
+
+    it('doesn\'t call updateStyles() when match-media activates the same breakpoint twice', () => {
+      matchMedia.activate('xs');
+      matchMedia.activate('xs');
+      expect(mediaMarshaller.updateStyles).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set correct activated breakpoint', () => {
+      matchMedia.activate('lg');
+      expect(mediaMarshaller.activatedAlias).toBe('lg');
+
+      matchMedia.activate('gt-md');
+      expect(mediaMarshaller.activatedAlias).toBe('gt-md');
+    });
+
+    it('should init', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, 'xs');
+      triggered = false;
+      matchMedia.activate('xs');
+      expect(triggered).toBeTruthy();
+    });
+
+    it('should init with observables', () => {
+      let triggered = false;
+      const subject: Subject<void> = new Subject();
+      const obs = subject.asObservable();
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder, () => {
+      }, [obs]);
+      subject.next();
+      expect(triggered).toBeTruthy();
+    });
+
+    it('should updateStyles', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      triggered = false;
+      mediaMarshaller.updateStyles();
+      expect(triggered).toBeTruthy();
+    });
+
+    it('should updateElement', () => {
+      let triggered = false;
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.updateElement(fakeElement, fakeKey, 0);
+      expect(triggered).toBeTruthy();
+    });
+
+    it('should get the right value', () => {
+      const builder = () => {
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      const value = mediaMarshaller.getValue(fakeElement, fakeKey);
+      expect(value).toEqual(0);
+    });
+
+    it('should track changes', () => {
+      const builder = () => {
+      };
+      let triggered = false;
+      mediaMarshaller.init(fakeElement, fakeKey, builder);
+      mediaMarshaller.trackValue(fakeElement, fakeKey).subscribe(() => {
+        triggered = true;
+      });
+      mediaMarshaller.setValue(fakeElement, fakeKey, 0, '');
+      expect(triggered).toBeTruthy();
+    });
+
+    it('should release', () => {
+      let triggered = false;
+      const subject: Subject<void> = new Subject();
+      const obs = subject.asObservable();
+      const builder = () => {
+        triggered = true;
+      };
+      mediaMarshaller.init(fakeElement, fakeKey, builder, () => {
+      }, [obs]);
+      mediaMarshaller.releaseElement(fakeElement);
+      subject.next();
+      expect(triggered).toBeFalsy();
+    });
+
+    it('will not propagate "print" events to activate', () => {
+      // const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959px)';
+      matchMedia.activate('print');
+      expect(mediaMarshaller.onMediaChange).not.toHaveBeenCalledWith({mediaQuery: 'print'});
+    });
+
   });
+
 });
 
 const fakeElement = {} as HTMLElement;
diff --git a/src/lib/core/media-marshaller/media-marshaller.ts b/src/lib/core/media-marshaller/media-marshaller.ts
index 0a28c0444..588915c60 100644
--- a/src/lib/core/media-marshaller/media-marshaller.ts
+++ b/src/lib/core/media-marshaller/media-marshaller.ts
@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Injectable} from '@angular/core';
+
 import {merge, Observable, Subject, Subscription} from 'rxjs';
-import {filter} from 'rxjs/operators';
+import {filter, tap} from 'rxjs/operators';
 
 import {BreakPoint} from '../breakpoints/break-point';
 import {sortDescendingPriority} from '../breakpoints/breakpoint-tools';
@@ -15,6 +16,9 @@ import {BreakPointRegistry} from '../breakpoints/break-point-registry';
 import {MatchMedia} from '../match-media/match-media';
 import {MediaChange} from '../media-change';
 
+import {PrintHook, HookTarget} from './print-hook';
+import {mergeAlias} from '../add-alias';
+
 type ClearCallback = () => void;
 type UpdateCallback = (val: any) => void;
 type Builder = UpdateCallback | ClearCallback;
@@ -42,35 +46,42 @@ export class MediaMarshaller {
   private activatedBreakpoints: BreakPoint[] = [];
   private elementMap: ElementMap = new Map();
   private elementKeyMap: ElementKeyMap = new WeakMap();
-  // registry of special triggers to update elements
-  private watcherMap: WatcherMap = new WeakMap();
-  private builderMap: BuilderMap = new WeakMap();
-  private clearBuilderMap: BuilderMap = new WeakMap();
+  private watcherMap: WatcherMap = new WeakMap();     // special triggers to update elements
+  private updateMap: BuilderMap = new WeakMap();      // callback functions to update styles
+  private clearMap: BuilderMap = new WeakMap();       // callback functions to clear styles
+
   private subject: Subject<ElementMatcher> = new Subject();
 
-  get activatedBreakpoint(): string {
+  get activatedAlias(): string {
     return this.activatedBreakpoints[0] ? this.activatedBreakpoints[0].alias : '';
   }
 
   constructor(protected matchMedia: MatchMedia,
-              protected breakpoints: BreakPointRegistry) {
+              protected breakpoints: BreakPointRegistry,
+              protected hook: PrintHook) {
     this.observeActivations();
   }
 
   /**
-   * activate or deactivate a given breakpoint
+   * Update styles on breakpoint activates or deactivates
    * @param mc
    */
-  activate(mc: MediaChange) {
+  onMediaChange(mc: MediaChange) {
     const bp: BreakPoint | null = this.findByQuery(mc.mediaQuery);
     if (bp) {
+      mc = mergeAlias(mc, bp);
+
       if (mc.matches && this.activatedBreakpoints.indexOf(bp) === -1) {
         this.activatedBreakpoints.push(bp);
         this.activatedBreakpoints.sort(sortDescendingPriority);
+
         this.updateStyles();
+
       } else if (!mc.matches && this.activatedBreakpoints.indexOf(bp) !== -1) {
         // Remove the breakpoint when it's deactivated
         this.activatedBreakpoints.splice(this.activatedBreakpoints.indexOf(bp), 1);
+        this.activatedBreakpoints.sort(sortDescendingPriority);
+
         this.updateStyles();
       }
     }
@@ -89,9 +100,11 @@ export class MediaMarshaller {
        updateFn?: UpdateCallback,
        clearFn?: ClearCallback,
        extraTriggers: Observable<any>[] = []): void {
+
+    initBuilderMap(this.updateMap, element, key, updateFn);
+    initBuilderMap(this.clearMap, element, key, clearFn);
+
     this.buildElementKeyMap(element, key);
-    initBuilderMap(this.builderMap, element, key, updateFn);
-    initBuilderMap(this.clearBuilderMap, element, key, clearFn);
     this.watchExtraTriggers(element, key, extraTriggers);
   }
 
@@ -104,7 +117,7 @@ export class MediaMarshaller {
   getValue(element: HTMLElement, key: string, bp?: string): any {
     const bpMap = this.elementMap.get(element);
     if (bpMap) {
-      const values = bp !== undefined ? bpMap.get(bp) : this.getFallback(bpMap, key);
+      const values = bp !== undefined ? bpMap.get(bp) : this.getActivatedValues(bpMap, key);
       if (values) {
         return values.get(key);
       }
@@ -120,7 +133,7 @@ export class MediaMarshaller {
   hasValue(element: HTMLElement, key: string): boolean {
     const bpMap = this.elementMap.get(element);
     if (bpMap) {
-      const values = this.getFallback(bpMap, key);
+      const values = this.getActivatedValues(bpMap, key);
       if (values) {
         return values.get(key) !== undefined || false;
       }
@@ -153,30 +166,34 @@ export class MediaMarshaller {
 
   /** Track element value changes for a specific key */
   trackValue(element: HTMLElement, key: string): Observable<ElementMatcher> {
-    return this.subject.asObservable()
+    return this.subject
+        .asObservable()
         .pipe(filter(v => v.element === element && v.key === key));
   }
 
   /** update all styles for all elements on the current breakpoint */
   updateStyles(): void {
     this.elementMap.forEach((bpMap, el) => {
-      const valueMap = this.getFallback(bpMap);
       const keyMap = new Set(this.elementKeyMap.get(el)!);
+      let valueMap = this.getActivatedValues(bpMap);
+
       if (valueMap) {
         valueMap.forEach((v, k) => {
           this.updateElement(el, k, v);
           keyMap.delete(k);
         });
       }
+
       keyMap.forEach(k => {
-        const fallbackMap = this.getFallback(bpMap, k);
-        if (fallbackMap) {
-          const value = fallbackMap.get(k);
+        valueMap = this.getActivatedValues(bpMap, k);
+        if (valueMap) {
+          const value = valueMap.get(k);
           this.updateElement(el, k, value);
         } else {
           this.clearElement(el, k);
         }
       });
+
     });
   }
 
@@ -186,7 +203,7 @@ export class MediaMarshaller {
    * @param key
    */
   clearElement(element: HTMLElement, key: string): void {
-    const builders = this.clearBuilderMap.get(element);
+    const builders = this.clearMap.get(element);
     if (builders) {
       const clearFn: ClearCallback = builders.get(key) as ClearCallback;
       if (!!clearFn) {
@@ -203,7 +220,7 @@ export class MediaMarshaller {
    * @param value
    */
   updateElement(element: HTMLElement, key: string, value: any): void {
-    const builders = this.builderMap.get(element);
+    const builders = this.updateMap.get(element);
     if (builders) {
       const updateFn: UpdateCallback = builders.get(key) as UpdateCallback;
       if (!!updateFn) {
@@ -276,7 +293,7 @@ export class MediaMarshaller {
    * @param bpMap
    * @param key
    */
-  private getFallback(bpMap: BreakpointMap, key?: string): ValueMap | undefined {
+  private getActivatedValues(bpMap: BreakpointMap, key?: string): ValueMap | undefined {
     for (let i = 0; i < this.activatedBreakpoints.length; i++) {
       const activatedBp = this.activatedBreakpoints[i];
       const valueMap = bpMap.get(activatedBp.alias);
@@ -294,11 +311,18 @@ export class MediaMarshaller {
    * Watch for mediaQuery breakpoint activations
    */
   private observeActivations() {
+    const target = this as unknown as HookTarget;
     const queries = this.breakpoints.items.map(bp => bp.mediaQuery);
+
     this.matchMedia
-        .observe(queries)
-        .subscribe(this.activate.bind(this));
+        .observe(this.hook.withPrintQuery(queries))
+        .pipe(
+            tap(this.hook.interceptEvents(target)),
+            filter(this.hook.blockPropagation())
+        )
+        .subscribe(this.onMediaChange.bind(this));
   }
+
 }
 
 function initBuilderMap(map: BuilderMap,
@@ -314,3 +338,4 @@ function initBuilderMap(map: BuilderMap,
     oldMap.set(key, input);
   }
 }
+
diff --git a/src/lib/core/media-marshaller/print-hook.ts b/src/lib/core/media-marshaller/print-hook.ts
new file mode 100644
index 000000000..d2139a9d8
--- /dev/null
+++ b/src/lib/core/media-marshaller/print-hook.ts
@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {Inject, Injectable} from '@angular/core';
+
+import {mergeAlias} from '../add-alias';
+import {MediaChange} from '../media-change';
+import {BreakPoint} from '../breakpoints/break-point';
+import {LAYOUT_CONFIG, LayoutConfigOptions} from '../tokens/library-config';
+import {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry';
+import {sortDescendingPriority} from '../breakpoints/breakpoint-tools';
+
+/**
+ * Interface to apply PrintHook to call anonymous `target.updateStyles()`
+ */
+export interface HookTarget {
+  activatedBreakpoints: BreakPoint[];
+  updateStyles(): void;
+}
+
+const PRINT = 'print';
+export const BREAKPOINT_PRINT = {
+  alias: PRINT,
+  mediaQuery: PRINT,
+  priority: 1000
+};
+
+/**
+ * PrintHook - Use to intercept print MediaQuery activations and force
+ *             layouts to render with the specified print alias/breakpoint
+ *
+ * Used in MediaMarshaller and MediaObserver
+ */
+@Injectable({providedIn: 'root'})
+export class PrintHook {
+  constructor(
+      protected breakpoints: BreakPointRegistry,
+      @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions) {
+  }
+
+  /** Add 'print' mediaQuery: to listen for matchMedia activations */
+  withPrintQuery(queries: string[]): string[] {
+    return [...queries, PRINT];
+  }
+
+  /** Is the MediaChange event for any 'print' @media */
+  isPrintEvent(e: MediaChange): Boolean {
+    return e.mediaQuery.startsWith(PRINT);
+  }
+
+  /** What is the desired mqAlias to use while printing? */
+  get printAlias(): string[] {
+    return this.layoutConfig.printWithBreakpoints || [];
+  }
+
+  /** Lookup breakpoints associated with print aliases. */
+  get printBreakPoints(): BreakPoint[] {
+    return this.printAlias
+        .map(alias => this.breakpoints.findByAlias(alias))
+        .filter(bp => bp !== null) as BreakPoint[];
+  }
+
+  /** Lookup breakpoint associated with mediaQuery */
+  getEventBreakpoints({mediaQuery}: MediaChange): BreakPoint[] {
+    const bp = this.breakpoints.findByQuery(mediaQuery);
+    const list = bp ? [...this.printBreakPoints, bp] : this.printBreakPoints;
+
+    return list.sort(sortDescendingPriority);
+  }
+
+  /** Update event with printAlias mediaQuery information */
+  updateEvent(event: MediaChange): MediaChange {
+    let bp: OptionalBreakPoint = this.breakpoints.findByQuery(event.mediaQuery);
+    if (this.isPrintEvent(event)) {
+      // Reset from 'print' to first (highest priority) print breakpoint
+      bp = this.getEventBreakpoints(event)[0];
+      event.mediaQuery = bp ? bp.mediaQuery : '';
+    }
+    return mergeAlias(event, bp);
+  }
+
+  /**
+   * Prepare RxJs filter operator with partial application
+   * @return pipeable filter predicate
+   */
+  interceptEvents(target: HookTarget) {
+    return (event: MediaChange) => {
+      if (this.isPrintEvent(event)) {
+        if (event.matches && !this.isPrinting) {
+          this.startPrinting(target, this.getEventBreakpoints(event));
+          target.updateStyles();
+
+        } else if (!event.matches && this.isPrinting) {
+          this.stopPrinting(target);
+          target.updateStyles();
+        }
+      } else {
+        this.collectActivations(event);
+      }
+    };
+  }
+
+  /** Stop mediaChange event propagation in event streams */
+  blockPropagation() {
+    return (event: MediaChange): boolean => {
+      return !(this.isPrinting || this.isPrintEvent(event));
+    };
+  }
+
+  /**
+   * Save current activateBreakpoints (for later restore)
+   * and substitute only the printAlias breakpoint
+   */
+  protected startPrinting(target: HookTarget, bpList: OptionalBreakPoint[]) {
+    this.isPrinting = true;
+    target.activatedBreakpoints = this.queue.addPrintBreakpoints(bpList);
+  }
+
+  /** For any print de-activations, reset the entire print queue */
+  protected stopPrinting(target: HookTarget) {
+    target.activatedBreakpoints = this.deactivations;
+    this.deactivations = [];
+    this.queue.clear();
+    this.isPrinting = false;
+  }
+
+  /**
+   * To restore pre-Print Activations, we must capture the proper
+   * list of breakpoint activations BEFORE print starts. OnBeforePrint()
+   * is not supported; so 'print' mediaQuery activations must be used.
+   *
+   * >  But activated breakpoints are deactivated BEFORE 'print' activation.
+   *
+   * Let's capture all de-activations using the following logic:
+   *
+   *  When not printing:
+   *    - clear cache when activating non-print breakpoint
+   *    - update cache (and sort) when deactivating
+   *
+   *  When printing:
+   *    - sort and save when starting print
+   *    - restore as activatedTargets and clear when stop printing
+   */
+  collectActivations(event: MediaChange) {
+    if (!this.isPrinting) {
+      if (!event.matches) {
+        const bp = this.breakpoints.findByQuery(event.mediaQuery);
+        if (bp) {   // Deactivating a breakpoint
+          this.deactivations.push(bp);
+          this.deactivations.sort(sortDescendingPriority);
+        }
+      } else {
+        this.deactivations = [];
+      }
+    }
+  }
+
+  /** Is this service currently in Print-mode ? */
+  private isPrinting = false;
+  private queue: PrintQueue = new PrintQueue();
+  private deactivations: BreakPoint[] = [];
+
+}
+
+// ************************************************************************
+// Internal Utility class 'PrintQueue'
+// ************************************************************************
+
+/**
+ * Utility class to manage print breakpoints + activatedBreakpoints
+ * with correct sorting WHILE printing
+ */
+class PrintQueue {
+  /** Sorted queue with prioritized print breakpoints */
+  printBreakpoints: BreakPoint[] = [];
+
+  addPrintBreakpoints(bpList: OptionalBreakPoint[]): BreakPoint[] {
+    bpList.push(BREAKPOINT_PRINT);
+    bpList.sort(sortDescendingPriority);
+    bpList.forEach(bp => this.addBreakpoint(bp));
+
+    return this.printBreakpoints;
+  }
+
+  /** Add Print breakpoint to queue */
+  addBreakpoint(bp: OptionalBreakPoint) {
+    if (!!bp) {
+      const bpInList = this.printBreakpoints.find(it => it.mediaQuery === bp.mediaQuery);
+      if (bpInList === undefined) {
+        // If this is a `printAlias` breakpoint, then append. If a true 'print' breakpoint,
+        // register as highest priority in the queue
+        this.printBreakpoints = isPrintBreakPoint(bp) ? [bp, ...this.printBreakpoints]
+            : [...this.printBreakpoints, bp];
+      }
+    }
+  }
+
+  /** Restore original activated breakpoints and clear internal caches */
+  clear() {
+    this.printBreakpoints = [];
+  }
+}
+
+// ************************************************************************
+// Internal Utility methods
+// ************************************************************************
+
+/** Only support intercept queueing if the Breakpoint is a print @media query */
+function isPrintBreakPoint(bp: OptionalBreakPoint) {
+  return bp ? bp.mediaQuery.startsWith(PRINT) : false;
+}
diff --git a/src/lib/core/media-observer/media-observer.spec.ts b/src/lib/core/media-observer/media-observer.spec.ts
index ec87be696..1c03bec23 100644
--- a/src/lib/core/media-observer/media-observer.spec.ts
+++ b/src/lib/core/media-observer/media-observer.spec.ts
@@ -13,8 +13,9 @@ import {BREAKPOINTS} from '../breakpoints/break-points-token';
 import {MatchMedia} from '../match-media/match-media';
 import {MediaChange} from '../media-change';
 import {MediaObserver} from './media-observer';
-import {MockMatchMedia, MockMatchMediaProvider} from '../match-media/mock/mock-match-media';
 import {BREAKPOINT} from '../tokens/breakpoint-token';
+import {MockMatchMedia, MockMatchMediaProvider} from '../match-media/mock/mock-match-media';
+import {DEFAULT_CONFIG, LAYOUT_CONFIG} from '../tokens/library-config';
 
 describe('media-observer', () => {
 
@@ -37,144 +38,148 @@ describe('media-observer', () => {
       knownBreakPoints = breakpoints;
     }));
 
-    it('can subscribe to built-in mediaQueries', inject(
-        [MediaObserver, MatchMedia],
-        (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
-          let current: MediaChange = new MediaChange(false, 'unknown');
-          let subscription = matchMedia.observe().subscribe((change: MediaChange) => {
-            current = change;
-          });
-          expect(current.matches).toBeTruthy();
-          expect(current.mediaQuery).toEqual('all');
-          subscription.unsubscribe();
+    it('can supports the `.isActive()` API', inject(
+      [MediaObserver, MatchMedia],
+      (media: MediaObserver, matchMedia: MockMatchMedia) => {
+        expect(media).toBeDefined();
 
-          expect(mediaObserver).toBeDefined();
-          current = new MediaChange(true);
-          subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-            current = change;
-          });
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('md');
+        expect(media.isActive('md')).toBeTruthy();
 
-          // Confirm initial match is for 'all'
-          expect(current.matches).toBeTruthy();
-          expect(current.mediaQuery).toEqual('all');
+        matchMedia.activate('lg');
+        expect(media.isActive('lg')).toBeTruthy();
+        expect(media.isActive('md')).toBeFalsy();
 
-          try {
-            // Allow overlapping activations to be announced to observers
-            matchMedia.autoRegisterQueries = false;
-            mediaObserver.filterOverlaps = false;
+        matchMedia.clearAll();
+      }));
 
-            // Activate mediaQuery associated with 'md' alias
-            matchMedia.activate('md');
-            expect(current.mediaQuery).toEqual(findMediaQuery('md'));
+    it('can supports RxJS operators', inject(
+      [MediaObserver, MatchMedia],
+      (mediaService: MediaObserver, matchMedia: MockMatchMedia) => {
+        let count = 0,
+          subscription = mediaService.media$.pipe(
+            filter((change: MediaChange) => change.mqAlias == 'md'),
+            map((change: MediaChange) => change.mqAlias)
+          ).subscribe(_ => {
+            count += 1;
+          });
 
-            matchMedia.activate('gt-lg');
-            expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
 
-            matchMedia.activate('unknown');
-            expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('sm');
+        expect(count).toEqual(0);
 
-          } finally {
-            matchMedia.autoRegisterQueries = true;
-            subscription.unsubscribe();
-          }
+        matchMedia.activate('md');
+        expect(count).toEqual(1);
 
-        }));
+        matchMedia.activate('lg');
+        expect(count).toEqual(1);
 
-    it('can supports the `.isActive()` API', inject(
-        [MediaObserver, MatchMedia],
-        (media: MediaObserver, matchMedia: MockMatchMedia) => {
-          expect(media).toBeDefined();
+        matchMedia.activate('md');
+        expect(count).toEqual(2);
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('md');
-          expect(media.isActive('md')).toBeTruthy();
-
-          matchMedia.activate('lg');
-          expect(media.isActive('lg')).toBeTruthy();
-          expect(media.isActive('md')).toBeFalsy();
+        matchMedia.activate('gt-md');
+        matchMedia.activate('gt-lg');
+        matchMedia.activate('invalid');
+        expect(count).toEqual(2);
 
-        }));
+        subscription.unsubscribe();
+        matchMedia.clearAll();
+      }));
 
-    it('can supports RxJS operators', inject(
-        [MediaObserver, MatchMedia],
-        (mediaService: MediaObserver, matchMedia: MockMatchMedia) => {
-          let count = 0,
-              subscription = mediaService.media$.pipe(
-                  filter((change: MediaChange) => change.mqAlias == 'md'),
-                  map((change: MediaChange) => change.mqAlias)
-              ).subscribe(_ => {
-                count += 1;
-              });
+    it('can subscribe to built-in mediaQueries', inject(
+      [MediaObserver, MatchMedia],
+      (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
+        let current: MediaChange = new MediaChange(true);
+        let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+          current = change;
+        });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('sm');
-          expect(count).toEqual(0);
+        expect(mediaObserver).toBeDefined();
 
-          matchMedia.activate('md');
-          expect(count).toEqual(1);
+        // Confirm initial match is for 'all'
+        expect(current).toBeDefined();
+        expect(current.matches).toBeTruthy();
+        expect(current.mediaQuery).toEqual('all');
 
-          matchMedia.activate('lg');
-          expect(count).toEqual(1);
+        try {
+          // Allow overlapping activations to be announced to observers
+          matchMedia.autoRegisterQueries = false;
+          mediaObserver.filterOverlaps = false;
 
+          // Activate mediaQuery associated with 'md' alias
           matchMedia.activate('md');
-          expect(count).toEqual(2);
+          expect(current.mediaQuery).toEqual(findMediaQuery('md'));
 
-          matchMedia.activate('gt-md');
           matchMedia.activate('gt-lg');
-          matchMedia.activate('invalid');
-          expect(count).toEqual(2);
+          expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
+
+          matchMedia.activate('unknown');
+          expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
 
+        } finally {
+          matchMedia.autoRegisterQueries = true;
           subscription.unsubscribe();
-        }));
+
+          matchMedia.clearAll();
+        }
+      }));
 
     it('can `.unsubscribe()` properly', inject(
-        [MediaObserver, MatchMedia],
-        (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
-          let current: MediaChange = new MediaChange();
-          let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-            current = change;
-          });
+      [MediaObserver, MatchMedia],
+      (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
+        let current: MediaChange = new MediaChange(true);
+        let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+          current = change;
+        });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('md');
-          expect(current.mediaQuery).toEqual(findMediaQuery('md'));
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('md');
+        expect(current.mediaQuery).toEqual(findMediaQuery('md'));
 
-          // Un-subscribe
-          subscription.unsubscribe();
+        // Un-subscribe
+        subscription.unsubscribe();
+
+        matchMedia.activate('lg');
+        expect(current.mqAlias).toBe('md');
 
-          matchMedia.activate('lg');
-          expect(current.mqAlias).toBe('md');
+        matchMedia.activate('xs');
+        expect(current.mqAlias).toBe('md');
 
-          matchMedia.activate('xs');
-          expect(current.mqAlias).toBe('md');
-        }));
+        matchMedia.clearAll();
+      }));
 
     it('can observe a startup activation of XS', inject(
-        [MediaObserver, MatchMedia],
-        (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
-          let current: MediaChange = new MediaChange();
-          let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
-            current = change;
-          });
+      [MediaObserver, MatchMedia],
+      (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
+        let current: MediaChange = new MediaChange(true);
+        let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+          current = change;
+        });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('xs');
-          expect(current.mediaQuery).toEqual(findMediaQuery('xs'));
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('xs');
+        expect(current.mediaQuery).toEqual(findMediaQuery('xs'));
 
-          // Un-subscribe
-          subscription.unsubscribe();
+        // Un-subscribe
+        subscription.unsubscribe();
+
+        matchMedia.activate('lg');
+        expect(current.mqAlias).toBe('xs');
 
-          matchMedia.activate('lg');
-          expect(current.mqAlias).toBe('xs');
-        }));
+        matchMedia.clearAll();
+      }));
   });
 
   describe('with custom BreakPoints', () => {
-    const gtXsMediaQuery = 'screen and (max-width:20px) and (orientations: landscape)';
-    const superLgMediaQuery = 'screen and (min-width:10000px)';
+    const gtXsMediaQuery = 'screen and (min-width:120px) and (orientation:landscape)';
+    const superXLQuery = 'screen and (min-width:10000px)';
+    const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959px)';
+
     const CUSTOM_BREAKPOINTS = [
-      {alias: 'super-xxl', mediaQuery: superLgMediaQuery, priority: 2000},
-      {alias: 'tablet-gt-xs', mediaQuery: gtXsMediaQuery, priority: 2000},
+      {alias: 'slate.xl', priority: 11000, mediaQuery: superXLQuery},
+      {alias: 'tablet-gt-xs', priority: 110, mediaQuery: gtXsMediaQuery},
     ];
 
     beforeEach(() => {
@@ -188,25 +193,116 @@ describe('media-observer', () => {
     });
 
     it('can activate custom alias with custom mediaQueries', inject(
-        [MediaObserver, MatchMedia],
-        (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
-          let current: MediaChange = new MediaChange();
-          let subscription = mediaObserver
-                .media$
-                .subscribe((change: MediaChange) => {
-                  current = change;
-                });
+      [MediaObserver, MatchMedia],
+      (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
+        let current: MediaChange = new MediaChange(true);
+        let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+          current = change;
+        });
+
+        // Activate mediaQuery associated with 'md' alias
+        matchMedia.activate('sm');
+        expect(current.mediaQuery).toEqual(smMediaQuery);
+
+        // MediaObserver will not announce print events
+        // unless a printAlias layout has been configured.
+        matchMedia.activate('slate.xl');
+        expect(current.mediaQuery).toEqual(superXLQuery);
+
+        matchMedia.activate('tablet-gt-xs');
+        expect(current.mqAlias).toBe('tablet-gt-xs');
+        expect(current.mediaQuery).toBe(gtXsMediaQuery);
+
+        subscription.unsubscribe();
+        matchMedia.clearAll();
+      }));
+  });
 
-          // Activate mediaQuery associated with 'md' alias
-          matchMedia.activate('super-xxl');
-          expect(current.mediaQuery).toEqual(superLgMediaQuery);
+  describe('with layout "print" configured', () => {
+     const mdMediaQuery = 'screen and (min-width: 960px) and (max-width: 1279px)';
+
+     beforeEach(() => {
+       // Configure testbed to prepare services
+       TestBed.configureTestingModule({
+         providers: [
+           MockMatchMediaProvider,
+           {
+             provide: LAYOUT_CONFIG,
+             useValue: {
+               ...DEFAULT_CONFIG,
+               ...{ printWithBreakpoints : ['md']}
+             }
+           }
+         ]
+       });
+     });
+
+     it('can activate when configured with "md" alias', inject(
+       [MediaObserver, MatchMedia],
+       (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
+         let current: MediaChange = new MediaChange(true);
+         let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+           current = change;
+         });
+
+         try {
+
+           matchMedia.activate('lg');
+
+           // Activate mediaQuery associated with 'md' alias
+           matchMedia.activate('print');
+           expect(current.mqAlias).toBe('md');
+           expect(current.mediaQuery).toEqual(mdMediaQuery);
+
+           matchMedia.activate('sm');
+           expect(current.mqAlias).toBe('sm');
+
+         } finally {
+           matchMedia.clearAll();
+            subscription.unsubscribe();
+         }
 
-          matchMedia.activate('tablet-gt-xs');
-          expect(current.mqAlias).toBe('tablet-gt-xs');
-          expect(current.mediaQuery).toBe(gtXsMediaQuery);
+       }));
+   });
 
-          subscription.unsubscribe();
-        }));
-  });
+  describe('with layout print NOT configured', () => {
+     const smMediaQuery = 'screen and (min-width: 600px) and (max-width: 959px)';
+
+     beforeEach(() => {
+       // Configure testbed to prepare services
+       TestBed.configureTestingModule({
+         providers: [
+           MockMatchMediaProvider
+         ]
+       });
+     });
+
+     it('will skip print activation without alias', inject(
+       [MediaObserver, MatchMedia],
+       (mediaObserver: MediaObserver, matchMedia: MockMatchMedia) => {
+         let current: MediaChange = new MediaChange(true);
+         let subscription = mediaObserver.media$.subscribe((change: MediaChange) => {
+           current = change;
+         });
+
+         try {
+
+           matchMedia.activate('sm');
+           expect(current.mqAlias).toBe('sm');
+
+           // Activate mediaQuery associated with 'md' alias
+           matchMedia.activate('print');
+           expect(current.mqAlias).toBe('sm');
+           expect(current.mediaQuery).toEqual(smMediaQuery);
+
+           matchMedia.activate('xl');
+           expect(current.mqAlias).toBe('xl');
+
+         } finally {
+            subscription.unsubscribe();
+            matchMedia.clearAll();
+         }
 
+       }));
+   });
 });
diff --git a/src/lib/core/media-observer/media-observer.ts b/src/lib/core/media-observer/media-observer.ts
index 4d3d9c435..883598ce2 100644
--- a/src/lib/core/media-observer/media-observer.ts
+++ b/src/lib/core/media-observer/media-observer.ts
@@ -9,10 +9,11 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {filter, map} from 'rxjs/operators';
 
-import {BreakPointRegistry} from '../breakpoints/break-point-registry';
+import {mergeAlias} from '../add-alias';
 import {MediaChange} from '../media-change';
 import {MatchMedia} from '../match-media/match-media';
-import {mergeAlias} from '../add-alias';
+import {PrintHook} from '../media-marshaller/print-hook';
+import {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry';
 
 /**
  * Class internalizes a MatchMedia service and exposes an Observable interface.
@@ -64,7 +65,9 @@ export class MediaObserver {
   filterOverlaps = true;
   readonly media$: Observable<MediaChange>;
 
-  constructor(private breakpoints: BreakPointRegistry, private mediaWatcher: MatchMedia) {
+  constructor(protected breakpoints: BreakPointRegistry,
+      protected mediaWatcher: MatchMedia,
+      protected hook: PrintHook) {
     this.media$ = this.watchActivations();
   }
 
@@ -98,23 +101,36 @@ export class MediaObserver {
    */
   private buildObservable(mqList: string[]): Observable<MediaChange> {
     const locator = this.breakpoints;
+    const onlyActivations = (change: MediaChange) => change.matches;
+    const excludeUnknown = (change: MediaChange) => change.mediaQuery !== '';
+    const excludeCustomPrints = (change: MediaChange) => !change.mediaQuery.startsWith('print');
     const excludeOverlaps = (change: MediaChange) => {
       const bp = locator.findByQuery(change.mediaQuery);
       return !bp ? true : !(this.filterOverlaps && bp.overlapping);
     };
+    const replaceWithPrintAlias = (change: MediaChange) => {
+      if (this.hook.isPrintEvent(change)) {
+        // replace with aliased substitute (if configured)
+        return this.hook.updateEvent(change);
+      }
+      let bp: OptionalBreakPoint = locator.findByQuery(change.mediaQuery);
+      return mergeAlias(change, bp);
+    };
 
     /**
      * Only pass/announce activations (not de-activations)
+     *
      * Inject associated (if any) alias information into the MediaChange event
-     * Exclude mediaQuery activations for overlapping mQs. List bounded mQ ranges only
+     * - Exclude mediaQuery activations for overlapping mQs. List bounded mQ ranges only
+     * - Exclude print activations that do not have an associated mediaQuery
      */
-    return this.mediaWatcher.observe(mqList)
+    return this.mediaWatcher.observe(this.hook.withPrintQuery(mqList))
         .pipe(
-            filter(change => change.matches),
+            filter(onlyActivations),
             filter(excludeOverlaps),
-            map((change: MediaChange) => {
-              return mergeAlias(change, locator.findByQuery(change.mediaQuery));
-            })
+            map(replaceWithPrintAlias),
+            filter(excludeCustomPrints),
+            filter(excludeUnknown)
         );
   }
 
diff --git a/src/lib/core/public-api.ts b/src/lib/core/public-api.ts
index e4dba7313..5d43b586a 100644
--- a/src/lib/core/public-api.ts
+++ b/src/lib/core/public-api.ts
@@ -21,3 +21,4 @@ export * from './style-utils/style-utils';
 export * from './style-builder/style-builder';
 export * from './basis-validator/basis-validator';
 export * from './media-marshaller/media-marshaller';
+export * from './media-marshaller/print-hook';
diff --git a/src/lib/core/tokens/library-config.ts b/src/lib/core/tokens/library-config.ts
index 3a4f33fbf..ce0ee0816 100644
--- a/src/lib/core/tokens/library-config.ts
+++ b/src/lib/core/tokens/library-config.ts
@@ -15,6 +15,7 @@ export interface LayoutConfigOptions {
   disableVendorPrefixes?: boolean;
   serverLoaded?: boolean;
   useColumnBasisZero?: boolean;
+  printWithBreakpoints?: string[];
 }
 
 export const DEFAULT_CONFIG: LayoutConfigOptions = {
@@ -24,6 +25,7 @@ export const DEFAULT_CONFIG: LayoutConfigOptions = {
   disableVendorPrefixes: false,
   serverLoaded: false,
   useColumnBasisZero: true,
+  printWithBreakpoints: []
 };
 
 export const LAYOUT_CONFIG = new InjectionToken<LayoutConfigOptions>(
diff --git a/src/lib/extended/class/class.spec.ts b/src/lib/extended/class/class.spec.ts
index 04b240c11..02a7845d0 100644
--- a/src/lib/extended/class/class.spec.ts
+++ b/src/lib/extended/class/class.spec.ts
@@ -225,7 +225,6 @@ describe('class directive', () => {
     expectNativeEl(fixture).toHaveCssClass('green');
   });
 
-
   it('should work with material buttons', () => {
     createTestComponent(`
           <button mat-raised-button
diff --git a/src/lib/extended/show-hide/hide.spec.ts b/src/lib/extended/show-hide/hide.spec.ts
index 4b3ff2fbe..97f7a43fb 100644
--- a/src/lib/extended/show-hide/hide.spec.ts
+++ b/src/lib/extended/show-hide/hide.spec.ts
@@ -17,6 +17,7 @@ import {
   StyleUtils,
 } from '@angular/flex-layout/core';
 
+
 import {customMatchers, expect, NgMatchers} from '../../utils/testing/custom-matchers';
 import {
   makeCreateTestComponent, expectNativeEl, queryFor
@@ -55,7 +56,6 @@ describe('hide directive', () => {
   beforeEach(() => {
     jasmine.addMatchers(customMatchers);
 
-
     // Configure testbed to prepare services
     TestBed.configureTestingModule({
       imports: [CommonModule, FlexLayoutModule],
@@ -66,6 +66,9 @@ describe('hide directive', () => {
       ]
     });
   });
+  afterEach(() => {
+    matchMedia.clearAll();
+  });
 
   describe('without `responsive` features', () => {
 
@@ -246,9 +249,30 @@ describe('hide directive', () => {
     });
   });
 
+  describe('with fxHide.print features', () => {
+
+    it('should hide element during print', () => {
+      createTestComponent(`
+          <div fxHide.print style="display: inline-block;">
+            This content to be hidden ONLY when printing
+          </div>
+        `);
+
+      matchMedia.useOverlaps = true;
+      expectNativeEl(fixture).toHaveStyle({'display': 'inline-block'}, styler);
+
+      matchMedia.activate('print');
+      expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
+
+      matchMedia.activate('sm');
+      expectNativeEl(fixture).toHaveStyle({'display': 'inline-block'}, styler);
+    });
+
+  });
+
   it('should support hide and show', () => {
     createTestComponent(`
-      <div fxShow fxHide.gt-sm style="display: inline-block;">
+      <div fxShow fxHide.gt-sm fxHide.print style="display: inline-block;">
         This content to be shown ONLY when gt-sm
       </div>
     `);
@@ -257,8 +281,33 @@ describe('hide directive', () => {
     matchMedia.activate('md', true);
     expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
 
+    matchMedia.activate('sm', true);
+    expectNativeEl(fixture).toHaveStyle({'display': 'inline-block'}, styler);
+
     matchMedia.activate('xs', true);
     expectNativeEl(fixture).toHaveStyle({'display': 'inline-block'}, styler);
+
+    matchMedia.activate('print', false);
+    expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
+  });
+
+  it('should support hide and show with fxLayoutAlign', () => {
+    createTestComponent(`
+      <div style="height:40px; min-height:40px; display: flex;"
+           fxLayout="row" fxLayoutAlign="start center"
+           fxHide.print>
+      </div>
+    `);
+    expectNativeEl(fixture).toHaveStyle({'display': 'flex'}, styler);
+
+    matchMedia.activate('md', true);
+    expectNativeEl(fixture).toHaveStyle({'display': 'flex'}, styler);
+
+    matchMedia.activate('print', false);
+    expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
+
+    matchMedia.activate('xs', true);
+    expectNativeEl(fixture).toHaveStyle({'display': 'flex'}, styler);
   });
 
   it('should support fxHide and fxLayout', () => {
diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts
index b9c9560f6..3fbe2f15b 100644
--- a/src/lib/extended/show-hide/show-hide.ts
+++ b/src/lib/extended/show-hide/show-hide.ts
@@ -64,13 +64,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
   // *********************************************
 
   ngAfterViewInit() {
-    this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout');
-    this.marshal.trackValue(this.nativeElement, 'layout')
-      .pipe(takeUntil(this.destroySubject))
-      .subscribe(this.triggerUpdate.bind(this));
-    this.marshal.trackValue(this.nativeElement, 'layout-align')
-      .pipe(takeUntil(this.destroySubject))
-      .subscribe(this.triggerUpdate.bind(this));
+    this.trackExtraTriggers();
 
     const children = Array.from(this.nativeElement.children);
     for (let i = 0; i < children.length; i++) {
@@ -109,8 +103,8 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
         const bp = inputKey.slice(1).join('.');
         const inputValue = changes[key].currentValue;
         let shouldShow = inputValue !== '' ?
-          inputValue !== 0 ? coerceBooleanProperty(inputValue) : false
-          : true;
+            inputValue !== 0 ? coerceBooleanProperty(inputValue) : false
+            : true;
         if (inputKey[0] === 'fxHide') {
           shouldShow = !shouldShow;
         }
@@ -123,6 +117,20 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
   // Protected methods
   // *********************************************
 
+  /**
+   *  Watch for these extra triggers to update fxShow, fxHide stylings
+   */
+  protected trackExtraTriggers() {
+    this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout');
+
+    ['layout', 'layout-align'].forEach(key => {
+      this.marshal
+          .trackValue(this.nativeElement, key)
+          .pipe(takeUntil(this.destroySubject))
+          .subscribe(this.triggerUpdate.bind(this));
+    });
+  }
+
   /**
    * Override accessor to the current HTMLElement's `display` style
    * Note: Show/Hide will not change the display to 'flex' but will set it to 'block'
@@ -130,11 +138,11 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
    */
   protected getDisplayStyle(): string {
     return (this.hasLayout || (this.hasFlexChild && this.layoutConfig.addFlexToParent)) ?
-      'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true);
+        'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true);
   }
 
   /** Validate the visibility value and then update the host's inline display style */
-  protected updateWithValue(value: boolean|string = true) {
+  protected updateWithValue(value: boolean | string = true) {
     if (value === '') {
       return;
     }
@@ -148,22 +156,22 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
 const DISPLAY_MAP: WeakMap<HTMLElement, string> = new WeakMap();
 
 const inputs = [
-  'fxShow',
+  'fxShow', 'fxShow.print',
   'fxShow.xs', 'fxShow.sm', 'fxShow.md', 'fxShow.lg', 'fxShow.xl',
   'fxShow.lt-sm', 'fxShow.lt-md', 'fxShow.lt-lg', 'fxShow.lt-xl',
   'fxShow.gt-xs', 'fxShow.gt-sm', 'fxShow.gt-md', 'fxShow.gt-lg',
-  'fxHide',
+  'fxHide', 'fxHide.print',
   'fxHide.xs', 'fxHide.sm', 'fxHide.md', 'fxHide.lg', 'fxHide.xl',
   'fxHide.lt-sm', 'fxHide.lt-md', 'fxHide.lt-lg', 'fxHide.lt-xl',
   'fxHide.gt-xs', 'fxHide.gt-sm', 'fxHide.gt-md', 'fxHide.gt-lg'
 ];
 
 const selector = `
-  [fxShow],
+  [fxShow], [fxShow.print],
   [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],
   [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],
   [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],
-  [fxHide],
+  [fxHide], [fxHide.print],
   [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],
   [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],
   [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]
diff --git a/src/lib/extended/show-hide/show.spec.ts b/src/lib/extended/show-hide/show.spec.ts
index f73790239..3b5eefdd6 100644
--- a/src/lib/extended/show-hide/show.spec.ts
+++ b/src/lib/extended/show-hide/show.spec.ts
@@ -16,8 +16,8 @@ import {
   SERVER_TOKEN,
   StyleUtils,
 } from '@angular/flex-layout/core';
-
 import {FlexLayoutModule} from '../../module';
+
 import {customMatchers} from '../../utils/testing/custom-matchers';
 import {
   makeCreateTestComponent,
@@ -54,13 +54,15 @@ describe('show directive', () => {
     TestBed.configureTestingModule({
       imports: [
         CommonModule,
-        FlexLayoutModule,
         MatFormFieldModule,
+        FlexLayoutModule,
         FormsModule,
         MatSelectModule,
         NoopAnimationsModule,
       ],
-      declarations: [TestShowComponent],
+      declarations: [
+        TestShowComponent,
+      ],
       providers: [
         MockMatchMediaProvider,
         {provide: SERVER_TOKEN, useValue: true}
@@ -203,11 +205,32 @@ describe('show directive', () => {
 
   });
 
+  describe('with fxShow.print features', () => {
+
+    it('should support print', () => {
+      createTestComponent(`
+          <div [fxShow]="false" fxShow.print style="display: block;">
+            This content to be shown ONLY when printing
+          </div>
+        `);
+
+      matchMedia.useOverlaps = true;
+      expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
+
+      matchMedia.activate('print');
+      expectNativeEl(fixture).toHaveStyle({'display': 'block'}, styler);
+
+      matchMedia.activate('sm');
+      expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
+    });
+
+  });
+
   describe('with fxHide features', () => {
 
     it('should support hide and show', () => {
       createTestComponent(`
-        <div fxHide fxShow.gt-md>
+        <div fxHide fxShow.gt-md fxShow.print style="display: block;">
           This content to be shown ONLY when gt-sm
         </div>
       `);
@@ -220,6 +243,9 @@ describe('show directive', () => {
 
       matchMedia.activate('sm');
       expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler);
+
+      matchMedia.activate('print');
+      expectNativeEl(fixture).toHaveStyle({'display': 'block'}, styler);
     });
 
     it('should work with responsive and adding flex to parent', () => {
@@ -322,6 +348,9 @@ describe('show directive', () => {
         ]
       });
     });
+    afterEach(() => {
+      matchMedia.clearAll();
+    });
 
     it('should respond to custom breakpoint', () => {
       createTestComponent(`
diff --git a/src/lib/flex/flex/flex.spec.ts b/src/lib/flex/flex/flex.spec.ts
index add4fb647..2568dd413 100644
--- a/src/lib/flex/flex/flex.spec.ts
+++ b/src/lib/flex/flex/flex.spec.ts
@@ -62,6 +62,10 @@ describe('flex directive', () => {
     });
   });
 
+  afterEach(() => {
+    matchMedia.clearAll();
+  });
+
   describe('with static features', () => {
 
     it('should add correct styles for default `fxFlex` usage', () => {
@@ -626,61 +630,71 @@ describe('flex directive', () => {
 
   describe('with responsive features', () => {
 
-    it('should initialize the component with the largest gt-xxx matching breakpoint', () => {
-      componentWithTemplate(`
-        <div  fxFlex='auto'
-              fxFlex.gt-xs='33%'
-              fxFlex.gt-sm='50%' >
-        </div>
-      `);
+    it('should initialize the component with the smallest lt-xxx matching breakpoint', () => {
+       componentWithTemplate(`
+         <div fxFlex="25px"  fxFlex.lt-lg='50%' fxFlex.lt-sm='33%'>
+         </div>
+       `);
 
-      matchMedia.activate('xl', true);
-      fixture.detectChanges();
+       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
-        'max-width': '50%'
+        'flex': '1 1 25px',
+        'max-width': '25px'
       }, styler);
 
-      matchMedia.activate('sm', true);
+
+       matchMedia.activate('xl', true);
+       fixture.detectChanges();
+
+       expectNativeEl(fixture).toHaveStyle({
+         'flex': '1 1 25px',
+         'max-width': '25px'
+       }, styler);
+
+       matchMedia.activate('md', true);
+       fixture.detectChanges();
+
+       expectNativeEl(fixture).toHaveStyle({
+         'flex': '1 1 100%',
+         'max-width': '50%'
+       }, styler);
+
+      matchMedia.activate('xs', true);
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveStyle({
         'flex': '1 1 100%',
         'max-width': '33%'
       }, styler);
-    });
 
-    it('should initialize the component with the smallest lt-xxx matching breakpoint', () => {
+
+     });
+
+
+    it('should initialize the component with the largest gt-xxx matching breakpoint', () => {
       componentWithTemplate(`
-        <div fxFlex="25px" fxFlex.lt-sm='33%' fxFlex.lt-lg='50%' >
+        <div  fxFlex='auto'
+              fxFlex.gt-xs='33%'
+              fxFlex.gt-sm='50%' >
         </div>
       `);
 
       matchMedia.activate('xl', true);
       fixture.detectChanges();
 
-      expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 25px',
-        'max-width': '25px'
-      }, styler);
-
-      matchMedia.activate('md', true);
-      fixture.detectChanges();
-
       expectNativeEl(fixture).toHaveStyle({
         'flex': '1 1 100%',
         'max-width': '50%'
       }, styler);
 
-      matchMedia.activate('xs', true);
+      matchMedia.activate('sm', true);
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveStyle({
         'flex': '1 1 100%',
         'max-width': '33%'
       }, styler);
-
     });
 
     it('should fallback properly to default flex values', () => {
@@ -884,8 +898,6 @@ describe('flex directive', () => {
 
   describe('with flex token enabled', () => {
     beforeEach(() => {
-      jasmine.addMatchers(customMatchers);
-
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
         imports: [
@@ -897,6 +909,10 @@ describe('flex directive', () => {
       });
     });
 
+    afterEach(() => {
+      matchMedia.clearAll();
+    });
+
     it('should work with non-direct-parent fxLayouts', fakeAsync(() => {
       componentWithTemplate(`
         <div fxLayout='column'>
@@ -921,8 +937,6 @@ describe('flex directive', () => {
 
   describe('with prefixes disabled', () => {
     beforeEach(() => {
-      jasmine.addMatchers(customMatchers);
-
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
         imports: [
@@ -962,8 +976,6 @@ describe('flex directive', () => {
   describe('with column basis zero disabled', () => {
     let styleBuilder: FlexStyleBuilder;
     beforeEach(() => {
-      jasmine.addMatchers(customMatchers);
-
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
         imports: [
@@ -996,8 +1008,6 @@ describe('flex directive', () => {
 
   describe('with custom builder', () => {
     beforeEach(() => {
-      jasmine.addMatchers(customMatchers);
-
       // Configure testbed to prepare services
       TestBed.configureTestingModule({
         imports: [
diff --git a/src/lib/grid/grid-align/grid-align.spec.ts b/src/lib/grid/grid-align/grid-align.spec.ts
index db7c08324..21179d9b6 100644
--- a/src/lib/grid/grid-align/grid-align.spec.ts
+++ b/src/lib/grid/grid-align/grid-align.spec.ts
@@ -286,14 +286,14 @@ describe('align directive', () => {
         'justify-self': 'start'
       }, styler);
 
-      matchMedia.activate('md');
+      matchMedia.activate('xs');
       expectNativeEl(fixture).toHaveStyle({
-        'justify-self': 'center'
+        'justify-self': 'start'
       }, styler);
 
-      matchMedia.activate('xs');
+      matchMedia.activate('md');
       expectNativeEl(fixture).toHaveStyle({
-        'justify-self': 'start'
+        'justify-self': 'center'
       }, styler);
 
       // Should fallback to value for 'gt-xs' or default
diff --git a/src/lib/module.ts b/src/lib/module.ts
index 063b3433b..28d33cce0 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -13,10 +13,12 @@ import {
   PLATFORM_ID,
 } from '@angular/core';
 import {isPlatformServer} from '@angular/common';
+
 import {
   SERVER_TOKEN,
   LayoutConfigOptions,
   LAYOUT_CONFIG,
+  DEFAULT_CONFIG,
   BreakPoint,
   BREAKPOINT,
 } from '@angular/flex-layout/core';
@@ -46,11 +48,11 @@ export class FlexLayoutModule {
       ngModule: FlexLayoutModule,
       providers: configOptions.serverLoaded ?
         [
-          {provide: LAYOUT_CONFIG, useValue: configOptions},
+          {provide: LAYOUT_CONFIG, useValue: {...DEFAULT_CONFIG, ...configOptions}},
           {provide: BREAKPOINT, useValue: breakpoints, multi: true},
           {provide: SERVER_TOKEN, useValue: true},
         ] : [
-          {provide: LAYOUT_CONFIG, useValue: configOptions},
+          {provide: LAYOUT_CONFIG, useValue: {...DEFAULT_CONFIG, ...configOptions}},
           {provide: BREAKPOINT, useValue: breakpoints, multi: true},
         ]
     };