diff --git a/public/docs/_examples/cb-item-template/e2e-spec.ts b/public/docs/_examples/cb-item-template/e2e-spec.ts
new file mode 100644
index 0000000000..c9bf7959ae
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/e2e-spec.ts
@@ -0,0 +1,43 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+// FIRST RUN:       gulp run-e2e-tests --filter=cb-item-template
+// SUBSEQUENT RUNS: gulp run-e2e-tests --filter=cb-item-template --fast
+describe('Item template renderer', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should toggle the menu', function () {
+
+    expect(element(by.className('select-items')).isPresent()).toBe(false);
+    element(by.className('select-root')).click();
+    expect(element(by.className('select-items')).isPresent()).toBe(true);
+    element(by.className('select-root')).click();
+    expect(element(by.className('select-items')).isPresent()).toBe(false);
+
+  });
+
+  it('should select last item', function () {
+
+    // Make sure all menu roots start out with Black.
+    element.all(by.className('select-root')).each(
+      function iterator(element) {
+        expect(element.getText()).toContain('Black');
+      }
+    );
+
+    // Select Magenta.
+    element(by.className('select-root')).click();
+    element.all(by.css('ul.select-items li')).last().click();
+
+    // Make sure all menu roots reflect selection (since they are sharing same model).
+    element.all(by.className('select-root')).each(
+      function iterator(element) {
+        expect(element.getText()).toContain('Magenta');
+      }
+    );
+
+  });
+
+});
diff --git a/public/docs/_examples/cb-item-template/ts/app/app.component.ts b/public/docs/_examples/cb-item-template/ts/app/app.component.ts
new file mode 100644
index 0000000000..5783224f9f
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/app/app.component.ts
@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+interface Color {
+  hex: string;
+  name: string;
+}
+
+// #docregion metadata
+@Component({
+  selector: 'my-app',
+  template: `
+    <p>
+      Selected color: {{ selectedColor?.name || "None selected" }}.
+    </p>
+
+    <simple-select [items]="colors" [(value)]="selectedColor">
+      <template let-item="item">
+        <span class="swatch" [style.backgroundColor]="item.hex"></span>
+        <span class="name">{{ item.hex }} &mdash; {{ item.name }}</span>
+      </template>
+    </simple-select>
+
+    <simple-select
+      [items]="colors"
+      [(value)]="selectedColor"
+      [template]="itemTemplateRef">
+    </simple-select>
+
+    <template #itemTemplateRef let-item="item">
+      <span class="name" [style.color]="item.hex">
+        {{ item.hex }} &mdash; {{ item.name }}
+      </span>
+    </template>
+  `
+})
+// #enddocregion metadata
+export class AppComponent {
+  colors: Color[];
+  selectedColor: Color;
+
+  constructor() {
+    this.colors = [
+      { hex: '#000000', name: 'Black' },
+      { hex: '#FFFFFF', name: 'White' },
+      { hex: '#FFD700', name: 'Gold' },
+      { hex: '#7FFFD4', name: 'Aquamarine' },
+      { hex: '#800080', name: 'Purple' },
+      { hex: '#6DC066', name: 'Green' },
+      { hex: '#FF00FF', name: 'Magenta' }
+    ];
+    this.selectedColor = this.colors[0];
+  }
+
+}
diff --git a/public/docs/_examples/cb-item-template/ts/app/app.module.ts b/public/docs/_examples/cb-item-template/ts/app/app.module.ts
new file mode 100644
index 0000000000..07fc8df5cc
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/app/app.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { SimpleSelectComponent } from './simple-select.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent, SimpleSelectComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/cb-item-template/ts/app/main.ts b/public/docs/_examples/cb-item-template/ts/app/main.ts
new file mode 100644
index 0000000000..961a226688
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/app/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-item-template/ts/app/simple-select.component.ts b/public/docs/_examples/cb-item-template/ts/app/simple-select.component.ts
new file mode 100644
index 0000000000..cdb1f8775a
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/app/simple-select.component.ts
@@ -0,0 +1,78 @@
+// #docplaster
+// #docregion
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef
+} from '@angular/core';
+
+interface ItemContext {
+  item: any;
+  index: number;
+}
+
+// #docregion component
+// #docregion metadata
+@Component({
+  selector: 'simple-select',
+  template:
+  `
+    <button (click)="toggleItems()" class="select-root">
+
+      <template
+        [ngTemplateOutlet]="itemTemplateRef"
+        [ngOutletContext]="{ item: value, index: -1 }">
+      </template>
+
+    </button>
+
+    <ul *ngIf="isShowingItems" class="select-items">
+      <li *ngFor="let item of items ; let index = index" (click)="selectItem(item)">
+
+        <template
+          [ngTemplateOutlet]="itemTemplateRef"
+          [ngOutletContext]="{ item: item, index: index }">
+        </template>
+
+      </li>
+    </ul>
+  `
+})
+// #enddocregion metadata
+export class SimpleSelectComponent {
+  isShowingItems = false;
+  itemTemplateRef: TemplateRef<ItemContext>;
+  @Input() items: any[] = [];
+  @Input() value: any;
+  @Output() valueChange = new EventEmitter<any>();
+
+  // #docregion setters
+  @Input()
+  set template(newTemplate: TemplateRef<ItemContext>) {
+    if (newTemplate) {
+      this.itemTemplateRef = newTemplate;
+    }
+  }
+
+  @ContentChild(TemplateRef)
+  set contentChildTemplateRef(newTemplate: TemplateRef<ItemContext>) {
+    if (newTemplate) {
+      this.itemTemplateRef = newTemplate;
+    }
+  }
+  // #enddocregion setters
+
+  selectItem(item: any): void {
+    this.valueChange.emit(item);
+    this.toggleItems();
+  }
+
+  toggleItems(): void {
+    this.isShowingItems = ! this.isShowingItems;
+  }
+
+}
+// #enddocregion component
diff --git a/public/docs/_examples/cb-item-template/ts/example-config.json b/public/docs/_examples/cb-item-template/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-item-template/ts/index.html b/public/docs/_examples/cb-item-template/ts/index.html
new file mode 100644
index 0000000000..62716dfd7e
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>
+    Providing An Item Template To A Component
+  </title>
+
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <link rel="stylesheet" type="text/css" href="sample.css">
+
+  <!-- Polyfill(s) for older browsers -->
+  <script src="node_modules/core-js/client/shim.min.js"></script>
+
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/reflect-metadata/Reflect.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <script src="systemjs.config.js"></script>
+  <script>
+    System.import('app')
+      .catch(function(err){ console.error(err); });
+  </script>
+</head>
+<body>
+
+  <h1>
+    Providing An Item Template To A Component
+  </h1>
+
+  <my-app>
+    Loading app...
+  </my-app>
+
+</body>
+</html>
diff --git a/public/docs/_examples/cb-item-template/ts/plnkr.json b/public/docs/_examples/cb-item-template/ts/plnkr.json
new file mode 100644
index 0000000000..0131610c20
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+	"description": "Set The Document Title In Angular 2",
+	"files": [
+		"!**/*.d.ts",  
+		"!**/*.js",
+		"!**/*.[1].*"
+	],
+	"tags": [ "cookbook" ]
+}
diff --git a/public/docs/_examples/cb-item-template/ts/sample.css b/public/docs/_examples/cb-item-template/ts/sample.css
new file mode 100644
index 0000000000..927345d292
--- /dev/null
+++ b/public/docs/_examples/cb-item-template/ts/sample.css
@@ -0,0 +1,65 @@
+a {
+	color: #607D8B ;
+	text-decoration: underline ;
+}
+
+simple-select {
+	cursor: pointer ;
+	display: 'inline-block' ;
+	font-size: 16px ;
+	position: relative ;
+	user-select: none ;
+		-moz-user-select: none ;
+		-webkit-user-select: none ;
+}
+
+simple-select button.select-root {
+	background-color: #FFFFFF ;
+	border: 1px solid #CCCCCC ;
+	border-radius: 3px 3px 3px 3px ;
+	color: #333333 ;
+	font-size: inherit ;
+	padding: 7px 10px 7px 10px ;
+	position: relative ;
+}
+
+simple-select ul.select-items {
+	background-color: #FFFFFF ;
+	border: 1px solid #CCCCCC ;
+	border-radius: 3px 3px 3px 3px ;
+	left: 0px ;
+	list-style-type: none ;
+	margin: 0px 0px 0px 0px ;
+	padding: 0px 0px 0px 0px ;
+	position: absolute ;
+	top: 102% ;
+	white-space: nowrap ;
+	z-index: 2 ;
+}
+
+simple-select ul.select-items li {
+	border-top: 1px solid #CCCCCC ;
+	margin: 0px 0px 0px 0px ;
+	padding: 7px 10px 7px 10px ;
+	position: relative ;
+}
+
+simple-select ul.select-items li:first-child {
+	border-top-width: 0px ;
+}
+
+/* Custom template styles. */
+
+simple-select {
+	display: table ;
+	margin: 16px 0px 16px 0px ;
+}
+
+simple-select span.swatch {
+	border: 1px solid #CCCCCC ;
+	border-radius: 3px 3px 3px 3px ;
+	display: inline-block ;
+	height: 13px ;
+	margin: 2px 5px 0px 0px ;
+	width: 13px ;
+}
\ No newline at end of file
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index f82d816cef..e8ac3da01b 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -43,6 +43,11 @@
     "intro": "Render dynamic forms with FormGroup"
   },
 
