Jesus' edits

Author: Foxandxss

public/docs/_examples/cb-item-template/ts/app/app.component.ts

@@ -1,7 +1,6 @@
 // #docplaster
 // #docregion
 import { Component } from '@angular/core';
-import { SimpleSelectComponent } from './simple-select.component';
 
 interface Color {
   hex: string;
@@ -11,9 +10,7 @@ interface Color {
 // #docregion metadata
 @Component({
   selector: 'my-app',
-  directives: [ SimpleSelectComponent ],
-  template:
-  `
+  template: `
     <p>
       Selected color: {{ selectedColor?.name || "None selected" }}.
     </p>
@@ -25,13 +22,13 @@ interface Color {
       </template>
     </simple-select>
 
-    <simple-select 
+    <simple-select
       [items]="colors"
       [(value)]="selectedColor"
-      [template]="externalTemplate">
+      [template]="itemTemplateRef">
     </simple-select>
 
-    <template #externalTemplate let-item="item">
+    <template #itemTemplateRef let-item="item">
       <span class="name" [style.color]="item.hex">
         {{ item.hex }} &mdash; {{ item.name }}
       </span>
@@ -40,11 +37,10 @@ interface Color {
 })
 // #enddocregion metadata
 export class AppComponent {
+  colors: Color[];
+  selectedColor: Color;
 
-  public colors: Color[];
-  public selectedColor: Color;
-
-  public constructor() {
+  constructor() {
     this.colors = [
       { hex: '#000000', name: 'Black' },
       { hex: '#FFFFFF', name: 'White' },
@@ -54,7 +50,7 @@ export class AppComponent {
       { hex: '#6DC066', name: 'Green' },
       { hex: '#FF00FF', name: 'Magenta' }
     ];
-    this.selectedColor = this.colors[ 0 ];
+    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

@@ -1,13 +1,6 @@
-/* tslint:disable */
 // #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
-bootstrap(AppComponent).then(
-  () => window.console.info('Angular finished bootstrapping your application!'),
-  (error) => {
-    console.warn('Angular was not able to bootstrap your application.');
-    console.error(error);
-  }
-);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-item-template/ts/app/simple-select.component.ts

@@ -21,18 +21,18 @@ interface ItemContext {
   template:
   `
     <button (click)="toggleItems()" class="select-root">
-      
-      <template 
+
+      <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 
+      <li *ngFor="let item of items ; let index = index" (click)="selectItem(item)">
+
+        <template
           [ngTemplateOutlet]="itemTemplateRef"
           [ngOutletContext]="{ item: item, index: index }">
         </template>
@@ -43,20 +43,11 @@ interface ItemContext {
 })
 // #enddocregion metadata
 export class SimpleSelectComponent {
-
-  public isShowingItems: boolean;
-  @Input() public items: any[];
-  public itemTemplateRef: TemplateRef<ItemContext>;
-  @Input() public value: any;
-  @Output() public valueChange: EventEmitter<any>;
-
-  constructor() {
-    this.isShowingItems = false;
-    this.items = [];
-    this.itemTemplateRef = null;
-    this.value = null;
-    this.valueChange = new EventEmitter();
-  }
+  isShowingItems = false;
+  itemTemplateRef: TemplateRef<ItemContext>;
+  @Input() items: any[] = [];
+  @Input() value: any;
+  @Output() valueChange = new EventEmitter<any>();
 
   // #docregion setters
   @Input()
@@ -74,12 +65,12 @@ export class SimpleSelectComponent {
   }
   // #enddocregion setters
 
-  public selectItem(item: any) {
+  selectItem(item: any): void {
     this.valueChange.emit(item);
     this.toggleItems();
   }
 
-  public toggleItems() {
+  toggleItems(): void {
     this.isShowingItems = ! this.isShowingItems;
   }
 

public/docs/_examples/cb-item-template/ts/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  
+
   <title>
     Providing An Item Template To A Component
   </title>
@@ -21,7 +21,6 @@
   <script src="systemjs.config.js"></script>
   <script>
     System.import('app')
-      .then(function()    { console.info('System.js loaded your application module.')})
       .catch(function(err){ console.error(err); });
   </script>
 </head>

public/docs/ts/latest/cookbook/_data.json

@@ -43,16 +43,16 @@
     "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."
   },
 
-  "item-template": {
-    "title": "Item Template",
-    "intro": "Providing a component with an item template for dynamic rendering."
-  },
-
   "set-document-title": {
     "title": "Set the Document Title",
     "intro": "Setting the document or window title using the Title service."