diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
index 5862beeebf..bc67bac8f0 100644
--- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node
+'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
@@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
});
it('should display the basic component example', function () {
- testTag('hero-view', 'Hero: Windstorm');
+ testTag('hero-view', 'Hero Detail: Windstorm');
});
it('should display the component example with lifecycle methods', function () {
@@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
it('should support component with inputs and outputs', function () {
let app = element(by.css('hero-io'));
- let confirmComponent = app.element(by.css('my-confirm'));
+ let confirmComponent = app.element(by.css('app-confirm'));
confirmComponent.element(by.buttonText('OK')).click();
expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
});
it('should support host bindings and host listeners', function() {
- let app = element(by.css('heroes-bindings'));
+ let app = element(by.css('hero-host'));
let h1 = app.element(by.css('h1'));
expect(app.getAttribute('class')).toBe('heading');
- expect(app.getAttribute('title')).toBe('Tooltip content');
+ expect(app.getAttribute('title')).toContain('Tooltip');
h1.click();
expect(h1.getAttribute('class')).toBe('active');
@@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
});
it('should support content and view queries', function() {
- let app = element(by.css('heroes-queries'));
- let windstorm = app.element(by.css('a-hero:first-child'));
+ let app = element(by.css('hero-queries'));
+ let windstorm = app.element(by.css('view-child:first-child'));
- app.element(by.buttonText('Activate')).click();
+ app.element(by.css('button')).click();
expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
- expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+ expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
});
function testTag(selector: string, expectedText: string) {
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
new file mode 100644
index 0000000000..e5f158dbed
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'my-app',
+ templateUrl: 'app.component.html',
+ styles: [
+ // See hero-di-inject-additional.component
+ 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+ '.heading {font-style: italic}'
+ ]
+})
+export class AppComponent {
+ title = 'ES6 JavaScript with Decorators';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
@@ -0,0 +1,31 @@
+
+{{title}}
+Classes and Class Metadata
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+
+
+
+
+
+
+
+
+
+
+
+Dependency Injection
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
new file mode 100644
index 0000000000..bea55777ef
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent,
+ ConfirmComponent,
+ HeroComponent,
+ HeroDIComponent,
+ HeroDIInjectComponent,
+ HeroDIInjectAdditionalComponent,
+ HeroHostComponent, HeroHostMetaComponent,
+ HeroIOComponent,
+ HeroLifecycleComponent,
+ HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+ HeroTitleComponent
+ ],
+ providers: [
+ DataService,
+ { provide: 'heroName', useValue: 'Windstorm' }
+ ],
+ bootstrap: [ AppComponent ],
+
+ // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+ LocationStrategy,
+ HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+ moduleId: module.id,
+ selector: 'app-confirm',
+ templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+ @Input() okMsg = '';
+ @Input('cancelMsg') notOkMsg = '';
+ @Output() ok = new EventEmitter();
+ @Output('cancel') notOk = new EventEmitter();
+
+ onOkClick() {
+ this.ok.emit(true);
+ }
+ onNotOkClick() {
+ this.notOk.emit(true);
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
index 7e9c7456c6..cd7f9e1aae 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
- constructor() {
- }
+ constructor() { }
+
getHeroName() {
return 'Windstorm';
}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
index 83e3dab59f..ec460a9dbc 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
@@ -1,49 +1,7 @@
-import {
- Attribute,
- Component,
- Inject,
- Optional,
- NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-// #docregion metadata
-@Component({
- moduleId: module.id,
- selector: 'hero-title',
- templateUrl: 'title.component.html'
-})
-// #enddocregion metadata
-class TitleComponent {
- msg = '';
- constructor(
- @Inject('titlePrefix') @Optional() titlePrefix,
- @Attribute('title') title
- ) {
- this.titlePrefix = titlePrefix;
- this.title = title;
- }
-
- ok() {
- this.msg = 'OK!';
- }
-}
-// #enddocregion
+import { Component } from '@angular/core';
@Component({
selector: 'hero-di-inject-additional',
- template: `
- `
+ template: ``
})
-class AppComponent { }
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [
- AppComponent,
- TitleComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class HeroesDIInjectAdditionalModule { }
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
index 3a89867051..94b42f956a 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
@@ -1,22 +1,13 @@
-import { Component, Inject, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, Inject } from '@angular/core';
// #docregion
@Component({
selector: 'hero-di-inject',
template: `Hero: {{name}}
`
})
-class HeroComponent {
+export class HeroComponent {
constructor(@Inject('heroName') name) {
this.name = name;
}
}
// #enddocregion
-
-@NgModule({
- imports: [ BrowserModule ],
- providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
-})
-export class HeroesDIInjectModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
index e8341509a0..0cc78d277e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -1,6 +1,4 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+import { Component } from '@angular/core';
import { DataService } from './data.service';
// #docregion
@@ -8,19 +6,10 @@ import { DataService } from './data.service';
selector: 'hero-di',
template: `Hero: {{name}}
`
})
-
-class HeroComponent {
- name;
+export class HeroComponent {
+ name = '';
constructor(dataService: DataService) {
this.name = dataService.getHeroName();
}
}
// #enddocregion
-
-@NgModule({
- imports: [ BrowserModule ],
- providers: [ DataService ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
-})
-export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
new file mode 100644
index 0000000000..25dbe1c21a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-host-meta',
+ template: `
+ Hero Host in Metadata
+ Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+
+ // HostListeners on the entire element
+ '(click)': 'clicked()',
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+ title = 'Hero Host in Metadata Tooltip';
+ headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ clicked() {
+ this.clicks += 1;
+ }
+
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-host',
+ template: `
+ Hero Host in Decorators
+ Heading clicks: {{clicks}}
+ `,
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+ // HostBindings to the element
+ @HostBinding() title = 'Hero Host in Decorators Tooltip';
+ @HostBinding('class.heading') headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ // HostListeners on the entire element
+ @HostListener('click')
+ clicked() {
+ this.clicks += 1;
+ }
+
+ @HostListener('mouseenter', ['$event'])
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ @HostListener('mouseleave', ['$event'])
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
index dddbb34733..4b36411e78 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
@@ -1,67 +1,26 @@
-import {
- Component,
- EventEmitter,
- Input,
- Output,
- NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
- moduleId: module.id,
- selector: 'my-confirm',
- templateUrl: 'confirm.component.html'
-})
-class ConfirmComponent {
- @Input() okMsg;
- @Input('cancelMsg') notOkMsg;
- @Output() ok =
- new EventEmitter();
- @Output('cancel') notOk =
- new EventEmitter();
-
- onOkClick() {
- this.ok.next(true);
- }
- onNotOkClick() {
- this.notOk.next(true);
- }
-}
-// #enddocregion
-
+import { Component } from '@angular/core';
@Component({
selector: 'hero-io',
template: `
-
-
+
+
OK clicked
Cancel clicked
`
})
-class AppComponent {
- okClicked;
- cancelClicked;
+export class HeroIOComponent {
+ okClicked = false;
+ cancelClicked = false;
onOk() {
this.okClicked = true;
}
+
onCancel() {
this.cancelClicked = true;
}
}
-
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [
- AppComponent,
- ConfirmComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class HeroesIOModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
index 6a935731b5..2539266597 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
@@ -1,27 +1,14 @@
-// #docplaster
// #docregion
-import { Component, OnInit } from '@angular/core';
-// #enddocregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component } from '@angular/core';
@Component({
selector: 'hero-lifecycle',
template: `Hero: {{name}}
`
})
-// #docregion
-class HeroComponent{
- name;
+export class HeroComponent {
+ name = '';
ngOnInit() {
- this.name = 'Windstorm';
+ // todo: fetch from server async
+ setTimeout(() => this.name = 'Windstorm', 0);
}
}
-// #enddocregion
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
-})
-export class HeroesLifecycleModule { }
-
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
new file mode 100644
index 0000000000..fced43d4d7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
@@ -0,0 +1,81 @@
+import {
+ Component,
+ ContentChild,
+ Input,
+ QueryList,
+ ViewChildren
+} from '@angular/core';
+
+@Component({
+ selector: 'content-child',
+ template: `
+
+ Active
+ `
+})
+export class ContentChildComponent {
+ active = false;
+
+ activate() {
+ this.active = true;
+ }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+ selector: 'view-child',
+ template: `
+
+ {{hero.name}}
+
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+ @Input() hero;
+ active = false;
+
+ @ContentChild(ContentChildComponent) content;
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+ selector: 'hero-queries',
+ template: `
+
+
+
+
+ `
+})
+export class HeroQueriesComponent {
+ active = false;
+ heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+
+ @ViewChildren(ViewChildComponent) views;
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
new file mode 100644
index 0000000000..25460d34f7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
@@ -0,0 +1,26 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+ moduleId: module.id,
+ selector: 'hero-title',
+ templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+ msg = '';
+ constructor(
+ @Inject('titlePrefix') @Optional() titlePrefix,
+ @Attribute('title') title
+ ) {
+ this.titlePrefix = titlePrefix;
+ this.title = title;
+ }
+
+ ok() {
+ this.msg = 'OK!';
+ }
+}
+// #enddocregion
+
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
similarity index 100%
rename from public/docs/_examples/cb-ts-to-js/ts/app/title.component.html
rename to public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
index 83dc6d409d..4ea4c11611 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -1,4 +1,3 @@
-// #docplaster
// #docregion metadata
import { Component } from '@angular/core';
@@ -6,24 +5,10 @@ import { Component } from '@angular/core';
selector: 'hero-view',
template: '{{title}}: {{getName()}}
'
})
-// #docregion appexport
-// #docregion class
+// #docregion appexport, class
export class HeroComponent {
title = 'Hero Detail';
getName() {return 'Windstorm'; }
}
-// #enddocregion class
-// #enddocregion appexport
+// #enddocregion appexport, class
// #enddocregion metadata
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
-})
-export class HeroesModule { }
-
-
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
deleted file mode 100644
index ef959eabbb..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
- Component,
- HostBinding,
- HostListener,
- NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
- selector: 'heroes-bindings',
- template: `
-
- Tour of Heroes
-
- `
-})
-class HeroesComponent {
- @HostBinding() title = 'Tooltip content';
- @HostBinding('class.heading') hClass = true;
- active;
-
- constructor() {}
-
- @HostListener('click')
- clicked() {
- this.active = !this.active;
- }
-
- @HostListener('dblclick', ['$event'])
- doubleClicked(evt) {
- this.active = true;
- }
-}
-// #enddocregion
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ HeroesComponent ],
- bootstrap: [ HeroesComponent ]
-})
-export class HeroesHostBindingsModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
deleted file mode 100644
index bc55ccef24..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
- Component,
- ViewChildren,
- ContentChild,
- QueryList,
- Input,
- NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@Component({
- selector: 'active-label',
- template: `
- Active
- `
-})
-class ActiveLabelComponent {
- active;
-
- activate() {
- this.active = true;
- }
-}
-
-// #docregion content
-@Component({
- selector: 'a-hero',
- template: `
- {{hero.name}}
-
-
`
-})
-class HeroComponent {
- @Input() hero;
- active;
-
- @ContentChild(ActiveLabelComponent)
- label;
-
- activate() {
- this.active = true;
- this.label.activate();
- }
-}
-// #enddocregion content
-
-
-// #docregion view
-@Component({
- selector: 'heroes-queries',
- template: `
-
-
-
-
- `
-})
-class HeroesQueriesComponent {
- heroData = [
- {id: 1, name: 'Windstorm'},
- {id: 2, name: 'Superman'}
- ];
-
- @ViewChildren(HeroComponent)
- heroCmps;
-
- activate() {
- this.heroCmps.forEach(
- (cmp) => cmp.activate()
- );
- }
-}
-// #enddocregion view
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [
- HeroesQueriesComponent,
- HeroComponent,
- ActiveLabelComponent
- ],
- bootstrap: [ HeroesQueriesComponent ]
-})
-export class HeroesQueriesModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
index 92f5af5e1a..2470c9595e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
@@ -1,30 +1,4 @@
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
- LocationStrategy,
- HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
+import { AppModule } from './app.module';
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-
-import { HeroesModule } from './hero.component';
-import { HeroesLifecycleModule } from './hero-lifecycle.component';
-import { HeroesDIModule } from './hero-di.component';
-import { HeroesDIInjectModule } from './hero-di-inject.component';
-import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
-import { HeroesIOModule } from './hero-io.component';
-import { HeroesHostBindingsModule } from './heroes-bindings.component';
-import { HeroesQueriesModule } from './heroes-queries.component';
-
-platformBrowserDynamic().bootstrapModule(HeroesModule);
-platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
-platformBrowserDynamic().bootstrapModule(HeroesIOModule);
-platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
-platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
index 005fe67c31..1b9e3b5211 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
@@ -5,6 +5,7 @@
+ TypeScript to JavaScript
@@ -20,32 +21,7 @@
-
- TypeScript to JavaScript
- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
-
-
-
- Loading hero-view...
- Loading hero-lifecycle...
-
-
-
- Loading hero-io...
-
-
- Dependency Injection
- Loading hero-di...
- Loading hero-di-inject...
- Loading hero-di-inject-additional...
-
-
-
- Loading heroes-bindings...
- Loading heroes-queries...
+ Loading...