+    "item-template": {
+    "title": "Item Template",
+    "intro": "Providing a component with an item template for dynamic rendering."
+  },
+
   "rc4-to-rc5": {
     "title": "RC4 to RC5 Migration",
     "intro": "Migrate your RC4 app to RC5 in minutes."
diff --git a/public/docs/ts/latest/cookbook/item-template.jade b/public/docs/ts/latest/cookbook/item-template.jade
new file mode 100644
index 0000000000..499002d43b
--- /dev/null
+++ b/public/docs/ts/latest/cookbook/item-template.jade
@@ -0,0 +1,98 @@
+include ../_util-fns
+
+a( id='top' )
+:marked
+  If a component needs to render a collection of items, we can keep the component generic
+  by providing the component with a `TemplateRef` that the component can use to render 
+  the individual items. This way, the component's scope of responsibility is limited 
+  while its reusability is enhanced. The `TemplateRef` can be explicitly injected into 
+  the component as an input property; or, the `TemplateRef` can be implicitly provided as
+  part of the component's content.
+
+:marked
+  To explore this concept, we'll create a simple Select menu component that takes an 
+  `items` input collection and uses an externally-provided `TemplateRef` to render each
+  item in the menu options list. Then, we'll instantiate the Select menu component twice 
+  in order to demonstrate the various ways in which we can provide the `TemplateRef`.
+
+:marked
+  In the following root-component meta-data, each Select menu (selector: `simple-select`)
+  is rendering the same collection of color `items`; and, each select menu is binding to 
+  the same `value`. The only difference between the two instances is in how the 
+  `TemplateRef` is being defined:
+
+:marked
+  **See the [live example](/resources/live-examples/cb-item-template/ts/plnkr.html)**.
+
++makeExample('cb-item-template/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (metadata)')(format='.')
+
+:marked
+  In the first `<simple-select>`, the `TemplateRef` is being defined as a child of the 
+  `<simple-select>` element. In the second `<simple-select>`, the `TemplateRef` is being 
+  defined as a sibling element and is then being passed-in as the `[template]` property.
+
+.l-sub-section
+  :marked
+    There's no requirement that a component must accept a `TemplateRef` from multiple 
+    sources. It does make the component more flexible; but, we're only doing it for 
+    demonstrative purposes in this cookbook.
+    
+:marked
+  Since the component is capable of accepting a `TemplateRef` by two different means, 
+  we're going to define two setter methods &mdash; one for the `[template]` input and one
+  for the content query &mdash; that coalesce the two sources into a single `TemplateRef`
+  property.
+
++makeExample('cb-item-template/ts/app/simple-select.component.ts', 'setters', 'app/simple-select.component.ts (TemplateRef setters')(format='.')
+
+:marked
+  Once the two `TemplateRef` sources have been coalesced into a single `itemTemplateRef`
+  property, we can then use it to render both the menu items and the menu root.
+
++makeExample('cb-item-template/ts/app/simple-select.component.ts', 'metadata', 'app/simple-select.component.ts (metadata')(format='.')
+
+:marked
+  When we use the `<template>` directive to render our externally-provided `TemplateRef`,
+  we supply both the `[ngTemplateOutlet]` and the `[ngOutletContext]` property. The 
+  former is the template reference; the latter is the collection of local variables that
+  can be accessed in the calling context. For example, since our "context" object 
+  includes a property named `item`, our root component can access this property in its 
+  `<template>` element via `let`:
+
+code-example(format='')
+ &lt;template let-item='item'&gt; ... &lt;/template&gt;
+
+:marked
+  Bringing it all together, we now have a component that can accept an externally-
+  provided `TemplateRef` and use it to render multiple aspects of its own internal
+  component template.
+
+figure.image-display
+   img(src='/resources/images/cookbooks/item-template/item-template-animation.gif' alt='Item Template')
+
+:marked
+  The complete code:
+
++makeTabs( 
+  `
+    cb-item-template/ts/app/main.ts,
+    cb-item-template/ts/app/app.component.ts,
+    cb-item-template/ts/app/simple-select.component.ts
+  `, 
+  '',
+  `
+    app/main.ts,
+    app/app.component.ts,
+    app/simple-select.component.ts
+  `
+)
+
+.l-sub-section
+  :marked
+    **Did you know:** The `ngFor` directive can accept an externally-provided 
+    `TemplateRef` which can be used to render the items in the `[ngForOf]` collection:
+
+    `<template ngFor ... [ngForTemplate]='yourTemplateRef'></template>`
+
+:marked
+  [Back to top](#top)
diff --git a/public/resources/images/cookbooks/item-template/item-template-animation.gif b/public/resources/images/cookbooks/item-template/item-template-animation.gif
new file mode 100644
index 0000000000..ae79c7a325
Binary files /dev/null and b/public/resources/images/cookbooks/item-template/item-template-animation.gif differ