diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
index 0aba7ad419..4352bbcdf1 100644
--- a/aio/content/examples/.gitignore
+++ b/aio/content/examples/.gitignore
@@ -56,6 +56,7 @@ dist/
# TS to JS
!cb-ts-to-js/js*/**/*.js
+cb-ts-to-js/js*/**/system*.js
# webpack
!webpack/**/config/*.js
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js
deleted file mode 100644
index a0f7c54538..0000000000
--- a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
-var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
-var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
-
-module.exports.translate = function(load){
- var url = document.createElement('a');
- url.href = load.address;
-
- var basePathParts = url.pathname.split('/');
-
- basePathParts.pop();
- var basePath = basePathParts.join('/');
-
- var baseHref = document.createElement('a');
- baseHref.href = this.baseURL;
- baseHref = baseHref.pathname;
-
- basePath = basePath.replace(baseHref, '');
-
- load.source = load.source
- .replace(templateUrlRegex, function(match, quote, url){
- let resolvedUrl = url;
-
- if (url.startsWith('.')) {
- resolvedUrl = basePath + url.substr(1);
- }
-
- return 'templateUrl: "' + resolvedUrl + '"';
- })
- .replace(stylesRegex, function(match, relativeUrls) {
- var urls = [];
-
- while ((match = stringRegex.exec(relativeUrls)) !== null) {
- if (match[2].startsWith('.')) {
- urls.push('"' + basePath + match[2].substr(1) + '"');
- } else {
- urls.push('"' + match[2] + '"');
- }
- }
-
- return "styleUrls: [" + urls.join(', ') + "]";
- });
-
- return load;
-};
diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js
deleted file mode 100644
index ea7a3879ac..0000000000
--- a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
- System.config({
- paths: {
- // paths serve as alias
- 'npm:': 'node_modules/'
- },
- // map tells the System loader where to look for things
- map: {
- // our app is within the app folder
- 'app': 'app',
-
- // angular bundles
- '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
- '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
- '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
- '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
- '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
- '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
- '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
- '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
- '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
- '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
- '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
- '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
- '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
- '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
- // other libraries
- 'rxjs': 'npm:rxjs',
- 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
- },
- // packages tells the System loader how to load when no filename and/or no extension
- packages: {
- app: {
- main: './main.js',
- defaultExtension: 'js',
- meta: {
- './*.js': {
- loader: 'systemjs-angular-loader.js'
- }
- }
- },
- rxjs: {
- defaultExtension: 'js'
- }
- }
- });
-})(this);
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js b/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js
deleted file mode 100644
index a0f7c54538..0000000000
--- a/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
-var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
-var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
-
-module.exports.translate = function(load){
- var url = document.createElement('a');
- url.href = load.address;
-
- var basePathParts = url.pathname.split('/');
-
- basePathParts.pop();
- var basePath = basePathParts.join('/');
-
- var baseHref = document.createElement('a');
- baseHref.href = this.baseURL;
- baseHref = baseHref.pathname;
-
- basePath = basePath.replace(baseHref, '');
-
- load.source = load.source
- .replace(templateUrlRegex, function(match, quote, url){
- let resolvedUrl = url;
-
- if (url.startsWith('.')) {
- resolvedUrl = basePath + url.substr(1);
- }
-
- return 'templateUrl: "' + resolvedUrl + '"';
- })
- .replace(stylesRegex, function(match, relativeUrls) {
- var urls = [];
-
- while ((match = stringRegex.exec(relativeUrls)) !== null) {
- if (match[2].startsWith('.')) {
- urls.push('"' + basePath + match[2].substr(1) + '"');
- } else {
- urls.push('"' + match[2] + '"');
- }
- }
-
- return "styleUrls: [" + urls.join(', ') + "]";
- });
-
- return load;
-};
diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js b/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js
deleted file mode 100644
index ea7a3879ac..0000000000
--- a/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
- System.config({
- paths: {
- // paths serve as alias
- 'npm:': 'node_modules/'
- },
- // map tells the System loader where to look for things
- map: {
- // our app is within the app folder
- 'app': 'app',
-
- // angular bundles
- '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
- '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
- '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
- '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
- '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
- '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
- '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
- '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
- '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
- '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
- '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
- '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
- '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
- '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
- // other libraries
- 'rxjs': 'npm:rxjs',
- 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
- },
- // packages tells the System loader how to load when no filename and/or no extension
- packages: {
- app: {
- main: './main.js',
- defaultExtension: 'js',
- meta: {
- './*.js': {
- loader: 'systemjs-angular-loader.js'
- }
- }
- },
- rxjs: {
- defaultExtension: 'js'
- }
- }
- });
-})(this);
diff --git a/aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js b/aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js
deleted file mode 100644
index a0f7c54538..0000000000
--- a/aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
-var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
-var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
-
-module.exports.translate = function(load){
- var url = document.createElement('a');
- url.href = load.address;
-
- var basePathParts = url.pathname.split('/');
-
- basePathParts.pop();
- var basePath = basePathParts.join('/');
-
- var baseHref = document.createElement('a');
- baseHref.href = this.baseURL;
- baseHref = baseHref.pathname;
-
- basePath = basePath.replace(baseHref, '');
-
- load.source = load.source
- .replace(templateUrlRegex, function(match, quote, url){
- let resolvedUrl = url;
-
- if (url.startsWith('.')) {
- resolvedUrl = basePath + url.substr(1);
- }
-
- return 'templateUrl: "' + resolvedUrl + '"';
- })
- .replace(stylesRegex, function(match, relativeUrls) {
- var urls = [];
-
- while ((match = stringRegex.exec(relativeUrls)) !== null) {
- if (match[2].startsWith('.')) {
- urls.push('"' + basePath + match[2].substr(1) + '"');
- } else {
- urls.push('"' + match[2] + '"');
- }
- }
-
- return "styleUrls: [" + urls.join(', ') + "]";
- });
-
- return load;
-};
diff --git a/aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js b/aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js
deleted file mode 100644
index ea7a3879ac..0000000000
--- a/aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
- System.config({
- paths: {
- // paths serve as alias
- 'npm:': 'node_modules/'
- },
- // map tells the System loader where to look for things
- map: {
- // our app is within the app folder
- 'app': 'app',
-
- // angular bundles
- '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
- '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
- '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
- '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
- '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
- '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
- '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
- '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
- '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
- '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
- '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
- '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
- '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
- '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
-
- // other libraries
- 'rxjs': 'npm:rxjs',
- 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
- },
- // packages tells the System loader how to load when no filename and/or no extension
- packages: {
- app: {
- main: './main.js',
- defaultExtension: 'js',
- meta: {
- './*.js': {
- loader: 'systemjs-angular-loader.js'
- }
- }
- },
- rxjs: {
- defaultExtension: 'js'
- }
- }
- });
-})(this);
diff --git a/aio/content/examples/cli-quickstart/src/styles.css b/aio/content/examples/cli-quickstart/src/styles.css
new file mode 100644
index 0000000000..d81835d0cd
--- /dev/null
+++ b/aio/content/examples/cli-quickstart/src/styles.css
@@ -0,0 +1,116 @@
+/* #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;
+}
diff --git a/aio/content/examples/forms/src/app/hero-form.component.html b/aio/content/examples/forms/src/app/hero-form.component.html
index 2efb9bc7dd..73b703f789 100644
--- a/aio/content/examples/forms/src/app/hero-form.component.html
+++ b/aio/content/examples/forms/src/app/hero-form.component.html
@@ -150,7 +150,9 @@
-NgSwitch with <template>
+NgSwitch with <ng-template>
-
+
-
-
+
+
-
-
+
+
-
-
+
+
-
+
@@ -202,9 +202,9 @@
<template>
Hip!
-
+
Hip!
-
+
Hooray!
@@ -242,9 +242,9 @@
(A) <p template="myUnless condition" class="code unless">
-
+
(A) <template [myUnless]="condition">
-
+
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index e58460bf89..760fa3a367 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -544,13 +544,13 @@ bindon-ngModel
-Add {{currentHero.name}} with template
+Add {{currentHero.name}} with template
Hero Detail removed from DOM (via template) because isActive is false
-
+
-
+
diff --git a/aio/content/examples/testing/src/app/app.component.router.spec.ts b/aio/content/examples/testing/src/app/app.component.router.spec.ts
index de22db8ceb..226d6d1ff3 100644
--- a/aio/content/examples/testing/src/app/app.component.router.spec.ts
+++ b/aio/content/examples/testing/src/app/app.component.router.spec.ts
@@ -141,7 +141,7 @@ function createComponent() {
comp = fixture.componentInstance;
const injector = fixture.debugElement.injector;
- location = injector.get(Location);
+ location = injector.get(Location) as SpyLocation;
router = injector.get(Router);
router.initialNavigation();
spyOn(injector.get(TwainService), 'getQuote')
diff --git a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts b/aio/content/examples/testing/src/app/bag/async-helper.spec.ts
index 5106361a58..12c8a4fbbd 100644
--- a/aio/content/examples/testing/src/app/bag/async-helper.spec.ts
+++ b/aio/content/examples/testing/src/app/bag/async-helper.spec.ts
@@ -34,7 +34,7 @@ describe('Angular async helper', () => {
// Use done. Cannot use setInterval with async or fakeAsync
// See https://github.com/angular/angular/issues/10127
- it('should run async test with successful delayed Observable', done => {
+ it('should run async test with successful delayed Observable', (done: any) => {
const source = Observable.of(true).delay(10);
source.subscribe(
val => actuallyDone = true,
diff --git a/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts b/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts
index 6bdbe86cd0..f29672ecf6 100644
--- a/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts
@@ -18,7 +18,7 @@ describe('FancyService without the TestBed', () => {
expect(service.getValue()).toBe('real value');
});
- it('#getAsyncValue should return async value', done => {
+ it('#getAsyncValue should return async value', (done: DoneFn) => {
service.getAsyncValue().then(value => {
expect(value).toBe('async value');
done();
@@ -26,7 +26,7 @@ describe('FancyService without the TestBed', () => {
});
// #docregion getTimeoutValue
- it('#getTimeoutValue should return timeout value', done => {
+ it('#getTimeoutValue should return timeout value', (done: DoneFn) => {
service = new FancyService();
service.getTimeoutValue().then(value => {
expect(value).toBe('timeout value');
@@ -35,7 +35,7 @@ describe('FancyService without the TestBed', () => {
});
// #enddocregion getTimeoutValue
- it('#getObservableValue should return observable value', done => {
+ it('#getObservableValue should return observable value', (done: DoneFn) => {
service.getObservableValue().subscribe(value => {
expect(value).toBe('observable value');
done();
diff --git a/aio/content/examples/testing/src/app/bag/bag.spec.ts b/aio/content/examples/testing/src/app/bag/bag.spec.ts
index 3890d8844d..d6fea7ca94 100644
--- a/aio/content/examples/testing/src/app/bag/bag.spec.ts
+++ b/aio/content/examples/testing/src/app/bag/bag.spec.ts
@@ -73,7 +73,7 @@ describe('use inject helper in beforeEach', () => {
}));
// Must use done. See https://github.com/angular/angular/issues/10127
- it('test should wait for FancyService.getObservableDelayValue', done => {
+ it('test should wait for FancyService.getObservableDelayValue', (done: DoneFn) => {
service.getObservableDelayValue().subscribe(value => {
expect(value).toBe('observable delay value');
done();
@@ -187,20 +187,21 @@ describe('TestBed Component Tests', () => {
expect(selected).toHaveText(hero.name);
});
- it('can access the instance variable of an `*ngFor` row', () => {
+ it('can access the instance variable of an `*ngFor` row component', () => {
const fixture = TestBed.createComponent(IoParentComponent);
const comp = fixture.componentInstance;
+ const heroName = comp.heroes[0].name; // first hero's name
fixture.detectChanges();
- const heroEl = fixture.debugElement.query(By.css('.hero')); // first hero
+ const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
- const ngForRow = heroEl.parent; // Angular's NgForRow wrapper element
+ const hero = ngForRow.context['hero']; // the hero object passed into the row
+ expect(hero.name).toBe(heroName, 'ngRow.context.hero');
- // jasmine.any is instance-of-type test.
- expect(ngForRow.componentInstance).toEqual(jasmine.any(IoComponent), 'component is IoComp');
-
- const hero = ngForRow.context['$implicit']; // the hero object
- expect(hero.name).toBe(comp.heroes[0].name, '1st hero\'s name');
+ const rowComp = ngForRow.componentInstance;
+ // jasmine.any is an "instance-of-type" test.
+ expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+ expect(rowComp.hero.name).toBe(heroName, 'component.hero');
});
@@ -343,7 +344,7 @@ describe('TestBed Component Tests', () => {
const childComp = el.componentInstance as BankAccountComponent;
expect(childComp).toEqual(jasmine.any(BankAccountComponent));
- expect(el.context).toBe(comp, 'context is the parent component');
+ expect(el.context).toBe(childComp, 'context is the child component');
expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
@@ -447,7 +448,7 @@ describe('TestBed Component Overrides:', () => {
// `inject` uses TestBed's injector
inject([FancyService], (s: FancyService) => testBedProvider = s)();
tcProvider = fixture.debugElement.injector.get(FancyService);
- tpcProvider = fixture.debugElement.children[0].injector.get(FancyService);
+ tpcProvider = fixture.debugElement.children[0].injector.get(FancyService) as FakeFancyService;
expect(testBedProvider).not.toBe(tcProvider, 'testBed/tc not same providers');
expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers');
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
index a6c1af98d7..422dae6f77 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
@@ -12,7 +12,7 @@ describe('HeroDetailComponent - no TestBed', () => {
let hds: any;
let router: any;
- beforeEach( done => {
+ beforeEach((done: any) => {
expectedHero = new Hero(42, 'Bubba');
activatedRoute = new ActivatedRouteStub();
activatedRoute.testParams = { id: expectedHero.id };
@@ -45,7 +45,7 @@ describe('HeroDetailComponent - no TestBed', () => {
expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
});
- it('should navigate when click save resolves', done => {
+ it('should navigate when click save resolves', (done: any) => {
comp.save();
// waits for async save to complete before navigating
hds.saveHero.calls.first().returnValue
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index 4e1ee034d7..80b6450ac5 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -90,7 +90,7 @@ function overrideSetup() {
beforeEach( async(() => {
createComponent();
// get the component's injected HeroDetailServiceSpy
- hdsSpy = fixture.debugElement.injector.get(HeroDetailService);
+ hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
}));
it('should have called `getHero`', () => {
diff --git a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts b/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
index b80993cc0b..b177c0bfc3 100644
--- a/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
+++ b/aio/content/examples/testing/src/app/shared/twain.component.spec.ts
@@ -78,7 +78,7 @@ describe('TwainComponent', () => {
// #enddocregion tests
// #docregion done-test
- it('should show quote after getQuote promise (done)', done => {
+ it('should show quote after getQuote promise (done)', (done: any) => {
fixture.detectChanges();
// get the spy promise and wait for it to resolve
diff --git a/aio/content/examples/user-input/e2e-spec.ts b/aio/content/examples/user-input/e2e-spec.ts
index c0bb770848..3f178382c7 100644
--- a/aio/content/examples/user-input/e2e-spec.ts
+++ b/aio/content/examples/user-input/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node
+'use strict'; // necessary for es6 output in node
import { browser, element, by, protractor } from 'protractor';
@@ -53,7 +53,7 @@ describe('User Input Tests', function () {
expect(outputTextEle.getText()).toEqual('a | ab | abc |');
});
- xit('should be able to filter key events', () => {
+ it('should be able to filter key events', () => {
let mainEle = element(by.css('key-up3'));
let inputEle = mainEle.element(by.css('input'));
let outputTextEle = mainEle.element(by.css('p'));
diff --git a/aio/content/examples/webpack/config/webpack.common.js b/aio/content/examples/webpack/config/webpack.common.js
index be01ad5603..28be240e04 100644
--- a/aio/content/examples/webpack/config/webpack.common.js
+++ b/aio/content/examples/webpack/config/webpack.common.js
@@ -62,7 +62,7 @@ module.exports = {
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
- /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+ /angular(\\|\/)core(\\|\/)@angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
diff --git a/aio/content/examples/webpack/config/webpack.dev.js b/aio/content/examples/webpack/config/webpack.dev.js
index c1484a0caa..57d29560a0 100644
--- a/aio/content/examples/webpack/config/webpack.dev.js
+++ b/aio/content/examples/webpack/config/webpack.dev.js
@@ -6,21 +6,21 @@ var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
-
+
output: {
path: helpers.root('dist'),
- publicPath: 'http://localhost:8080/',
+ publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
-
+
plugins: [
new ExtractTextPlugin('[name].css')
],
-
+
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index 1a9e59d95b..3fb0efafb8 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -1079,7 +1079,7 @@ This is especially convenient when you consider that most dependency values are
What if the dependency value isn't a class? Sometimes the thing you want to inject is a
- span string, function, or object.
+ string, function, or object.
diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
index 18914f7061..ba52f85129 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -408,7 +408,7 @@ console:
- Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
+ Angular is running in the development mode. Call enableProdMode() to enable the production mode.
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
index 8da4890895..3f5e7bc0a2 100644
--- a/aio/content/guide/dynamic-form.md
+++ b/aio/content/guide/dynamic-form.md
@@ -7,48 +7,48 @@ Render dynamic forms with FormGroup.
@description
-We can't always justify the cost and time to build handcrafted forms,
-especially if we'll need a great number of them, they're similar to each other, and they change frequently
+Building handcrafted forms can be costly and time-consuming,
+especially if you need a great number of them, they're similar to each other, and they change frequently
to meet rapidly changing business and regulatory requirements.
-It may be more economical to create the forms dynamically, based on metadata that describe the business object model.
+It may be more economical to create the forms dynamically, based on
+metadata that describes the business object model.
-In this cookbook we show how to use `formGroup` to dynamically render a simple form with different control types and validation.
-It's a primitive start.
+This cookbook shows you how to use `formGroup` to dynamically
+render a simple form with different control types and validation.
+It's a primitive start.
It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience.
All such greatness has humble beginnings.
-In our example we use a dynamic form to build an online application experience for heroes seeking employment.
+The example in this cookbook is a dynamic form to build an
+online application experience for heroes seeking employment.
The agency is constantly tinkering with the application process.
-We can create the forms on the fly *without changing our application code*.
+You can create the forms on the fly *without changing the application code*.
{@a toc}
-## Table of contents
-
- [Bootstrap](guide/dynamic-form#bootstrap)
-
- [Question Model](guide/dynamic-form#object-model)
-
- [Form Component](guide/dynamic-form#form-component)
-
- [Questionnaire Metadata](guide/dynamic-form#questionnaire-metadata)
-
- [Dynamic Template](guide/dynamic-form#dynamic-template)
+# Contents
+ * [Bootstrap](guide/dynamic-form#bootstrap)
+ * [Question model](guide/dynamic-form#object-model)
+ * [Question form components](guide/dynamic-form#form-component)
+ * [Questionnaire data](guide/dynamic-form#questionnaire-data)
+ * [Dynamic template](guide/dynamic-form#dynamic-template)
-**See the **.
+See the .
{@a bootstrap}
## Bootstrap
-We start by creating an `NgModule` called `AppModule`.
+Start by creating an `NgModule` called `AppModule`.
-In our example we will be using Reactive Forms.
+This cookbook uses [reactive forms](guide/reactive-forms).
-Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from the `@angular/forms` library.
+Reactive forms belongs to a different `NgModule` called `ReactiveFormsModule`,
+so in order to access any reactive forms directives, you have to import
+`ReactiveFormsModule` from the `@angular/forms` library.
-We bootstrap our `AppModule` in main.ts.
+Bootstrap the `AppModule` in `main.ts`.
@@ -66,13 +66,13 @@ We bootstrap our `AppModule` in main.ts.
{@a object-model}
-## Question Model
+## Question model
The next step is to define an object model that can describe all scenarios needed by the form functionality.
-The hero application process involves a form with a lot of questions.
-The "question" is the most fundamental object in the model.
+The hero application process involves a form with a lot of questions.
+The _question_ is the most fundamental object in the model.
-We have created `QuestionBase` as the most fundamental question class.
+The following `QuestionBase` is a fundamental question class.
@@ -81,10 +81,13 @@ We have created `QuestionBase` as the most fundamental question class.
-From this base we derived two new classes in `TextboxQuestion` and `DropdownQuestion` that represent Textbox and Dropdown questions.
-The idea is that the form will be bound to specific question types and render the appropriate controls dynamically.
+From this base you can derive two new classes in `TextboxQuestion` and `DropdownQuestion`
+that represent textbox and dropdown questions.
+The idea is that the form will be bound to specific question types and render the
+appropriate controls dynamically.
-`TextboxQuestion` supports multiple html5 types like text, email, url etc via the `type` property.
+`TextboxQuestion` supports multiple HTML5 types such as text, email, and url
+via the `type` property.
@@ -102,8 +105,9 @@ The idea is that the form will be bound to specific question types and render th
-Next we have defined `QuestionControlService`, a simple service for transforming our questions to a `FormGroup`.
-In a nutshell, the form group consumes the metadata from the question model and allows us to specify default values and validation rules.
+Next is `QuestionControlService`, a simple service for transforming the questions to a `FormGroup`.
+In a nutshell, the form group consumes the metadata from the question model and
+allows you to specify default values and validation rules.
@@ -113,10 +117,11 @@ In a nutshell, the form group consumes the metadata from the question model and
{@a form-component}
## Question form components
-Now that we have defined the complete model we are ready to create components to represent the dynamic form.
+Now that you have defined the complete model you are ready
+to create components to represent the dynamic form.
-`DynamicFormComponent` is the entry point and the main container for the form.
+`DynamicFormComponent` is the entry point and the main container for the form.
@@ -132,9 +137,10 @@ Now that we have defined the complete model we are ready to create components to
-It presents a list of questions, each question bound to a `` component element.
+It presents a list of questions, each bound to a `` component element.
The `` tag matches the `DynamicFormQuestionComponent`,
-the component responsible for rendering the details of each _individual_ question based on values in the data-bound question object.
+the component responsible for rendering the details of each _individual_
+question based on values in the data-bound question object.
@@ -151,26 +157,30 @@ the component responsible for rendering the details of each _individual_ questio
-Notice this component can present any type of question in our model.
-We only have two types of questions at this point but we can imagine many more.
+Notice this component can present any type of question in your model.
+You only have two types of questions at this point but you can imagine many more.
The `ngSwitch` determines which type of question to display.
-In both components we're relying on Angular's **formGroup** to connect the template HTML to the
+In both components you're relying on Angular's **formGroup** to connect the template HTML to the
underlying control objects, populated from the question model with display and validation rules.
-`formControlName` and `formGroup` are directives defined in `ReactiveFormsModule`. Our templates can access these directives directly since we imported `ReactiveFormsModule` from `AppModule`.
-{@a questionnaire-metadata}
+`formControlName` and `formGroup` are directives defined in
+`ReactiveFormsModule`. The templates can access these directives
+directly since you imported `ReactiveFormsModule` from `AppModule`.
+{@a questionnaire-data}
## Questionnaire data
-`DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`.
+`DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`.
+
+ The set of questions you've defined for the job application is returned from the `QuestionService`.
+ In a real app you'd retrieve these questions from storage.
+
+ The key point is that you control the hero job application questions
+ entirely through the objects returned from `QuestionService`.
+ Questionnaire maintenance is a simple matter of adding, updating,
+ and removing objects from the `questions` array.
- The set of questions we have defined for the job application is returned from the `QuestionService`.
- In a real app we'd retrieve these questions from storage.
-
- The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`.
- Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array.
-
@@ -178,7 +188,7 @@ underlying control objects, populated from the question model with display and v
-Finally, we display an instance of the form in the `AppComponent` shell.
+Finally, display an instance of the form in the `AppComponent` shell.
@@ -188,17 +198,18 @@ Finally, we display an instance of the form in the `AppComponent` shell.
{@a dynamic-template}
## Dynamic Template
-Although in this example we're modelling a job application for heroes, there are no references to any specific hero question
-outside the objects returned by `QuestionService`.
+Although in this example you're modelling a job application for heroes, there are
+no references to any specific hero question
+outside the objects returned by `QuestionService`.
-This is very important since it allows us to repurpose the components for any type of survey
-as long as it's compatible with our *question* object model.
-The key is the dynamic data binding of metadata used to render the form
-without making any hardcoded assumptions about specific questions.
-In addition to control metadata, we are also adding validation dynamically.
+This is very important since it allows you to repurpose the components for any type of survey
+as long as it's compatible with the *question* object model.
+The key is the dynamic data binding of metadata used to render the form
+without making any hardcoded assumptions about specific questions.
+In addition to control metadata, you are also adding validation dynamically.
-The *Save* button is disabled until the form is in a valid state.
-When the form is valid, we can click *Save* and the app renders the current form values as JSON.
+The *Save* button is disabled until the form is in a valid state.
+When the form is valid, you can click *Save* and the app renders the current form values as JSON.
This proves that any user input is bound back to the data model.
Saving and retrieving the data is an exercise for another time.
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
index 12195b6ec1..ab2a702ac4 100644
--- a/aio/content/guide/forms.md
+++ b/aio/content/guide/forms.md
@@ -296,6 +296,19 @@ You added a *Submit* button at the bottom with some classes on it for styling.
*You're not using Angular yet*. There are no bindings or extra directives, just layout.
+
+
+
+
+
+In template driven forms, if you've imported `FormsModule`, you don't have to do anything
+to the `
+
+
+
The `container`, `form-group`, `form-control`, and `btn` classes
come from [Twitter Bootstrap](http://getbootstrap.com/css/). These classes are purely cosmetic.
Bootstrap gives the form a little style.
@@ -400,6 +413,42 @@ You left yourself a note to throw it away when you're done.
Focus on the binding syntax: `[(ngModel)]="..."`.
+You need one more addition to display the data. Declare
+a template variable for the form. Update the `