docs(cookbook - item template) Cookbook for a component item template.

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');
+      }
+    );
+
+  });
+
+});

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];
+  }
+
+}

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 {}

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);

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

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>

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" ]
+}

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 ;
+}

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."