build: Add GitHub scripts for rebasing PRs (#18359)

PR Close #18359

.circleci/config.yml

@@ -41,7 +41,7 @@ jobs:
       - restore_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
-      - run: bazel run @io_bazel_rules_typescript_node//:bin/npm install
+      - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
       - run: bazel build ...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}

.pullapprove.yml

@@ -256,6 +256,8 @@ groups:
       files:
         include:
           - "aio/*"
+        exclude:
+          - "aio/content/*"
     users:
       - petebacondarwin #primary
       - IgorMinar
@@ -276,6 +278,8 @@ groups:
       - Foxandxss
       - stephenfluin
       - wardbell
+      - petebacondarwin
+      - gkalpak
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -289,5 +293,7 @@ groups:
     users:
       - juleskremer #primary
       - stephenfluin
+      - petebacondarwin
+      - gkalpak
       - IgorMinar #fallback
       - mhevery #fallback

.travis.yml

@@ -1,9 +1,12 @@
 language: node_js
 sudo: false
+# force trusty as Google Chrome addon is not supported on Precise
+dist: trusty
 node_js:
   - '6.9.5'
 
 addons:
+  chrome: stable
 #  firefox: "38.0"
   apt:
     sources:
@@ -50,16 +53,17 @@ env:
     - CI_MODE=browserstack_required
     - CI_MODE=saucelabs_optional
     - CI_MODE=browserstack_optional
-    - CI_MODE=docs_test
+    - CI_MODE=aio_tools_test
     - CI_MODE=aio
-    - CI_MODE=aio_e2e
+    - CI_MODE=aio_e2e AIO_SHARD=0
+    - CI_MODE=aio_e2e AIO_SHARD=1
+    - CI_MODE=bazel
 
 matrix:
   fast_finish: true
   allow_failures:
     - env: "CI_MODE=saucelabs_optional"
     - env: "CI_MODE=browserstack_optional"
-    - env: "CI_MODE=aio_e2e"
 
 before_install:
   # source the env.sh script so that the exported variables are available to other scripts later on

BUILD.bazel

@@ -11,8 +11,15 @@ filegroup(
         # This won't scale in the general case.
         # TODO(alexeagle): figure out what to do
         "node_modules/typescript/**",
-        "node_modules/zone.js/**/*.d.ts",
+        "node_modules/zone.js/**",
         "node_modules/rxjs/**/*.d.ts",
+        "node_modules/rxjs/**/*.js",
         "node_modules/@types/**/*.d.ts",
+        "node_modules/tsickle/**",
+        "node_modules/hammerjs/**/*.d.ts",
+        "node_modules/protobufjs/**",
+        "node_modules/bytebuffer/**",
+        "node_modules/reflect-metadata/**",
+        "node_modules/minimist/**/*.js",
     ]),
 )

CHANGELOG.md

