diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html
index fb1893dcb1f..96a44ba313f 100644
--- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html
+++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html
@@ -3,9 +3,9 @@
     #drawer
     class="sidenav"
     fixedInViewport="true"
-    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-    [mode]="(isHandset$ | async) ? 'over' : 'side'"
-    [opened]="!(isHandset$ | async)">
+    [attr.role]="isHandset ? 'dialog' : 'navigation'"
+    [mode]="isHandset ? 'over' : 'side'"
+    [opened]="!isHandset">
     <mat-toolbar>Menu</mat-toolbar>
     <mat-nav-list>
       <a mat-list-item href="#">Link 1</a>
@@ -20,7 +20,7 @@
         aria-label="Toggle sidenav"
         mat-icon-button
         (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async">
+        *ngIf="isHandset">
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
       <span><%= project %></span>
diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts
index 6921eceb6b0..d724892f0b2 100644
--- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts
+++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts
@@ -1,7 +1,7 @@
-import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+import { Component, OnDestroy<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -16,13 +16,25 @@ import { map } from 'rxjs/operators';
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
-export class <%= classify(name) %>Component {
+export class <%= classify(name) %>Component implements OnDestroy {
 
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-    .pipe(
-      map(result => result.matches)
-    );
+  isHandset: boolean;
 
-  constructor(private breakpointObserver: BreakpointObserver) {}
+  /** Emits when the component is destroyed. */
+  private readonly _destroyed = new Subject<void>();
+
+  constructor(breakpointObserver: BreakpointObserver) {
+    breakpointObserver.observe(Breakpoints.Handset)
+      .pipe(
+        takeUntil(this._destroyed)
+      ).subscribe(result => {
+        this.isHandset = result.matches;
+      });
+  }
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
 
 }