diff --git a/src/lib/core/a11y/focus-trap.html b/src/lib/core/a11y/focus-trap.html
new file mode 100644
index 000000000000..577b68bfa8d1
--- /dev/null
+++ b/src/lib/core/a11y/focus-trap.html
@@ -0,0 +1,3 @@
+<div tabindex="0" (focus)="focusLastTabbableElement()"></div>
+<div #trappedContent><ng-content></ng-content></div>
+<div tabindex="0" (focus)="focusFirstTabbableElement()"></div>
diff --git a/src/lib/core/a11y/focus-trap.ts b/src/lib/core/a11y/focus-trap.ts
index abde73f89760..56368bb41e8d 100644
--- a/src/lib/core/a11y/focus-trap.ts
+++ b/src/lib/core/a11y/focus-trap.ts
@@ -13,11 +13,7 @@ import {InteractivityChecker} from './interactivity-checker';
 @Component({
   moduleId: module.id,
   selector: 'focus-trap',
-  // TODO(jelbourn): move this to a separate file.
-  template: `
-  <div tabindex="0" (focus)="focusLastTabbableElement()"></div>
-  <div #trappedContent><ng-content></ng-content></div>
-  <div tabindex="0" (focus)="focusFirstTabbableElement()"></div>`,
+  templateUrl: 'focus-trap.html',
   encapsulation: ViewEncapsulation.None,
 })
 export class FocusTrap {