@@ -1,3 +1,98 @@
+<a name="4.3.6"></a>
+## [4.3.6](https://github.com/angular/angular/compare/4.3.5...4.3.6) (2017-08-23)
+
+
+### Bug Fixes
+
+* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([5d68c83](https://github.com/angular/angular/commit/5d68c83))
+* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([c3dcbf9](https://github.com/angular/angular/commit/c3dcbf9))
+* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([9a754f9](https://github.com/angular/angular/commit/9a754f9)), closes [#17450](https://github.com/angular/angular/issues/17450)
+* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([f9b2905](https://github.com/angular/angular/commit/f9b2905)), closes [#18635](https://github.com/angular/angular/issues/18635)
+* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([e1f45a3](https://github.com/angular/angular/commit/e1f45a3))
+* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([fec3b1a](https://github.com/angular/angular/commit/fec3b1a)), closes [#16568](https://github.com/angular/angular/issues/16568)
+* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([ee5591d](https://github.com/angular/angular/commit/ee5591d))
+
+
+### Features
+
+* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([ac58914](https://github.com/angular/angular/commit/ac58914))
+* **common:** add an empty DeprecatedI18NPipesModule module ([793f31b](https://github.com/angular/angular/commit/793f31b))
+
+
+
+<a name="4.3.5"></a>
+## [4.3.5](https://github.com/angular/angular/compare/4.3.4...4.3.5) (2017-08-16)
+
+
+### Bug Fixes
+
+* **aio:** skip PWA test when redeploying non-public commit ([b9c1c91](https://github.com/angular/angular/commit/b9c1c91))
+* **core:** forbid destroyed views to be inserted or moved in VC ([972538b](https://github.com/angular/angular/commit/972538b)), closes [#18615](https://github.com/angular/angular/issues/18615)
+* **forms:** re-assigning options should not clear select ([a1624f2](https://github.com/angular/angular/commit/a1624f2)), closes [#18330](https://github.com/angular/angular/issues/18330)
+
+
+### Performance Improvements
+
+* **aio:** update to new version of build-optimizer ([d7be4f1](https://github.com/angular/angular/commit/d7be4f1))
+
+
+
+<a name="4.3.4"></a>
+## [4.3.4](https://github.com/angular/angular/compare/4.3.3...4.3.4) (2017-08-10)
+
+### Bug Fixes
+
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([5a165eb](https://github.com/angular/angular/commit/5a165eb))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([e0660b1](https://github.com/angular/angular/commit/e0660b1)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([5afc7ab](https://github.com/angular/angular/commit/5afc7ab))
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([5e4054b](https://github.com/angular/angular/commit/5e4054b))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([e7e7622](https://github.com/angular/angular/commit/e7e7622)), closes [#18038](https://github.com/angular/angular/issues/18038)
+
+<a name="4.3.3"></a>
+## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
+
+### Bug Fixes
+
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+<a name="4.3.2"></a>
+## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)
+
+
+### Bug Fixes
+
+* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([cbeb197](https://github.com/angular/angular/commit/cbeb197))
+* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([a084619](https://github.com/angular/angular/commit/a084619)), closes [#17344](https://github.com/angular/angular/issues/17344)
+* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a8ac77b](https://github.com/angular/angular/commit/a8ac77b)), closes [#17799](https://github.com/angular/angular/issues/17799)
+* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([a1bb9c2](https://github.com/angular/angular/commit/a1bb9c2)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
+* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([97135e8](https://github.com/angular/angular/commit/97135e8)), closes [#17050](https://github.com/angular/angular/issues/17050)
+* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([b9e32c8](https://github.com/angular/angular/commit/b9e32c8)), closes [#15670](https://github.com/angular/angular/issues/15670)
+* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([be49e0e](https://github.com/angular/angular/commit/be49e0e)), closes [#14596](https://github.com/angular/angular/issues/14596)
+* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([1f106d7](https://github.com/angular/angular/commit/1f106d7))
+
+
+
+<a name="4.3.1"></a>
+## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
+
+
+### Bug Fixes
+
+* **animations:** always camelcase style property names that contain auto styles ([383d896](https://github.com/angular/angular/commit/383d896)), closes [#17938](https://github.com/angular/angular/issues/17938)
+* **animations:** capture cancelled animation styles within grouped animations ([333ffd8](https://github.com/angular/angular/commit/333ffd8)), closes [#17170](https://github.com/angular/angular/issues/17170)
+* **animations:** do not crash animations if a nested component fires CD during CD ([4c1f32b](https://github.com/angular/angular/commit/4c1f32b)), closes [#18193](https://github.com/angular/angular/issues/18193)
+* **animations:** make sure @.disabled works in non-animation components ([a5c4bb5](https://github.com/angular/angular/commit/a5c4bb5))
+* **common:** send flushed body as error instead of null ([17b7bc3](https://github.com/angular/angular/commit/17b7bc3)), closes [#18181](https://github.com/angular/angular/issues/18181)
+* **compiler:** ensure jit external id arguments names are unique ([4671168](https://github.com/angular/angular/commit/4671168))
+* **compiler-cli:** don't generate empty `<target/>` when extracting xliff ([f0476fc](https://github.com/angular/angular/commit/f0476fc)), closes [#15754](https://github.com/angular/angular/issues/15754)
+* **platform-server:** provide XhrFactory for HttpClient ([4ce29f3](https://github.com/angular/angular/commit/4ce29f3))
+* **router:** canDeactivate guards should run from bottom to top ([1ac78bf](https://github.com/angular/angular/commit/1ac78bf)), closes [#15657](https://github.com/angular/angular/issues/15657)
+* **router:** should navigate to the same url when config changes ([4340bea](https://github.com/angular/angular/commit/4340bea)), closes [#15535](https://github.com/angular/angular/issues/15535)
+* **router:** should run resolvers for the same route concurrently ([ec89f37](https://github.com/angular/angular/commit/ec89f37)), closes [#14279](https://github.com/angular/angular/issues/14279)
+* **router:** terminal route in custom matcher ([5d275e9](https://github.com/angular/angular/commit/5d275e9))
+
+
+
 <a name="4.3.0"></a>
 # [4.3.0](https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0) (2017-07-14)
 

WORKSPACE

@@ -1,11 +1,17 @@
 load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
-   name = "io_bazel_rules_typescript",
+   name = "build_bazel_rules_typescript",
    remote = "https://github.com/bazelbuild/rules_typescript.git",
-   commit = "3a8404d",
+   tag = "0.0.5",
 )
 
-load("@io_bazel_rules_typescript//:defs.bzl", "node_repositories")
+load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
 
 node_repositories(package_json = "//:package.json")
+
+git_repository(
+    name = "build_bazel_rules_angular",
+    remote = "https://github.com/bazelbuild/rules_angular.git",
+    tag = "0.0.1",
+)

aio/.angular-cli.json

@@ -31,8 +31,9 @@
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
-        "stage": "environments/environment.stage.ts",
-        "prod": "environments/environment.prod.ts"
+        "next": "environments/environment.next.ts",
+        "stable": "environments/environment.stable.ts",
+        "archive": "environments/environment.archive.ts"
       }
     }
   ],

aio/README.md

@@ -26,7 +26,7 @@ Here are the most important tasks you might need to use:
 * `yarn docs-lint` - check that the doc gen code follows our style rules.
 * `yarn docs-test` - run the unit tests for the doc generation code.
 
-* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
+* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. Add the option `-- --local` to use your local version of Angular contained in the "dist" folder.
 * `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
 * `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs.
 * `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
@@ -34,6 +34,7 @@ Here are the most important tasks you might need to use:
 * `yarn example-e2e` - run all e2e tests for examples
   - `yarn example-e2e -- --setup` - force webdriver update & other setup, then run tests
   - `yarn example-e2e -- --filter=foo` - limit e2e tests to those containing the word "foo"
+  - `yarn example-e2e -- --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
 
 * `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
 

aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts

@@ -32,7 +32,8 @@ export class BuildCreator extends EventEmitter {
       then(() => Promise.all([this.exists(prDir), this.exists(shaDir)])).
       then(([prDirExisted, shaDirExisted]) => {
         if (shaDirExisted) {
-          throw new UploadError(409, `Request to overwrite existing directory: ${shaDir}`);
+          const publicOrNot = isPublic ? 'public' : 'non-public';
+          throw new UploadError(409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
         }
 
         dirToRemoveOnError = prDirExisted ? shaDir : prDir;

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts

@@ -110,6 +110,7 @@ describe('upload-server (on HTTP)', () => {
       const authorizationHeader2 = isPublic ?
         authorizationHeader : `--header "Authorization: ${c.BV_verify_verifiedNotTrusted}"`;
       const cmdPrefix = curl('', `${authorizationHeader2} ${xFileHeader}`);
+      const overwriteRe = RegExp(`^Request to overwrite existing ${isPublic ? 'public' : 'non-public'} directory`);
 
 
       it('should not overwrite existing builds', done => {
@@ -120,7 +121,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
-          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(h.verifyResponse(409, overwriteRe)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -141,7 +142,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9Almost}`).
-          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(h.verifyResponse(409, overwriteRe)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -310,7 +311,7 @@ describe('upload-server (on HTTP)', () => {
           expect(h.buildExists(pr, sha0, isPublic)).toBe(false);
 
           uploadBuild(sha0).
-            then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+            then(h.verifyResponse(409, overwriteRe)).
             then(() => {
               checkPrVisibility(isPublic);
               expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(pr);

aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts

@@ -153,7 +153,8 @@ describe('BuildCreator', () => {
         it('should abort and skip further operations if the build does already exist', done => {
           existsValues[shaDir] = true;
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -169,7 +170,8 @@ describe('BuildCreator', () => {
           expect(bcExistsSpy(shaDir)).toBe(false);
 
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();

aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json

@@ -6,7 +6,7 @@
     "interface-name": [true, "never-prefix"],
     "max-classes-per-file": [true, 4],
     "no-consecutive-blank-lines": [true, 2],
-    "no-console": false,
+    "no-console": [false],
     "no-namespace": [true, "allow-declarations"],
     "no-string-literal": false,
     "quotemark": [true, "single"],

aio/aio-builds-setup/docs/overview--http-status-codes.md

@@ -46,8 +46,8 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing directory (e.g. deploy existing build or change PR visibility when
-  the destination directory does already exist).
+  Request to overwrite existing (public or non-public) directory (e.g. deploy existing build or
+  change PR visibility when the destination directory does already exist).
 
 - **413 (Payload Too Large)**:
   Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
@@ -71,7 +71,8 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing directory (i.e. directories for both visibilities exist).
+  Request to overwrite existing (public or non-public) directory (i.e. directories for both
+  visibilities exist).
   (Normally, this should not happen.)
 
 

aio/content/examples/.gitignore

@@ -43,13 +43,9 @@ dist/
 **/app/**/*.ajs.js
 
 # aot
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.ngsummary.ts
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-!aot/bs-config.json
-!aot/index.html
+*/aot/**/*
+!*/aot/bs-config.json
+!*/aot/index.html
 !rollup-config.js
 
 # i18n
@@ -59,10 +55,6 @@ dist/
 !testing/src/browser-test-shim.js
 !testing/karma*.js
 
-# TS to JS
-!ts-to-js/js*/**/*.js
-ts-to-js/js*/**/system*.js
-
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js

aio/content/examples/form-validation/e2e-spec.ts

@@ -9,30 +9,20 @@ describe('Form Validation Tests', function () {
     browser.get('');
   });
 
-  describe('Hero Form 1', () => {
+  describe('Template-driven form', () => {
     beforeAll(() => {
-      getPage('hero-form-template1');
+      getPage('hero-form-template');
     });
 
-    tests();
+    tests('Template-Driven Form');
   });
 
-  describe('Hero Form 2', () => {
+  describe('Reactive form', () => {
     beforeAll(() => {
-      getPage('hero-form-template2');
+      getPage('hero-form-reactive');
     });
 
-    tests();
-    bobTests();
-  });
-
-  describe('Hero Form 3 (Reactive)', () => {
-    beforeAll(() => {
-      getPage('hero-form-reactive3');
-      makeNameTooLong();
-    });
-
-    tests();
+    tests('Reactive Form');
     bobTests();
   });
 });
@@ -48,6 +38,7 @@ let page: {
   nameInput: ElementFinder,
   alterEgoInput: ElementFinder,
   powerSelect: ElementFinder,
+  powerOption: ElementFinder,
   errorMessages: ElementArrayFinder,
   heroFormButtons: ElementArrayFinder,
   heroSubmitted: ElementFinder
@@ -64,19 +55,21 @@ function getPage(sectionTag: string) {
     nameInput: section.element(by.css('#name')),
     alterEgoInput: section.element(by.css('#alterEgo')),
     powerSelect: section.element(by.css('#power')),
+    powerOption: section.element(by.css('#power option')),
     errorMessages: section.all(by.css('div.alert')),
     heroFormButtons: buttons,
-    heroSubmitted: section.element(by.css('hero-submitted > div'))
+    heroSubmitted: section.element(by.css('.submitted-message'))
   };
 }
 
-function tests() {
+function tests(title: string) {
+
   it('should display correct title', function () {
-    expect(page.title.getText()).toContain('Hero Form');
+    expect(page.title.getText()).toContain(title);
   });
 
   it('should not display submitted message before submit', function () {
-    expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(false);
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
   });
 
   it('should have form buttons', function () {
@@ -130,11 +123,11 @@ function tests() {
 
   it('should hide form after submit', function () {
     page.heroFormButtons.get(0).click();
-    expect(page.title.isDisplayed()).toBe(false);
+    expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
   });
 
   it('submitted form should be displayed', function () {
-    expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(true);
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
   });
 
   it('submitted form should have new hero name', function () {
@@ -142,9 +135,9 @@ function tests() {
   });
 
   it('clicking edit button should reveal form again', function () {
-    const editBtn = page.heroSubmitted.element(by.css('button'));
-    editBtn.click();
-    expect(page.heroSubmitted.isElementPresent(by.css('h2')))
+    const newFormBtn = page.heroSubmitted.element(by.css('button'));
+    newFormBtn.click();
+    expect(page.heroSubmitted.isElementPresent(by.css('p')))
       .toBe(false, 'submitted hidden again');
     expect(page.title.isDisplayed()).toBe(true, 'can see form title');
   });
@@ -159,9 +152,13 @@ function expectFormIsInvalid() {
 }
 
 function bobTests() {
-  const emsg = 'Someone named "Bob" cannot be a hero.';
+  const emsg = 'Name cannot be Bob.';
 
   it('should produce "no bob" error after setting name to "Bobby"', function () {
+    // Re-populate select element
+    page.powerSelect.click();
+    page.powerOption.click();
+
     page.nameInput.clear();
     page.nameInput.sendKeys('Bobby');
     expectFormIsInvalid();
@@ -174,8 +171,3 @@ function bobTests() {
     expectFormIsValid();
   });
 }
-
-function makeNameTooLong() {
-  // make the first name invalid
-  page.nameInput.sendKeys('ThisHeroNameHasWayWayTooManyLetters');
-}

aio/content/examples/form-validation/src/app/app.component.ts

@@ -3,10 +3,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: `<hero-form-template1></hero-form-template1>
+  template: `<hero-form-template></hero-form-template>
              <hr>
-             <hero-form-template2></hero-form-template2>
-             <hr>
-             <hero-form-reactive3></hero-form-reactive3>`
+             <hero-form-reactive></hero-form-reactive>`
 })
 export class AppComponent { }

aio/content/examples/form-validation/src/app/app.module.ts

@@ -1,18 +1,26 @@
 // #docregion
 import { NgModule }      from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }           from './app.component';
-import { HeroFormTemplateModule } from './template/hero-form-template.module';
-import { HeroFormReactiveModule } from './reactive/hero-form-reactive.module';
+import { HeroFormTemplateComponent } from './template/hero-form-template.component';
+import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
+import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';
+
 
 @NgModule({
   imports: [
     BrowserModule,
-    HeroFormTemplateModule,
-    HeroFormReactiveModule
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroFormTemplateComponent,
+    HeroFormReactiveComponent,
+    ForbiddenValidatorDirective
   ],
-  declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html

@@ -1,26 +1,38 @@
  <!-- #docregion -->
 <div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 3 (Reactive)</h1>
-    <!-- #docregion form-tag-->
-    <form [formGroup]="heroForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
 
-        <input type="text" id="name" class="form-control"
+  <h1>Reactive Form</h1>
+
+  <form [formGroup]="heroForm" #formDir="ngForm">
+
+    <div [hidden]="formDir.submitted">
+
+      <div class="form-group">
+
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <input id="name" class="form-control"
                formControlName="name" required >
 
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
+
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
+          </div>
         </div>
         <!-- #enddocregion name-with-error-msg -->
       </div>
 
       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
+        <input id="alterEgo" class="form-control"
             formControlName="alterEgo"  >
       </div>
 
@@ -31,17 +43,20 @@
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
 
-        <div *ngIf="formErrors.power" class="alert alert-danger">
-          {{ formErrors.power }}
+        <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
         </div>
       </div>
 
       <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.valid">Submit</button>
+             [disabled]="heroForm.invalid">Submit</button>
       <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
+             (click)="formDir.resetForm({})">Reset</button>
+    </div>
+  </form>
 
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
+  <div class="submitted-message" *ngIf="formDir.submitted">
+    <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+    <button (click)="formDir.resetForm({})">Add new hero</button>
+  </div>
 </div>

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts

@@ -2,115 +2,39 @@
 // #docplaster
 // #docregion
 import { Component, OnInit }                  from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-
-import { Hero }                   from '../shared/hero';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
-  selector: 'hero-form-reactive3',
+  selector: 'hero-form-reactive',
   templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {
 
   powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
 
-  hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What');
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
 
-  submitted = false;
-
-  // #docregion on-submit
-  onSubmit() {
-    this.submitted = true;
-    this.hero = this.heroForm.value;
-  }
-  // #enddocregion on-submit
-// #enddocregion
-
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion class
-  // #docregion add-hero
-  addHero() {
-    this.hero = new Hero(42, '', '');
-    this.buildForm();
-  // #enddocregion add-hero
-// #enddocregion class
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-  // #docregion add-hero
-  }
-  // #enddocregion add-hero
-
-  // #docregion form-builder
   heroForm: FormGroup;
-  constructor(private fb: FormBuilder) { }
 
+  // #docregion form-group
   ngOnInit(): void {
-    this.buildForm();
-  }
-
-  buildForm(): void {
-    this.heroForm = this.fb.group({
-      // #docregion name-validators
-      'name': [this.hero.name, [
-          Validators.required,
-          Validators.minLength(4),
-          Validators.maxLength(24),
-          forbiddenNameValidator(/bob/i)
-        ]
-      ],
-      // #enddocregion name-validators
-      'alterEgo': [this.hero.alterEgo],
-      'power':    [this.hero.power, Validators.required]
+    // #docregion custom-validator
+    this.heroForm = new FormGroup({
+      'name': new FormControl(this.hero.name, [
+        Validators.required,
+        Validators.minLength(4),
+        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
+      ]),
+      'alterEgo': new FormControl(this.hero.alterEgo),
+      'power': new FormControl(this.hero.power, Validators.required)
     });
-
-    this.heroForm.valueChanges
-      .subscribe(data => this.onValueChanged(data));
-
-    this.onValueChanged(); // (re)set validation messages now
+    // #enddocregion custom-validator
   }
 
-  // #enddocregion form-builder
+  get name() { return this.heroForm.get('name'); }
 
-  onValueChanged(data?: any) {
-    if (!this.heroForm) { return; }
-    const form = this.heroForm;
-
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = '';
-      const control = form.get(field);
-
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field];
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' ';
-        }
-      }
-    }
-  }
-
-  formErrors = {
-    'name': '',
-    'power': ''
-  };
-
-  validationMessages = {
-    'name': {
-      'required':      'Name is required.',
-      'minlength':     'Name must be at least 4 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.',
-      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
+  get power() { return this.heroForm.get('power'); }
+  // #enddocregion form-group
 }
 // #enddocregion

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.module.ts

@@ -1,13 +0,0 @@
-// #docregion
-import { NgModule }            from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { SharedModule }              from '../shared/shared.module';
-import { HeroFormReactiveComponent } from './hero-form-reactive.component';
-
-@NgModule({
-  imports:      [ SharedModule, ReactiveFormsModule ],
-  declarations: [ HeroFormReactiveComponent ],
-  exports:      [ HeroFormReactiveComponent ]
-})
-export class HeroFormReactiveModule { }

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -6,9 +6,8 @@ import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } fr
 /** A hero's name can't match the given regular expression */
 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   return (control: AbstractControl): {[key: string]: any} => {
-    const name = control.value;
-    const no = nameRe.test(name);
-    return no ? {'forbiddenName': {name}} : null;
+    const forbidden = nameRe.test(control.value);
+    return forbidden ? {'forbiddenName': {value: control.value}} : null;
   };
 }
 // #enddocregion custom-validator
@@ -20,23 +19,12 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
   // #enddocregion directive-providers
 })
-export class ForbiddenValidatorDirective implements Validator, OnChanges {
+export class ForbiddenValidatorDirective implements Validator {
   @Input() forbiddenName: string;
-  private valFn = Validators.nullValidator;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    const change = changes['forbiddenName'];
-    if (change) {
-      const val: string | RegExp = change.currentValue;
-      const re = val instanceof RegExp ? val : new RegExp(val, 'i');
-      this.valFn = forbiddenNameValidator(re);
-    } else {
-      this.valFn = Validators.nullValidator;
-    }
-  }
 
   validate(control: AbstractControl): {[key: string]: any} {
-    return this.valFn(control);
+    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
+                              : null;
   }
 }
 // #enddocregion directive

aio/content/examples/form-validation/src/app/shared/hero.ts

@@ -1,9 +0,0 @@
-// #docregion
-export class Hero {
-  constructor(
-    public id: number,
-    public name: string,
-    public power: string,
-    public alterEgo?: string
-  ) {  }
-}

aio/content/examples/form-validation/src/app/shared/shared.module.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { NgModule }     from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ForbiddenValidatorDirective } from './forbidden-name.directive';
-import { SubmittedComponent }          from './submitted.component';
-
-@NgModule({
-  imports:      [ CommonModule],
-  declarations: [ ForbiddenValidatorDirective, SubmittedComponent ],
-  exports:      [ ForbiddenValidatorDirective, SubmittedComponent,
-                  CommonModule ]
-})
-export class SharedModule { }

aio/content/examples/form-validation/src/app/shared/submitted.component.ts

@@ -1,32 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Hero } from './hero';
-
-@Component({
-  selector: 'hero-submitted',
-  template: `
-  <div *ngIf="submitted">
-    <h2>You submitted the following:</h2>
-    <div class="row">
-      <div class="col-xs-3">Name</div>
-      <div class="col-xs-9  pull-left">{{ hero.name }}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-3">Alter Ego</div>
-      <div class="col-xs-9 pull-left">{{ hero.alterEgo }}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-3">Power</div>
-      <div class="col-xs-9 pull-left">{{ hero.power }}</div>
-    </div>
-    <br>
-    <button class="btn btn-default" (click)="onClick()">Edit</button>
-  </div>`
-})
-export class SubmittedComponent {
-  @Input()  hero: Hero;
-  @Input()  submitted = false;
-  @Output() submittedChange = new EventEmitter<boolean>();
-  onClick() { this.submittedChange.emit(false); }
-}

aio/content/examples/form-validation/src/app/template/hero-form-template.component.html

@@ -0,0 +1,66 @@
+ <!-- #docregion -->
+<div class="container">
+
+  <h1>Template-Driven Form</h1>
+  <!-- #docregion form-tag-->
+  <form #heroForm="ngForm">
+  <!-- #enddocregion form-tag-->
+    <div [hidden]="heroForm.submitted">
+
+      <div class="form-group">
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <!-- #docregion name-input -->
+        <input id="name" name="name" class="form-control"
+               required minlength="4" forbiddenName="bob"
+               [(ngModel)]="hero.name" #name="ngModel" >
+        <!-- #enddocregion name-input -->
+
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
+
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
+          </div>
+
+        </div>
+        <!-- #enddocregion name-with-error-msg -->
+      </div>
+
+      <div class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input id="alterEgo" class="form-control"
+               name="alterEgo" [(ngModel)]="hero.alterEgo" >
+      </div>
+
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select id="power" name="power" class="form-control"
+                required [(ngModel)]="hero.power" #power="ngModel" >
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+        </select>
+
+        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-default"
+              [disabled]="heroForm.invalid">Submit</button>
+      <button type="button" class="btn btn-default"
+              (click)="heroForm.resetForm({})">Reset</button>
+    </div>
+
+    <div class="submitted-message" *ngIf="heroForm.submitted">
+      <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+      <button (click)="heroForm.resetForm({})">Add new hero</button>
+    </div>
+  </form>
+
+</div>

aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts

@@ -0,0 +1,16 @@
+/* tslint:disable: member-ordering */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-form-template',
+  templateUrl: './hero-form-template.component.html'
+})
+export class HeroFormTemplateComponent {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
+
+}

aio/content/examples/form-validation/src/app/template/hero-form-template.module.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { NgModule }     from '@angular/core';
-import { FormsModule }  from '@angular/forms';
-
-import { SharedModule }               from '../shared/shared.module';
-import { HeroFormTemplate1Component } from './hero-form-template1.component';
-import { HeroFormTemplate2Component } from './hero-form-template2.component';
-
-@NgModule({
-  imports:      [ SharedModule, FormsModule ],
-  declarations: [ HeroFormTemplate1Component, HeroFormTemplate2Component ],
-  exports:      [ HeroFormTemplate1Component, HeroFormTemplate2Component ]
-})
-export class HeroFormTemplateModule { }

aio/content/examples/form-validation/src/app/template/hero-form-template1.component.html

@@ -1,61 +0,0 @@
- <!-- #docregion -->
-<div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 1 (Template)</h1>
-    <!-- #docregion form-tag-->
-    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
-
-        <input type="text" id="name" class="form-control"
-               required minlength="4" maxlength="24"
-               name="name" [(ngModel)]="hero.name"
-               #name="ngModel" >
-
-        <div *ngIf="name.errors && (name.dirty || name.touched)"
-             class="alert alert-danger">
-            <div [hidden]="!name.errors.required">
-              Name is required
-            </div>
-            <div [hidden]="!name.errors.minlength">
-              Name must be at least 4 characters long.
-            </div>
-            <div [hidden]="!name.errors.maxlength">
-              Name cannot be more than 24 characters long.
-            </div>
-        </div>
-        <!-- #enddocregion name-with-error-msg -->
-      </div>
-
-      <div class="form-group">
-        <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
-               name="alterEgo"
-               [(ngModel)]="hero.alterEgo" >
-      </div>
-
-      <div class="form-group">
-        <label for="power">Hero Power</label>
-        <select id="power" class="form-control"
-                name="power"
-                [(ngModel)]="hero.power" required
-                #power="ngModel" >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-        </select>
-
-        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
-          <div [hidden]="!power.errors.required">Power is required</div>
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
-      <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
-
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
-</div>

aio/content/examples/form-validation/src/app/template/hero-form-template1.component.ts

@@ -1,47 +0,0 @@
-/* tslint:disable: member-ordering */
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-
-import { Hero }      from '../shared/hero';
-
-@Component({
-  selector: 'hero-form-template1',
-  templateUrl: './hero-form-template1.component.html'
-})
-// #docregion class
-export class HeroFormTemplate1Component {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
-
-  submitted = false;
-
-  onSubmit() {
-    this.submitted = true;
-  }
-// #enddocregion class
-// #enddocregion
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion
-// #docregion class
-
-  addHero() {
-    this.hero = new Hero(42, '', '');
-// #enddocregion class
-// #enddocregion
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-// #docregion class
-  }
-}
-// #enddocregion class
-// #enddocregion

aio/content/examples/form-validation/src/app/template/hero-form-template2.component.html

@@ -1,52 +0,0 @@
- <!-- #docregion -->
-<div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 2 (Template & Messages)</h1>
-    <!-- #docregion form-tag-->
-    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
-
-        <!-- #docregion name-input -->
-        <input type="text" id="name" class="form-control"
-               required minlength="4" maxlength="24" forbiddenName="bob"
-               name="name" [(ngModel)]="hero.name" >
-        <!-- #enddocregion name-input -->
-
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
-        </div>
-        <!-- #enddocregion name-with-error-msg -->
-      </div>
-
-      <div class="form-group">
-        <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
-               name="alterEgo"
-               [(ngModel)]="hero.alterEgo" >
-      </div>
-
-      <div class="form-group">
-        <label for="power">Hero Power</label>
-        <select id="power" class="form-control"
-                name="power"
-                [(ngModel)]="hero.power" required >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-        </select>
-
-        <div *ngIf="formErrors.power" class="alert alert-danger">
-          {{ formErrors.power }}
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
-      <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
-
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
-</div>

aio/content/examples/form-validation/src/app/template/hero-form-template2.component.ts

@@ -1,99 +0,0 @@
-/* tslint:disable: member-ordering forin */
-// #docplaster
-// #docregion
-import { Component, AfterViewChecked, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-
-import { Hero }      from '../shared/hero';
-
-@Component({
-  selector: 'hero-form-template2',
-  templateUrl: './hero-form-template2.component.html'
-})
-export class HeroFormTemplate2Component implements AfterViewChecked {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
-
-  submitted = false;
-
-  onSubmit() {
-    this.submitted = true;
-  }
-// #enddocregion
-
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion
-
-  addHero() {
-    this.hero = new Hero(42, '', '');
-// #enddocregion
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-  }
-
-  // #docregion view-child
-  heroForm: NgForm;
-  @ViewChild('heroForm') currentForm: NgForm;
-
-  ngAfterViewChecked() {
-    this.formChanged();
-  }
-
-  formChanged() {
-    if (this.currentForm === this.heroForm) { return; }
-    this.heroForm = this.currentForm;
-    if (this.heroForm) {
-      this.heroForm.valueChanges
-        .subscribe(data => this.onValueChanged(data));
-    }
-  }
-  // #enddocregion view-child
-
-  // #docregion handler
-  onValueChanged(data?: any) {
-    if (!this.heroForm) { return; }
-    const form = this.heroForm.form;
-
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = '';
-      const control = form.get(field);
-
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field];
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' ';
-        }
-      }
-    }
-  }
-
-  formErrors = {
-    'name': '',
-    'power': ''
-  };
-  // #enddocregion handler
-
-  // #docregion messages
-  validationMessages = {
-    'name': {
-      'required':      'Name is required.',
-      'minlength':     'Name must be at least 4 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.',
-      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
-  // #enddocregion messages
-}
-// #enddocregion

aio/content/examples/form-validation/src/forms.css

@@ -1,3 +1,4 @@
+
 .ng-valid[required], .ng-valid.required  {
   border-left: 5px solid #42A948; /* green */
 }

aio/content/examples/i18n/src/app/app.component.ts

@@ -9,7 +9,7 @@ export class AppComponent {
   wolves = 0;
   gender = 'f';
   fly = true;
-  logo = 'https://angular.io/resources/images/logos/angular/angular.png';
+  logo = 'https://angular.io/assets/images/logos/angular/angular.png';
   count = 3;
   heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {

aio/content/examples/toh-pt6/aot/styles.css

@@ -1,116 +0,0 @@
-/* #docregion , quickstart, toh */
-/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-/* #enddocregion quickstart */
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-/* #enddocregion toh */
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* #docregion toh */
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}

aio/content/examples/ts-to-js/e2e-spec.ts

@@ -1,77 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('TypeScript to Javascript tests', function () {
-
-  beforeAll(function () {
-    browser.get('');
-  });
-
-  it('should display the basic component example', function () {
-    testTag('hero-view', 'Hero Detail: Windstorm');
-  });
-
-  it('should display the component example with lifecycle methods', function () {
-    testTag('hero-lifecycle', 'Hero: Windstorm');
-  });
-
-  it('should display component with DI example', function () {
-    testTag('hero-di', 'Hero: Windstorm');
-  });
-
-  it('should display component with DI using @Inject example', function () {
-    testTag('hero-di-inject', 'Hero: Windstorm');
-  });
-
-  it('should support optional, attribute, and query injections', function () {
-    let app = element(by.css('hero-di-inject-additional'));
-    let h1 = app.element(by.css('h1'));
-    let okMsg = app.element(by.css('p'));
-
-    expect(h1.getText()).toBe('Tour of Heroes');
-    app.element(by.buttonText('OK')).click();
-    expect(okMsg.getText()).toBe('OK!');
-  });
-
-  it('should support component with inputs and outputs', function () {
-    let app = element(by.css('hero-io'));
-    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);
-
-    confirmComponent.element(by.buttonText('Cancel')).click();
-    expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
-  });
-
-  it('should support host bindings and host listeners', function() {
-    let app = element(by.css('hero-host'));
-    let h1 = app.element(by.css('h1'));
-
-    expect(app.getAttribute('class')).toBe('heading');
-    expect(app.getAttribute('title')).toContain('Tooltip');
-
-    h1.click();
-    expect(h1.getAttribute('class')).toBe('active');
-
-    h1.click();
-    browser.actions().doubleClick(h1.getWebElement()).perform();
-    expect(h1.getAttribute('class')).toBe('active');
-  });
-
-  it('should support content and view queries', function() {
-    let app = element(by.css('hero-queries'));
-    let windstorm = app.element(by.css('view-child:first-child'));
-
-    app.element(by.css('button')).click();
-    expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
-    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
-  });
-
-  function testTag(selector: string, expectedText: string) {
-    let component = element(by.css(selector));
-    expect(component.getText()).toBe(expectedText);
-  }
-
-});

aio/content/examples/ts-to-js/js-es6-decorators/example-config.json

@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}

aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json

@@ -1,9 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags":["cookbook"]
-}

aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    "es2015",
-    "angular2"
-  ]
-}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  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';
-}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html

@@ -1,31 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#io-metadata">Input and Output Decorators</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<hero-lifecycle></hero-lifecycle>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-<hero-host-meta></hero-host-meta>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata</h4>
-<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6

@@ -1,55 +0,0 @@
-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

aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6

@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-// #docregion
-@Component({
-  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

aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html

@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>

aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6

@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class DataService {
-  constructor() { }
-
-  getHeroName() {
-    return 'Windstorm';
-  }
-}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes"></hero-title>`
-})
-export class HeroComponent { }

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6

@@ -1,13 +0,0 @@
-import { Component, Inject } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-di-inject',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  constructor(@Inject('heroName') name) {
-    this.name = name;
-  }
-}
-// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6

@@ -1,15 +0,0 @@
-// #docregion
-import { Component }   from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
-  selector: 'hero-di',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  name = '';
-  constructor(dataService: DataService) {
-    this.name = dataService.getHeroName();
-  }
-}
-// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6

@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-host-meta',
-  template: `
-    <h1 [class.active]="active">Hero Host in Metadata</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  host: {
-    // HostBindings to the <hero-host-meta> element
-    '[title]': 'title',
-    '[class.heading]': 'headingClass',
-
-    // HostListeners on the entire <hero-host-meta> element
-    '(click)': 'clicked()',
-    '(mouseenter)': 'enter($event)',
-    '(mouseleave)': 'leave($event)'
-  },
-  // Styles within (but excluding) the <hero-host-meta> 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

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6

@@ -1,39 +0,0 @@
-import { Component, HostBinding, HostListener } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-host',
-  template: `
-    <h1 [class.active]="active">Hero Host in Decorators</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  // Styles within (but excluding) the <hero-host> element
-  styles: ['.active {background-color: yellow;}']
-})
-export class HeroHostComponent {
-  // HostBindings to the <hero-host> element
-  @HostBinding() title = 'Hero Host in Decorators Tooltip';
-  @HostBinding('class.heading') headingClass = true;
-
-  active = false;
-  clicks = 0;
-
-  // HostListeners on the entire <hero-host> 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

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6

@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-io',
-  template: `
-    <app-confirm [okMsg]="'OK'"
-                 [cancelMsg]="'Cancel'"
-                 (ok)="onOk()"
-                 (cancel)="onCancel()">
-    </app-confirm>
-    <span *ngIf="okClicked">OK clicked</span>
-    <span *ngIf="cancelClicked">Cancel clicked</span>
-  `
-})
-export class HeroIOComponent {
-  okClicked     = false;
-  cancelClicked = false;
-
-  onOk() {
-    this.okClicked = true;
-  }
-
-  onCancel() {
-    this.cancelClicked = true;
-  }
-}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6

@@ -1,14 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-lifecycle',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  name = '';
-  ngOnInit() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  }
-}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6

@@ -1,81 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  Input,
-  QueryList,
-  ViewChildren
-} from '@angular/core';
-
-@Component({
-  selector: 'content-child',
-  template: `
-  <span class="content-child" *ngIf="active">
-    Active
-  </span>`
-})
-export class ContentChildComponent {
-  active = false;
-
-  activate() {
-    this.active = true;
-  }
-}
-
-////////////////////
-
-// #docregion content
-@Component({
-  selector: 'view-child',
-  template: `
-  <h2 [class.active]=active>
-    {{hero.name}}
-    <ng-content></ng-content>
-  </h2>`,
-  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: `
-    <view-child *ngFor="let hero of heroData" [hero]="hero">
-      <content-child></content-child>
-    </view-child>
-    <button (click)="activate()">{{buttonLabel}} All</button>
-  `
-})
-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

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6

@@ -1,25 +0,0 @@
-import { Attribute, Component, Inject, Optional } from '@angular/core';
-
-// #docregion
-// #docregion templateUrl
-@Component({
-  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
-

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html

@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6

@@ -1,15 +0,0 @@
-// #docregion
-// #docregion metadata
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-view',
-  template: '<h1>{{title}}: {{getName()}}</h1>'
-})
-// #docregion appexport, class
-export class HeroComponent {
-  title = 'Hero Detail';
-  getName() {return 'Windstorm'; }
-}
-// #enddocregion appexport, class
-// #enddocregion metadata

aio/content/examples/ts-to-js/js-es6-decorators/src/index.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <!-- 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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>

aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6

@@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/ts-to-js/js-es6/example-config.json

@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}

aio/content/examples/ts-to-js/js-es6/plnkr.json

@@ -1,9 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags":["cookbook"]
-}

aio/content/examples/ts-to-js/js-es6/src/.babelrc

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "es2015"
-  ]
-}

aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-export class AppComponent {
-  constructor() {
-    this.title = 'Plain ES6 JavaScript';
-  }
-}
-
-AppComponent.annotations = [
-  new Component({
-    selector: 'my-app',
-    templateUrl: './app.component.html',
-    styles: [
-      // See hero-di-inject-additional.component
-      'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
-      '.heading {font-style: italic}'
-    ]
-  })
-];

aio/content/examples/ts-to-js/js-es6/src/app/app.component.html

@@ -1,30 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#io-metadata">Input and Output Metadata</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<hero-lifecycle></hero-lifecycle>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata</h4>
-<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6

@@ -1,56 +0,0 @@
-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 { 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';
-
-export class AppModule { }
-
-AppModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule],
-    declarations: [
-      AppComponent,
-      ConfirmComponent,
-      HeroComponent,
-      HeroDIComponent,
-      HeroDIInjectComponent,
-      HeroDIInjectAdditionalComponent,
-      HeroHostComponent,
-      HeroIOComponent,
-      HeroLifecycleComponent,
-      HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
-      HeroTitleComponent
-    ],
-    providers: [
-      DataService,
-      { provide: 'heroName', useValue: 'Windstorm' }
-    ],
-    bootstrap: [ AppComponent ],
-
-    // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
-  })
-]
-
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import

aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6

@@ -1,31 +0,0 @@
-import { Component, EventEmitter } from '@angular/core';
-
-// #docregion
-export class ConfirmComponent {
-  constructor(){
-    this.ok    = new EventEmitter();
-    this.notOk = new EventEmitter();
-  }
-  onOkClick() {
-    this.ok.emit(true);
-  }
-  onNotOkClick() {
-    this.notOk.emit(true);
-  }
-}
-
-ConfirmComponent.annotations = [
-  new Component({
-    selector: 'app-confirm',
-    templateUrl: './confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  })
-];
-// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html

@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>

aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6

@@ -1,13 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export class DataService {
-  constructor() {
-  }
-  getHeroName() {
-    return 'Windstorm';
-  }
-}
-
-DataService.annotations = [
-  new Injectable()
-];

aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-export class HeroComponent { }
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-di-inject-additional',
-    template: `<hero-title title="Tour of Heroes"></hero-title>`
-  })
-];

aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6

@@ -1,20 +0,0 @@
-import { Component, Inject } from '@angular/core';
-
-// #docregion
-export class HeroComponent {
-  constructor(name) {
-    this.name = name;
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-di-inject',
-    template: `<h1>Hero: {{name}}</h1>`
-  })
-];
-
-HeroComponent.parameters = [
-  [new Inject('heroName')]
-];
-// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6

@@ -1,21 +0,0 @@
-// #docregion
-import { Component }   from '@angular/core';
-import { DataService } from './data.service';
-
-export class HeroComponent {
-  constructor(dataService) {
-    this.name = dataService.getHeroName();
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-di',
-    template: `<h1>Hero: {{name}}</h1>`
-  })
-];
-
-HeroComponent.parameters = [
-  [DataService]
-];
-// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6

@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion
-export class HeroHostComponent {
-  constructor() {
-    this.active = false;
-    this.clicks = 0;
-    this.headingClass = true;
-    this.title = 'Hero Host Tooltip';
-  }
-
-  clicked() {
-    this.clicks += 1;
-  }
-
-  enter(event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  leave(event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-}
-
-// #docregion metadata
-HeroHostComponent.annotations = [
-  new Component({
-    selector: 'hero-host',
-    template: `
-      <h1 [class.active]="active">Hero Host</h1>
-      <div>Heading clicks: {{clicks}}</div>
-    `,
-    host: {
-      // HostBindings to the <hero-host> element
-      '[title]': 'title',
-      '[class.heading]': 'headingClass',
-      '(click)': 'clicked()',
-
-      // HostListeners on the entire <hero-host> element
-      '(mouseenter)': 'enter($event)',
-      '(mouseleave)': 'leave($event)'
-    },
-    // Styles within (but excluding) the <hero-host> element
-    styles: ['.active {background-color: yellow;}']
-  })
-];
-// #enddocregion metadata
-// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6

@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-
-export class HeroIOComponent {
-  constructor() {
-    this.okClicked     = false;
-    this.cancelClicked = false;
-  }
-
-  onOk() {
-    this.okClicked = true;
-  }
-
-  onCancel() {
-    this.cancelClicked = true;
-  }
-}
-
-HeroIOComponent.annotations = [
-  new Component({
-    selector: 'hero-io',
-    template: `
-      <app-confirm [okMsg]="'OK'"
-                   [cancelMsg]="'Cancel'"
-                   (ok)="onOk()"
-                   (cancel)="onCancel()">
-      </app-confirm>
-      <span *ngIf="okClicked">OK clicked</span>
-      <span *ngIf="cancelClicked">Cancel clicked</span>
-    `
-  })
-];

aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6

@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-export class HeroComponent {
-  ngOnInit() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-lifecycle',
-    template: `<h1>Hero: {{name}}</h1>`
-  })
-];

aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6

@@ -1,97 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  Input,
-  QueryList,
-  ViewChildren
-} from '@angular/core';
-
-export class ContentChildComponent {
-  constructor() {
-    this.active = false;
-  }
-
-  activate() {
-    this.active = !this.active;
-  }
-}
-
-ContentChildComponent.annotations = [
-  new Component({
-    selector: 'content-child',
-    template: `
-    <span class="content-child" *ngIf="active">
-      Active
-    </span>`
-  })
-];
-
-////////////////////
-
-// #docregion content
-export class ViewChildComponent {
-  constructor() {
-    this.active = false;
-  }
-
-  activate() {
-    this.active = !this.active;
-    this.content.activate();
-  }
-}
-
-ViewChildComponent.annotations = [
-  new Component({
-    selector: 'view-child',
-    template: `<h2 [class.active]=active>
-      {{hero.name}}
-      <ng-content></ng-content>
-    </h2>`,
-    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
-    inputs: ['hero'],
-    queries: {
-      content: new ContentChild(ContentChildComponent)
-    }
-  })
-];
-// #enddocregion content
-
-////////////////////
-
-// #docregion view
-export class HeroQueriesComponent {
-  constructor(){
-    this.active = false;
-    this.heroData = [
-      {id: 1, name: 'Windstorm'},
-      {id: 2, name: 'LaughingGas'}
-    ];
-  }
-
-  activate() {
-    this.active = !this.active;
-    this.views.forEach(
-      view => view.activate()
-    );
-  }
-
-  get buttonLabel() {
-    return this.active ? 'Deactivate' : 'Activate';
-  }
-}
-
-HeroQueriesComponent.annotations = [
-  new Component({
-    selector: 'hero-queries',
-    template: `
-      <view-child *ngFor="let hero of heroData" [hero]="hero">
-        <content-child></content-child>
-      </view-child>
-      <button (click)="activate()">{{buttonLabel}} All</button>
-    `,
-    queries: {
-      views: new ViewChildren(ViewChildComponent)
-    }
-  })
-];
-// #enddocregion view

aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6

@@ -1,28 +0,0 @@
-import { Attribute, Component, Inject, Optional } from '@angular/core';
-
-// #docregion
-export class HeroTitleComponent {
-  constructor(titlePrefix, title) {
-    this.titlePrefix = titlePrefix;
-    this.title  = title;
-    this.msg = '';
-  }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-
-// #docregion templateUrl
-HeroTitleComponent.annotations = [
-  new Component({
-    selector: 'hero-title',
-    templateUrl: './hero-title.component.html'
-  })
-];
-// #enddocregion templateUrl
-
-HeroTitleComponent.parameters = [
-  [new Optional(), new Inject('titlePrefix')],
-  [new Attribute('title')]
-];

aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html

@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6

@@ -1,21 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion metadata
-import { Component } from '@angular/core';
-
-// #docregion appexport, class
-export class HeroComponent {
-  constructor() {
-    this.title = 'Hero Detail';
-  }
-  getName() {return 'Windstorm'; }
-}
-// #enddocregion appexport, class
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-view',
-    template: '<h1>{{title}}: {{getName()}}</h1>'
-  })
-];
-// #enddocregion metadata

aio/content/examples/ts-to-js/js-es6/src/index.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <!-- 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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>

aio/content/examples/ts-to-js/js-es6/src/main.es6

@@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/ts-to-js/js/example-config.json

@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}

aio/content/examples/ts-to-js/js/plnkr.json

@@ -1,8 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/karma*.*"
-  ],
-  "tags":["cookbook"]
-}

aio/content/examples/ts-to-js/js/src/app/app.component.html

@@ -1,47 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#interfaces">Interfaces</a><br>
-<a href="#io-metadata">Input and Output Metadata</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
-<hero-view-dsl></hero-view-dsl>
-
-<hr>
-<h4 id="interfaces">Interfaces</h4>
-<hero-lifecycle></hero-lifecycle>
-<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
-<hero-lifecycle-dsl></hero-lifecycle-dsl>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
-<hero-io-dsl></hero-io-dsl>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
-<hero-di-dsl></hero-di-dsl>
-<hero-di-inject-dsl></hero-di-inject-dsl>
-<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
-<hero-host-dsl></hero-host-dsl>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
-<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js/src/app/app.component.js

@@ -1,20 +0,0 @@
-(function(app) {
-
-app.AppComponent = AppComponent;
-function AppComponent() {
-  this.title = 'ES5 JavaScript';
-}
-
-AppComponent.annotations = [
-  new ng.core.Component({
-    selector: 'my-app',
-    templateUrl: 'app/app.component.html',
-    styles: [
-      // See hero-di-inject-additional.component
-      'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
-      '.heading {font-style: italic}'
-    ]
-  })
-];
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/app.module.js

@@ -1,46 +0,0 @@
-(function(app) {
-
-app.AppModule = AppModule;
-function AppModule() { }
-
-AppModule.annotations = [
-  new ng.core.NgModule({
-    imports: [ ng.platformBrowser.BrowserModule ],
-    declarations: [
-      app.AppComponent,
-      app.ConfirmComponent, app.ConfirmDslComponent,
-      app.HeroComponent, app.HeroDslComponent,
-      app.HeroDIComponent, app.HeroDIDslComponent,
-      app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
-      app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
-      app.HeroHostComponent, app.HeroHostDslComponent,
-      app.HeroIOComponent, app.HeroIODslComponent,
-      app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
-      app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
-      app.HeroTitleComponent, app.HeroTitleDslComponent
-    ],
-    providers: [
-      app.DataService,
-      { provide: 'heroName', useValue: 'Windstorm' }
-    ],
-    bootstrap: [ app.AppComponent ],
-
-    // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
-  })
-]
-
-})(window.app = window.app || {});
-
-
-///// For documentation only /////
-(function () {
-  // #docregion appimport
-  var HeroComponent = app.HeroComponent;
-  // #enddocregion appimport
-
-  // #docregion ng2import
-  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
-  var LocationStrategy = ng.common.LocationStrategy;
-  var HashLocationStrategy = ng.common.HashLocationStrategy;
-  // #enddocregion ng2import
-})

aio/content/examples/ts-to-js/js/src/app/confirm.component.html

@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>

aio/content/examples/ts-to-js/js/src/app/confirm.component.js

@@ -1,75 +0,0 @@
-(function(app) {
-
-  // #docregion
-  app.ConfirmComponent = ConfirmComponent;
-
-  ConfirmComponent.annotations = [
-    new ng.core.Component({
-      selector: 'app-confirm',
-      templateUrl: 'app/confirm.component.html',
-      inputs: [
-        'okMsg',
-        'notOkMsg: cancelMsg'
-      ],
-      outputs: [
-        'ok',
-        'notOk: cancel'
-      ]
-    })
-  ];
-
-  function ConfirmComponent() {
-    this.ok    = new ng.core.EventEmitter();
-    this.notOk = new ng.core.EventEmitter();
-  }
-
-  ConfirmComponent.prototype.onOkClick = function() {
-    this.ok.emit(true);
-  }
-
-  ConfirmComponent.prototype.onNotOkClick = function() {
-    this.notOk.emit(true);
-  }
-  // #enddocregion
-
-})(window.app = window.app || {});
-
-/////// DSL version ////////
-
-(function(app) {
-
-  var old = app.ConfirmComponent;
-
-  // #docregion dsl
-  app.ConfirmComponent = ng.core.Component({
-    selector: 'app-confirm-dsl',
-    templateUrl: 'app/confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  })
-  .Class({
-    constructor: function ConfirmComponent() {
-      this.ok    = new ng.core.EventEmitter();
-      this.notOk = new ng.core.EventEmitter();
-    },
-
-    onOkClick: function() {
-      this.ok.emit(true);
-    },
-
-    onNotOkClick: function() {
-      this.notOk.emit(true);
-    }
-  });
-  // #enddocregion dsl
-
-  app.ConfirmDslComponent = app.ConfirmComponent;
-  app.ConfirmComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/data.service.js

@@ -1,10 +0,0 @@
-(function(app) {
-
-  app.DataService = DataService;
-  function DataService() { }
-
-  DataService.prototype.getHeroName = function() {
-    return 'Windstorm';
-  };
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js

@@ -1,36 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di-inject-additional',
-      template: '<hero-title title="Tour of Heroes"></hero-title>'
-    })
-  ];
-
-  function HeroComponent() {}
-
-  app.HeroDIInjectAdditionalComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-////// DSL Version /////////
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-di-inject-additional-dsl',
-    template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
-  }).Class({
-    constructor: function HeroComponent() { }
-  });
-
-  app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js

@@ -1,51 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di-inject',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-
-  HeroComponent.parameters = [ 'heroName' ];
-
-  function HeroComponent(name) {
-    this.name = name;
-  }
-  // #enddocregion
-
-  app.HeroDIInjectComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-/////// DSL version ////////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-di-inject-dsl',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: [
-      new ng.core.Inject('heroName'),
-      function HeroComponent(name) {
-        this.name = name;
-      }
-    ]
-  });
-  // #enddocregion dsl
-
-  app.HeroDIInjectDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di.component.js

@@ -1,51 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-
-  HeroComponent.parameters = [ app.DataService ];
-
-  function HeroComponent(dataService) {
-    this.name = dataService.getHeroName();
-  }
-  // #enddocregion
-
-  app.HeroDIComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-////// DSL Version /////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-di-dsl',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: [
-      app.DataService,
-      function HeroComponent(service) {
-        this.name = service.getHeroName();
-      }
-    ]
-  });
-  // #enddocregion dsl
-
-  app.HeroDIDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-host.component.js

@@ -1,107 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-host',
-      template:
-        '<h1 [class.active]="active">Hero Host</h1>' +
-        '<div>Heading clicks: {{clicks}}</div>',
-      host: {
-        // HostBindings to the <hero-host> element
-        '[title]': 'title',
-        '[class.heading]': 'headingClass',
-        '(click)': 'clicked()',
-
-        // HostListeners on the entire <hero-host> element
-        '(mouseenter)': 'enter($event)',
-        '(mouseleave)': 'leave($event)'
-      },
-      // Styles within (but excluding) the <hero-host> element
-      styles: ['.active {background-color: yellow;}']
-    })
-  ];
-
-  function HeroComponent() {
-    this.clicks = 0;
-    this.headingClass = true;
-    this.title = 'Hero Host Tooltip content';
-  }
-
-  HeroComponent.prototype.clicked = function() {
-    this.clicks += 1;
-  }
-
-  HeroComponent.prototype.enter = function(event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  HeroComponent.prototype.leave = function(event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-  // #enddocregion
-
-  app.HeroHostComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-//// DSL Version ////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-host-dsl',
-    template: `
-      <h1 [class.active]="active">Hero Host (DSL)</h1>
-      <div>Heading clicks: {{clicks}}</div>
-    `,
-    host: {
-      // HostBindings to the <hero-host-dsl> element
-      '[title]': 'title',
-      '[class.heading]': 'headingClass',
-      '(click)': 'clicked()',
-
-      // HostListeners on the entire <hero-host-dsl> element
-      '(mouseenter)': 'enter($event)',
-      '(mouseleave)': 'leave($event)'
-    },
-    // Styles within (but excluding) the <hero-host-dsl> element
-    styles: ['.active {background-color: coral;}']
-  })
-  .Class({
-    constructor: function HeroComponent() {
-      this.clicks = 0;
-      this.headingClass = true;
-      this.title = 'Hero Host Tooltip DSL content';
-    },
-
-    clicked() {
-      this.clicks += 1;
-    },
-
-    enter(event) {
-      this.active = true;
-      this.headingClass = false;
-    },
-
-    leave(event) {
-      this.active = false;
-      this.headingClass = true;
-    }
-  });
-  // #enddocregion dsl
-
-  app.HeroHostDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html

@@ -1,7 +0,0 @@
-<app-confirm-dsl [okMsg]="'OK'"
-                 [cancelMsg]="'Cancel'"
-                 (ok)="onOk()"
-                 (cancel)="onCancel()">
-</app-confirm-dsl>
-<span *ngIf="okClicked">OK clicked</span>
-<span *ngIf="cancelClicked">Cancel clicked</span>

aio/content/examples/ts-to-js/js/src/app/hero-io.component.html

@@ -1,7 +0,0 @@
-<app-confirm [okMsg]="'OK'"
-             [cancelMsg]="'Cancel'"
-             (ok)="onOk()"
-             (cancel)="onCancel()">
-</app-confirm>
-<span *ngIf="okClicked">OK clicked</span>
-<span *ngIf="cancelClicked">Cancel clicked</span>

aio/content/examples/ts-to-js/js/src/app/hero-io.component.js

@@ -1,52 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent
-
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-io',
-      templateUrl: 'app/hero-io.component.html'
-    })
-  ];
-
-  function HeroComponent() { }
-
-  HeroComponent.prototype.onOk = function() {
-    this.okClicked = true;
-  }
-
-  HeroComponent.prototype.onCancel = function() {
-    this.cancelClicked = true;
-  }
-
-  app.HeroIOComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-///// DSL Version ////
-
-(function(app) {
-
-  var old = app.HeroComponent
-
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-io-dsl',
-    templateUrl: 'app/hero-io-dsl.component.html'
-  })
-  .Class({
-    constructor: function HeroComponent() { },
-    onOk: function() {
-      this.okClicked = true;
-    },
-    onCancel: function() {
-      this.cancelClicked = true;
-    }
-  });
-
-  app.HeroIODslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js

@@ -1,52 +0,0 @@
-// #docplaster
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-lifecycle',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-
-  function HeroComponent() { }
-
-  HeroComponent.prototype.ngOnInit = function() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  };
-  // #enddocregion
-
-  app.HeroLifecycleComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-/////// DSL version ////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-lifecycle-dsl',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: function HeroComponent() { },
-    ngOnInit: function() {
-      // todo: fetch from server async
-      setTimeout(() => this.name = 'Windstorm', 0);
-    }
-  });
-  // #enddocregion dsl
-
-  app.HeroLifecycleDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js

@@ -1,92 +0,0 @@
-(function(app) {
-
-  app.heroQueries = app.heroQueries || {};
-
-  app.heroQueries.ContentChildComponent = ng.core.Component({
-    selector: 'content-child',
-    template:
-      '<span class="content-child" *ngIf="active">' +
-        'Active' +
-      '</span>'
-  }).Class({
-    constructor: function ContentChildComponent() {
-      this.active = false;
-    },
-
-    activate: function() {
-      this.active = !this.active;
-    }
-  });
-
-  ////////////////////
-
-  // #docregion content
-  app.heroQueries.ViewChildComponent = ng.core.Component({
-    selector: 'view-child',
-    template:
-      '<h2 [class.active]=active>' +
-        '{{hero.name}} ' +
-        '<ng-content></ng-content>' +
-      '</h2>',
-    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
-    inputs: ['hero'],
-    queries: {
-      content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
-    }
-  })
-  .Class({
-    constructor: function HeroQueriesHeroComponent() {
-      this.active = false;
-    },
-
-    activate: function() {
-      this.active = !this.active;
-      this.content.activate();
-    }
-  });
-  // #enddocregion content
-
-  ////////////////////
-
-  // #docregion view
-  app.heroQueries.HeroQueriesComponent = ng.core.Component({
-    selector: 'hero-queries',
-    template:
-      '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
-        '<content-child></content-child>' +
-      '</view-child>' +
-      '<button (click)="activate()">{{buttonLabel}} All</button>',
-    queries: {
-      views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
-    }
-  })
-  .Class({
-    constructor: function HeroQueriesComponent() {
-      this.active = false;
-      this.heroData = [
-        {id: 1, name: 'Windstorm'},
-        {id: 2, name: 'LaughingGas'}
-      ];
-    },
-
-    activate: function() {
-      this.active = !this.active;
-      this.views.forEach(function(view) {
-        view.activate();
-      });
-    },
-  });
-
-  // #docregion defined-property
-  // add prototype property w/ getter outside the DSL
-  var proto = app.heroQueries.HeroQueriesComponent.prototype;
-  Object.defineProperty(proto, "buttonLabel", {
-      get: function () {
-          return this.active ? 'Deactivate' : 'Activate';
-      },
-      enumerable: true
-  });
-  // #enddocregion defined-property
-  // #enddocregion view
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-title.component.html

@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js/src/app/hero-title.component.js

@@ -1,64 +0,0 @@
-(function(app) {
-
-  // #docregion
-  app.HeroTitleComponent = HeroTitleComponent;
-
-  // #docregion templateUrl
-  HeroTitleComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-title',
-      templateUrl: 'app/hero-title.component.html'
-    })
-  ];
-  // #enddocregion templateUrl
-
-  function HeroTitleComponent(titlePrefix, title) {
-      this.titlePrefix = titlePrefix;
-      this.title  = title;
-      this.msg = '';
-  }
-
-  HeroTitleComponent.prototype.ok = function() {
-    this.msg = 'OK!';
-  }
-
-  HeroTitleComponent.parameters = [
-    [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
-    [new ng.core.Attribute('title')]
-  ];
-  // #enddocregion
-
-})(window.app = window.app || {});
-
-////////// DSL version ////////////
-
-(function(app) {
-
-  var old = app.HeroTitleComponent;
-
-  // #docregion dsl
-  app.HeroTitleComponent = ng.core.Component({
-    selector: 'hero-title-dsl',
-    templateUrl: 'app/hero-title.component.html'
-  })
-  .Class({
-    constructor: [
-      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
-      new ng.core.Attribute('title'),
-      function HeroTitleComponent(titlePrefix, title) {
-        this.titlePrefix = titlePrefix;
-        this.title  = title;
-        this.msg = '';
-      }
-    ],
-
-    ok: function() {
-      this.msg = 'OK!';
-    }
-  });
-  // #enddocregion dsl
-
-  app.HeroTitleDslComponent = app.HeroTitleComponent;
-  app.HeroTitleComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero.component.js

@@ -1,53 +0,0 @@
-// #docplaster
-(function(app) {
-
-// #docregion
-// #docregion appexport
-// #docregion metadata
-app.HeroComponent = HeroComponent; // "export"
-
-HeroComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-view',
-    template: '<h1>{{title}}: {{getName()}}</h1>'
-  })
-];
-
-// #docregion constructorproto
-function HeroComponent() {
-  this.title = "Hero Detail";
-}
-
-HeroComponent.prototype.getName = function() { return 'Windstorm'; };
-// #enddocregion constructorproto
-
-// #enddocregion metadata
-// #enddocregion appexport
-// #enddocregion
-
-})(window.app = window.app || {});
-
-//////////// DSL version ///////////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-view-dsl',
-    template: '<h1>{{title}}: {{getName()}}</h1>',
-  })
-  .Class({
-    constructor: function HeroComponent() {
-      this.title = "Hero Detail";
-    },
-
-    getName: function() { return 'Windstorm'; }
-  });
-  // #enddocregion dsl
-
-  app.HeroDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-
-    <!-- Angular and RxJS umd scripts -->
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
-    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
-    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-
-    <!-- Application scripts -->
-    <script src="app/app.component.js"></script>
-    <script src="app/confirm.component.js"></script>
-    <script src="app/data.service.js"></script>
-    <script src="app/hero.component.js"></script>
-    <script src="app/hero-io.component.js"></script>
-    <script src="app/hero-di.component.js"></script>
-    <script src="app/hero-di-inject.component.js"></script>
-    <script src="app/hero-di-inject-additional.component.js"></script>
-    <script src="app/hero-host.component.js"></script>
-    <script src="app/hero-lifecycle.component.js"></script>
-    <script src="app/hero-queries.component.js"></script>
-    <script src="app/hero-title.component.js"></script>
-
-    <script src="app/app.module.js"></script>
-    <script src="main.js"></script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>

aio/content/examples/ts-to-js/js/src/main.js

@@ -1,9 +0,0 @@
-(function(app) {
-
-var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
-
-document.addEventListener('DOMContentLoaded', function() {
-  platformBrowserDynamic().bootstrapModule(app.AppModule);
-});
-
-})(window.app = window.app || {});