gitextract_1dv_duh0/ ├── .gitattributes ├── 02 - Your First Angular App/ │ └── todo/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── todoItem.ts │ │ │ └── todoList.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 04 - HTML and CSS Primer/ │ └── HtmlCssPrimer/ │ ├── index.html │ └── package.json ├── 05 - JavaScript and TypeScript Primer, Part 1/ │ └── JavaScriptPrimer/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 06 - JavaScript and TypeScript Primer, Part 2/ │ ├── Beginning of Chapter/ │ │ └── JavaScriptPrimer/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── JavaScriptPrimer/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── modules/ │ │ │ ├── DuplicateName.ts │ │ │ └── NameAndWeather.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── tempConverter.ts │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 07 - SportsStore/ │ ├── Beginning of Chapter/ │ │ └── SportsStore/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── browserslist │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── SportsStore/ │ ├── .editorconfig │ ├── angular.json │ ├── authMiddleware.js │ ├── browserslist │ ├── data.js │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── product.repository.ts │ │ │ │ └── static.datasource.ts │ │ │ └── store/ │ │ │ ├── counter.directive.ts │ │ │ ├── store.component.html │ │ │ ├── store.component.ts │ │ │ └── store.module.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 08 - SportsStore - Orders and Checkout/ │ ├── Beginning of Chapter/ │ │ └── SportsStore/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── browserslist │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ └── store/ │ │ │ │ ├── counter.directive.ts │ │ │ │ ├── store.component.html │ │ │ │ ├── store.component.ts │ │ │ │ └── store.module.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── SportsStore/ │ ├── .editorconfig │ ├── angular.json │ ├── authMiddleware.js │ ├── browserslist │ ├── data.js │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── model/ │ │ │ │ ├── cart.model.ts │ │ │ │ ├── model.module.ts │ │ │ │ ├── order.model.ts │ │ │ │ ├── order.repository.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── product.repository.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── store/ │ │ │ │ ├── cartDetail.component.html │ │ │ │ ├── cartDetail.component.ts │ │ │ │ ├── cartSummary.component.html │ │ │ │ ├── cartSummary.component.ts │ │ │ │ ├── checkout.component.css │ │ │ │ ├── checkout.component.html │ │ │ │ ├── checkout.component.ts │ │ │ │ ├── counter.directive.ts │ │ │ │ ├── store.component.html │ │ │ │ ├── store.component.ts │ │ │ │ └── store.module.ts │ │ │ └── storeFirst.guard.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 09 - SportsStore - Admin/ │ ├── Beginning of Chapter/ │ │ └── SportsStore/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── browserslist │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── SportsStore/ │ ├── .editorconfig │ ├── angular.json │ ├── authMiddleware.js │ ├── browserslist │ ├── data.js │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── admin/ │ │ │ │ ├── admin.component.html │ │ │ │ ├── admin.component.ts │ │ │ │ ├── admin.module.ts │ │ │ │ ├── auth.component.html │ │ │ │ ├── auth.component.ts │ │ │ │ ├── auth.guard.ts │ │ │ │ ├── orderTable.component.html │ │ │ │ ├── orderTable.component.ts │ │ │ │ ├── productEditor.component.html │ │ │ │ ├── productEditor.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ └── productTable.component.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── model/ │ │ │ │ ├── auth.service.ts │ │ │ │ ├── cart.model.ts │ │ │ │ ├── model.module.ts │ │ │ │ ├── order.model.ts │ │ │ │ ├── order.repository.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── product.repository.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── store/ │ │ │ │ ├── cartDetail.component.html │ │ │ │ ├── cartDetail.component.ts │ │ │ │ ├── cartSummary.component.html │ │ │ │ ├── cartSummary.component.ts │ │ │ │ ├── checkout.component.css │ │ │ │ ├── checkout.component.html │ │ │ │ ├── checkout.component.ts │ │ │ │ ├── counter.directive.ts │ │ │ │ ├── store.component.html │ │ │ │ ├── store.component.ts │ │ │ │ └── store.module.ts │ │ │ └── storeFirst.guard.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 10 - SportsStore - Deployment/ │ ├── Beginning of Chapter/ │ │ └── SportsStore/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── browserslist │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── admin/ │ │ │ │ │ ├── admin.component.html │ │ │ │ │ ├── admin.component.ts │ │ │ │ │ ├── admin.module.ts │ │ │ │ │ ├── auth.component.html │ │ │ │ │ ├── auth.component.ts │ │ │ │ │ ├── auth.guard.ts │ │ │ │ │ ├── orderTable.component.html │ │ │ │ │ ├── orderTable.component.ts │ │ │ │ │ ├── productEditor.component.html │ │ │ │ │ ├── productEditor.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ └── productTable.component.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── auth.service.ts │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── SportsStore/ │ ├── .dockerignore │ ├── .editorconfig │ ├── Dockerfile │ ├── angular.json │ ├── authMiddleware.js │ ├── browserslist │ ├── data.js │ ├── deploy-package.json │ ├── dist/ │ │ └── SportsStore/ │ │ ├── 3rdpartylicenses.txt │ │ ├── 5-es2015.b2d2985f67757f20fa32.js │ │ ├── 5-es5.b2d2985f67757f20fa32.js │ │ ├── index.html │ │ ├── main-es2015.17a65f3ef96068aef242.js │ │ ├── main-es5.17a65f3ef96068aef242.js │ │ ├── manifest.webmanifest │ │ ├── ngsw-worker.js │ │ ├── ngsw.json │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.ef57c12ac0fc432d4c88.js │ │ ├── runtime-es5.ef57c12ac0fc432d4c88.js │ │ ├── safety-worker.js │ │ └── styles.87fc5b77face4b6618ed.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── ngsw-config.json │ ├── package.json │ ├── server.js │ ├── serverdata.json │ ├── src/ │ │ ├── app/ │ │ │ ├── admin/ │ │ │ │ ├── admin.component.html │ │ │ │ ├── admin.component.ts │ │ │ │ ├── admin.module.ts │ │ │ │ ├── auth.component.html │ │ │ │ ├── auth.component.ts │ │ │ │ ├── auth.guard.ts │ │ │ │ ├── orderTable.component.html │ │ │ │ ├── orderTable.component.ts │ │ │ │ ├── productEditor.component.html │ │ │ │ ├── productEditor.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ └── productTable.component.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── model/ │ │ │ │ ├── auth.service.ts │ │ │ │ ├── cart.model.ts │ │ │ │ ├── connection.service.ts │ │ │ │ ├── model.module.ts │ │ │ │ ├── order.model.ts │ │ │ │ ├── order.repository.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── product.repository.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── store/ │ │ │ │ ├── cartDetail.component.html │ │ │ │ ├── cartDetail.component.ts │ │ │ │ ├── cartSummary.component.html │ │ │ │ ├── cartSummary.component.ts │ │ │ │ ├── checkout.component.css │ │ │ │ ├── checkout.component.html │ │ │ │ ├── checkout.component.ts │ │ │ │ ├── counter.directive.ts │ │ │ │ ├── store.component.html │ │ │ │ ├── store.component.ts │ │ │ │ └── store.module.ts │ │ │ └── storeFirst.guard.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── manifest.webmanifest │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 11 - Angular Projects and Tools/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ └── template.html │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 12 - Using Data Bindings/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ └── template.html │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 13 - Using the Built-In Directives/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ └── template.html │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 14 - Using Events and Forms/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── form.model.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ └── template.html │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 15 - Attribute Directives/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── attr.directive.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── form.model.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ ├── template.html │ │ │ └── twoway.directive.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 16 - Structural Directives/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── template.html │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── attr.directive.ts │ │ │ ├── cellColor.directive.ts │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── form.model.ts │ │ │ ├── iterator.directive.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ ├── structure.directive.ts │ │ │ ├── template.html │ │ │ └── twoway.directive.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 17 - Creating Components/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── attr.directive.ts │ │ │ ├── cellColor.directive.ts │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── form.model.ts │ │ │ ├── iterator.directive.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── product.model.ts │ │ │ ├── productForm.component.css │ │ │ ├── productForm.component.html │ │ │ ├── productForm.component.ts │ │ │ ├── productTable.component.html │ │ │ ├── productTable.component.ts │ │ │ ├── repository.model.ts │ │ │ ├── structure.directive.ts │ │ │ ├── template.html │ │ │ ├── toggleView.component.html │ │ │ ├── toggleView.component.ts │ │ │ └── twoway.directive.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 18 - Using Pipes/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── addTax.pipe.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── attr.directive.ts │ │ │ ├── categoryFilter.pipe.ts │ │ │ ├── cellColor.directive.ts │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── form.model.ts │ │ │ ├── iterator.directive.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── product.model.ts │ │ │ ├── productForm.component.css │ │ │ ├── productForm.component.html │ │ │ ├── productForm.component.ts │ │ │ ├── productTable.component.html │ │ │ ├── productTable.component.ts │ │ │ ├── repository.model.ts │ │ │ ├── structure.directive.ts │ │ │ ├── template.html │ │ │ ├── toggleView.component.html │ │ │ ├── toggleView.component.ts │ │ │ └── twoway.directive.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 19 - Using Services/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── addTax.pipe.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── attr.directive.ts │ │ │ ├── categoryFilter.pipe.ts │ │ │ ├── cellColor.directive.ts │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── discount.pipe.ts │ │ │ ├── discount.service.ts │ │ │ ├── discountAmount.directive.ts │ │ │ ├── discountDisplay.component.ts │ │ │ ├── discountEditor.component.ts │ │ │ ├── form.model.ts │ │ │ ├── iterator.directive.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── product.model.ts │ │ │ ├── productForm.component.css │ │ │ ├── productForm.component.html │ │ │ ├── productForm.component.ts │ │ │ ├── productTable.component.html │ │ │ ├── productTable.component.ts │ │ │ ├── repository.model.ts │ │ │ ├── structure.directive.ts │ │ │ ├── template.html │ │ │ ├── toggleView.component.html │ │ │ ├── toggleView.component.ts │ │ │ └── twoway.directive.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 20 - Using Service Providers/ │ ├── Beginning of Chapter/ │ │ └── example/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ │ └── styles.18138bb15891daf44583.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── discount.pipe.ts │ │ │ │ ├── discount.service.ts │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ ├── discountEditor.component.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── log.service.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── addTax.pipe.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── attr.directive.ts │ │ │ ├── categoryFilter.pipe.ts │ │ │ ├── cellColor.directive.ts │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ ├── component.ts │ │ │ ├── datasource.model.ts │ │ │ ├── discount.pipe.ts │ │ │ ├── discount.service.ts │ │ │ ├── discountAmount.directive.ts │ │ │ ├── discountDisplay.component.ts │ │ │ ├── discountEditor.component.ts │ │ │ ├── form.model.ts │ │ │ ├── iterator.directive.ts │ │ │ ├── limit.formvalidator.ts │ │ │ ├── log.service.ts │ │ │ ├── product.model.ts │ │ │ ├── productForm.component.css │ │ │ ├── productForm.component.html │ │ │ ├── productForm.component.ts │ │ │ ├── productTable.component.html │ │ │ ├── productTable.component.ts │ │ │ ├── repository.model.ts │ │ │ ├── structure.directive.ts │ │ │ ├── template.html │ │ │ ├── toggleView.component.html │ │ │ ├── toggleView.component.ts │ │ │ ├── twoway.directive.ts │ │ │ └── valueDisplay.directive.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 21 - Using and Creating Modules/ │ └── End of Chapter/ │ └── example/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── dist/ │ │ └── example/ │ │ ├── 3rdpartylicenses.txt │ │ ├── index.html │ │ ├── main-es2015.bde05668bf3f8343a347.js │ │ ├── main-es5.bde05668bf3f8343a347.js │ │ ├── polyfills-es2015.ca64e4516afbb1b890d5.js │ │ ├── polyfills-es5.277e2e1d6fb2daf91a5c.js │ │ ├── runtime-es2015.0811dcefd377500b5b1a.js │ │ ├── runtime-es5.0811dcefd377500b5b1a.js │ │ └── styles.18138bb15891daf44583.css │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.module.ts │ │ │ ├── common/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── common.module.ts │ │ │ │ ├── discount.pipe.ts │ │ │ │ ├── discount.service.ts │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── log.service.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── twoway.directive.ts │ │ │ │ └── valueDisplay.directive.ts │ │ │ ├── component.ts │ │ │ ├── components/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── components.module.ts │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ ├── discountEditor.component.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── toggleView.component.html │ │ │ │ └── toggleView.component.ts │ │ │ ├── model/ │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ └── repository.model.ts │ │ │ └── template.html │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 22 - Creating the Example Project/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── core/ │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── table.component.html │ │ │ │ └── table.component.ts │ │ │ ├── messages/ │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ └── model/ │ │ │ ├── model.module.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ └── static.datasource.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 23 - Using Reactive Extensions/ │ ├── Beginning of Chapter/ │ │ └── exampleApp/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── core/ │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.component.html │ │ │ │ └── table.component.ts │ │ │ ├── messages/ │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ └── model/ │ │ │ ├── model.module.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ └── static.datasource.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 24 - Making HTTP Requests/ │ ├── Beginning of Chapter/ │ │ └── exampleApp/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── restData.js │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── core/ │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.component.html │ │ │ │ └── table.component.ts │ │ │ ├── messages/ │ │ │ │ ├── errorHandler.ts │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ └── model/ │ │ │ ├── model.module.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ ├── rest.datasource.ts │ │ │ └── static.datasource.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 25 - Using URL Routing/ │ ├── Beginning of Chapter/ │ │ └── exampleApp/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── restData.js │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── app.routing.ts │ │ │ ├── core/ │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.component.html │ │ │ │ └── table.component.ts │ │ │ ├── messages/ │ │ │ │ ├── errorHandler.ts │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ └── model/ │ │ │ ├── model.module.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ ├── rest.datasource.ts │ │ │ └── static.datasource.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 26 - Using URL Routing - Part 2/ │ ├── Beginning of Chapter/ │ │ └── exampleApp/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── restData.js │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── app.routing.ts │ │ │ ├── core/ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── notFound.component.ts │ │ │ │ ├── productCount.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.component.html │ │ │ │ └── table.component.ts │ │ │ ├── messages/ │ │ │ │ ├── errorHandler.ts │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ └── model/ │ │ │ ├── model.module.ts │ │ │ ├── product.model.ts │ │ │ ├── repository.model.ts │ │ │ ├── rest.datasource.ts │ │ │ └── static.datasource.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 27 - Using URL Routing - Part 3/ │ ├── Beginning of Chapter/ │ │ └── exampleApp/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── restData.js │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── app.routing.ts │ │ │ ├── core/ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── notFound.component.ts │ │ │ │ ├── productCount.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.component.html │ │ │ │ ├── table.component.ts │ │ │ │ └── unsaved.guard.ts │ │ │ ├── load.guard.ts │ │ │ ├── messages/ │ │ │ │ ├── errorHandler.ts │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ ├── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── model.resolver.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── ondemand/ │ │ │ │ ├── first.component.ts │ │ │ │ ├── ondemand.component.html │ │ │ │ ├── ondemand.component.ts │ │ │ │ ├── ondemand.module.ts │ │ │ │ └── second.component.ts │ │ │ └── terms.guard.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 28 - Animations/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── restData.js │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── app.routing.ts │ │ │ ├── core/ │ │ │ │ ├── animationUtils.ts │ │ │ │ ├── categoryCount.component.ts │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── notFound.component.ts │ │ │ │ ├── productCount.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.animations.ts │ │ │ │ ├── table.component.html │ │ │ │ ├── table.component.ts │ │ │ │ └── unsaved.guard.ts │ │ │ ├── load.guard.ts │ │ │ ├── messages/ │ │ │ │ ├── errorHandler.ts │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ ├── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── model.resolver.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── ondemand/ │ │ │ │ ├── first.component.ts │ │ │ │ ├── ondemand.component.html │ │ │ │ ├── ondemand.component.ts │ │ │ │ ├── ondemand.module.ts │ │ │ │ └── second.component.ts │ │ │ └── terms.guard.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── 29 - Unit Testing/ │ ├── Beginning of Chapter/ │ │ └── exampleApp/ │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── browserslist │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── animationUtils.ts │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.animations.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ └── terms.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── End of Chapter/ │ └── exampleApp/ │ ├── .editorconfig │ ├── angular.json │ ├── browserslist │ ├── e2e/ │ │ ├── protractor.conf.js │ │ ├── src/ │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── restData.js │ ├── src/ │ │ ├── app/ │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── app.routing.ts │ │ │ ├── core/ │ │ │ │ ├── animationUtils.ts │ │ │ │ ├── categoryCount.component.ts │ │ │ │ ├── core.module.ts │ │ │ │ ├── form.component.css │ │ │ │ ├── form.component.html │ │ │ │ ├── form.component.ts │ │ │ │ ├── notFound.component.ts │ │ │ │ ├── productCount.component.ts │ │ │ │ ├── sharedState.model.ts │ │ │ │ ├── state.pipe.ts │ │ │ │ ├── table.animations.ts │ │ │ │ ├── table.component.html │ │ │ │ ├── table.component.ts │ │ │ │ └── unsaved.guard.ts │ │ │ ├── load.guard.ts │ │ │ ├── messages/ │ │ │ │ ├── errorHandler.ts │ │ │ │ ├── message.component.html │ │ │ │ ├── message.component.ts │ │ │ │ ├── message.model.ts │ │ │ │ ├── message.module.ts │ │ │ │ └── message.service.ts │ │ │ ├── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── model.resolver.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── ondemand/ │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── first.component.html │ │ │ │ ├── first.component.ts │ │ │ │ ├── ondemand.component.html │ │ │ │ ├── ondemand.component.ts │ │ │ │ ├── ondemand.module.ts │ │ │ │ └── second.component.ts │ │ │ ├── terms.guard.ts │ │ │ └── tests/ │ │ │ ├── app.component.spec.ts │ │ │ ├── attr.directive.spec.ts │ │ │ └── first.component.spec.ts │ │ ├── environments/ │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── Contributing.md ├── LICENSE.txt ├── README.md ├── Update for Angular 10/ │ ├── Chapter 02/ │ │ └── todo/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── todoItem.ts │ │ │ │ └── todoList.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 05/ │ │ └── JavaScriptPrimer/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 06/ │ │ └── JavaScriptPrimer/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── modules/ │ │ │ │ ├── DuplicateName.ts │ │ │ │ └── NameAndWeather.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ ├── tempConverter.ts │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 07/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ └── store/ │ │ │ │ ├── counter.directive.ts │ │ │ │ ├── store.component.html │ │ │ │ ├── store.component.ts │ │ │ │ └── store.module.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 08/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 09/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── admin/ │ │ │ │ │ ├── admin.component.html │ │ │ │ │ ├── admin.component.ts │ │ │ │ │ ├── admin.module.ts │ │ │ │ │ ├── auth.component.html │ │ │ │ │ ├── auth.component.ts │ │ │ │ │ ├── auth.guard.ts │ │ │ │ │ ├── orderTable.component.html │ │ │ │ │ ├── orderTable.component.ts │ │ │ │ │ ├── productEditor.component.html │ │ │ │ │ ├── productEditor.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ └── productTable.component.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── auth.service.ts │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 10/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── ngsw-config.json │ │ ├── package.json │ │ ├── server.js │ │ ├── serverData.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── admin/ │ │ │ │ │ ├── admin.component.html │ │ │ │ │ ├── admin.component.ts │ │ │ │ │ ├── admin.module.ts │ │ │ │ │ ├── auth.component.html │ │ │ │ │ ├── auth.component.ts │ │ │ │ │ ├── auth.guard.ts │ │ │ │ │ ├── orderTable.component.html │ │ │ │ │ ├── orderTable.component.ts │ │ │ │ │ ├── productEditor.component.html │ │ │ │ │ ├── productEditor.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ └── productTable.component.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── auth.service.ts │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── connection.service.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── manifest.webmanifest │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 11/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 12/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 13/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 14/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 15/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── template.html │ │ │ │ └── twoway.directive.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 16/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ └── twoway.directive.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 17/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 18/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 19/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── discount.pipe.ts │ │ │ │ ├── discount.service.ts │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ ├── discountEditor.component.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 20/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── discount.pipe.ts │ │ │ │ ├── discount.service.ts │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ ├── discountEditor.component.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── log.service.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ ├── twoway.directive.ts │ │ │ │ └── valueDisplay.directive.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 21/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.module.ts │ │ │ │ ├── common/ │ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ │ ├── attr.directive.ts │ │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ │ ├── cellColor.directive.ts │ │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ │ ├── common.module.ts │ │ │ │ │ ├── discount.pipe.ts │ │ │ │ │ ├── discount.service.ts │ │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ │ ├── iterator.directive.ts │ │ │ │ │ ├── log.service.ts │ │ │ │ │ ├── structure.directive.ts │ │ │ │ │ ├── twoway.directive.ts │ │ │ │ │ └── valueDisplay.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── components/ │ │ │ │ │ ├── app.component.css │ │ │ │ │ ├── app.component.html │ │ │ │ │ ├── app.component.ts │ │ │ │ │ ├── components.module.ts │ │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ │ ├── discountEditor.component.ts │ │ │ │ │ ├── productForm.component.css │ │ │ │ │ ├── productForm.component.html │ │ │ │ │ ├── productForm.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ ├── productTable.component.ts │ │ │ │ │ ├── toggleView.component.html │ │ │ │ │ └── toggleView.component.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── datasource.model.ts │ │ │ │ │ ├── form.model.ts │ │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ └── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 22/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 23/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 24/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 25/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 26/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 27/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ └── terms.guard.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 28/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── animationUtils.ts │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.animations.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ └── terms.guard.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 29/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── animationUtils.ts │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.animations.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── attr.directive.ts │ │ │ │ │ ├── first.component.html │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ ├── terms.guard.ts │ │ │ │ └── tests/ │ │ │ │ ├── app.component.spec.ts │ │ │ │ ├── attr.directive.spec.ts │ │ │ │ └── first.component.spec.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.base.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── README.md ├── Update for Angular 11/ │ ├── Chapter 02/ │ │ └── todo/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── todoItem.ts │ │ │ │ └── todoList.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 04/ │ │ └── HtmlCssPrimer/ │ │ ├── index.html │ │ └── package.json │ ├── Chapter 05/ │ │ └── JavaScriptPrimer/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 06/ │ │ └── JavaScriptPrimer/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── modules/ │ │ │ │ ├── DuplicateName.ts │ │ │ │ └── NameAndWeather.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ ├── tempConverter.ts │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 07/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ └── store/ │ │ │ │ ├── counter.directive.ts │ │ │ │ ├── store.component.html │ │ │ │ ├── store.component.ts │ │ │ │ └── store.module.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 08/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 09/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── admin/ │ │ │ │ │ ├── admin.component.html │ │ │ │ │ ├── admin.component.ts │ │ │ │ │ ├── admin.module.ts │ │ │ │ │ ├── auth.component.html │ │ │ │ │ ├── auth.component.ts │ │ │ │ │ ├── auth.guard.ts │ │ │ │ │ ├── orderTable.component.html │ │ │ │ │ ├── orderTable.component.ts │ │ │ │ │ ├── productEditor.component.html │ │ │ │ │ ├── productEditor.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ └── productTable.component.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── auth.service.ts │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 10/ │ │ └── SportsStore/ │ │ ├── .browserslistrc │ │ ├── .dockerignore │ │ ├── Dockerfile │ │ ├── angular.json │ │ ├── authMiddleware.js │ │ ├── data.js │ │ ├── deploy-package.json │ │ ├── dist/ │ │ │ └── SportsStore/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── 4.31e080808fcb56f7ac65.js │ │ │ ├── index.html │ │ │ ├── main.51b6248b65201a3b0124.js │ │ │ ├── manifest.webmanifest │ │ │ ├── ngsw-worker.js │ │ │ ├── ngsw.json │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.f31414a4bbd349807336.js │ │ │ ├── safety-worker.js │ │ │ └── styles.e64f6c6459bd207237f5.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── ngsw-config.json │ │ ├── package.json │ │ ├── server.js │ │ ├── serverdata.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── admin/ │ │ │ │ │ ├── admin.component.html │ │ │ │ │ ├── admin.component.ts │ │ │ │ │ ├── admin.module.ts │ │ │ │ │ ├── auth.component.html │ │ │ │ │ ├── auth.component.ts │ │ │ │ │ ├── auth.guard.ts │ │ │ │ │ ├── orderTable.component.html │ │ │ │ │ ├── orderTable.component.ts │ │ │ │ │ ├── productEditor.component.html │ │ │ │ │ ├── productEditor.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ └── productTable.component.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── auth.service.ts │ │ │ │ │ ├── cart.model.ts │ │ │ │ │ ├── connection.service.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── order.model.ts │ │ │ │ │ ├── order.repository.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── product.repository.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── store/ │ │ │ │ │ ├── cartDetail.component.html │ │ │ │ │ ├── cartDetail.component.ts │ │ │ │ │ ├── cartSummary.component.html │ │ │ │ │ ├── cartSummary.component.ts │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── counter.directive.ts │ │ │ │ │ ├── serverdata.json │ │ │ │ │ ├── store.component.html │ │ │ │ │ ├── store.component.ts │ │ │ │ │ └── store.module.ts │ │ │ │ └── storeFirst.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── manifest.webmanifest │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 11/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 12/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 13/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 14/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 15/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── template.html │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 16/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 17/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 18/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 19/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── discount.pipe.ts │ │ │ │ ├── discount.service.ts │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ ├── discountEditor.component.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ └── twoway.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 20/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── attr.directive.ts │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ ├── cellColor.directive.ts │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── datasource.model.ts │ │ │ │ ├── discount.pipe.ts │ │ │ │ ├── discount.service.ts │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ ├── discountEditor.component.ts │ │ │ │ ├── form.model.ts │ │ │ │ ├── iterator.directive.ts │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ ├── log.service.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── productForm.component.css │ │ │ │ ├── productForm.component.html │ │ │ │ ├── productForm.component.ts │ │ │ │ ├── productTable.component.html │ │ │ │ ├── productTable.component.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── structure.directive.ts │ │ │ │ ├── template.html │ │ │ │ ├── toggleView.component.html │ │ │ │ ├── toggleView.component.ts │ │ │ │ ├── twoway.directive.ts │ │ │ │ └── valueDisplay.directive.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 21/ │ │ └── example/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── dist/ │ │ │ └── example/ │ │ │ ├── 3rdpartylicenses.txt │ │ │ ├── index.html │ │ │ ├── main.f78bdaa2683ef468e3b3.js │ │ │ ├── polyfills.bf99d438b005d57b2b31.js │ │ │ ├── runtime.359d5ee4682f20e936e9.js │ │ │ └── styles.51422a5c94b8290ff190.css │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.module.ts │ │ │ │ ├── common/ │ │ │ │ │ ├── addTax.pipe.ts │ │ │ │ │ ├── attr.directive.ts │ │ │ │ │ ├── categoryFilter.pipe.ts │ │ │ │ │ ├── cellColor.directive.ts │ │ │ │ │ ├── cellColorSwitcher.directive.ts │ │ │ │ │ ├── common.module.ts │ │ │ │ │ ├── discount.pipe.ts │ │ │ │ │ ├── discount.service.ts │ │ │ │ │ ├── discountAmount.directive.ts │ │ │ │ │ ├── iterator.directive.ts │ │ │ │ │ ├── log.service.ts │ │ │ │ │ ├── structure.directive.ts │ │ │ │ │ ├── twoway.directive.ts │ │ │ │ │ └── valueDisplay.directive.ts │ │ │ │ ├── component.ts │ │ │ │ ├── components/ │ │ │ │ │ ├── app.component.css │ │ │ │ │ ├── app.component.html │ │ │ │ │ ├── app.component.ts │ │ │ │ │ ├── components.module.ts │ │ │ │ │ ├── discountDisplay.component.ts │ │ │ │ │ ├── discountEditor.component.ts │ │ │ │ │ ├── productForm.component.css │ │ │ │ │ ├── productForm.component.html │ │ │ │ │ ├── productForm.component.ts │ │ │ │ │ ├── productTable.component.html │ │ │ │ │ ├── productTable.component.ts │ │ │ │ │ ├── toggleView.component.html │ │ │ │ │ └── toggleView.component.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── datasource.model.ts │ │ │ │ │ ├── form.model.ts │ │ │ │ │ ├── limit.formvalidator.ts │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ └── repository.model.ts │ │ │ │ └── template.html │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 22/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 23/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 24/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 25/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 26/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ └── table.component.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ └── model/ │ │ │ │ ├── model.module.ts │ │ │ │ ├── product.model.ts │ │ │ │ ├── repository.model.ts │ │ │ │ ├── rest.datasource.ts │ │ │ │ └── static.datasource.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 27/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ └── terms.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 28/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── animationUtils.ts │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.animations.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ └── terms.guard.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ ├── Chapter 29/ │ │ └── exampleApp/ │ │ ├── .browserslistrc │ │ ├── angular.json │ │ ├── e2e/ │ │ │ ├── protractor.conf.js │ │ │ ├── src/ │ │ │ │ ├── app.e2e-spec.ts │ │ │ │ └── app.po.ts │ │ │ └── tsconfig.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── restData.js │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── app.routing.ts │ │ │ │ ├── core/ │ │ │ │ │ ├── animationUtils.ts │ │ │ │ │ ├── categoryCount.component.ts │ │ │ │ │ ├── core.module.ts │ │ │ │ │ ├── form.component.css │ │ │ │ │ ├── form.component.html │ │ │ │ │ ├── form.component.ts │ │ │ │ │ ├── notFound.component.ts │ │ │ │ │ ├── productCount.component.ts │ │ │ │ │ ├── sharedState.model.ts │ │ │ │ │ ├── state.pipe.ts │ │ │ │ │ ├── table.animations.ts │ │ │ │ │ ├── table.component.html │ │ │ │ │ ├── table.component.ts │ │ │ │ │ └── unsaved.guard.ts │ │ │ │ ├── load.guard.ts │ │ │ │ ├── messages/ │ │ │ │ │ ├── errorHandler.ts │ │ │ │ │ ├── message.component.html │ │ │ │ │ ├── message.component.ts │ │ │ │ │ ├── message.model.ts │ │ │ │ │ ├── message.module.ts │ │ │ │ │ └── message.service.ts │ │ │ │ ├── model/ │ │ │ │ │ ├── model.module.ts │ │ │ │ │ ├── model.resolver.ts │ │ │ │ │ ├── product.model.ts │ │ │ │ │ ├── repository.model.ts │ │ │ │ │ ├── rest.datasource.ts │ │ │ │ │ └── static.datasource.ts │ │ │ │ ├── ondemand/ │ │ │ │ │ ├── attr.directive.ts │ │ │ │ │ ├── first.component.html │ │ │ │ │ ├── first.component.ts │ │ │ │ │ ├── ondemand.component.html │ │ │ │ │ ├── ondemand.component.ts │ │ │ │ │ ├── ondemand.module.ts │ │ │ │ │ └── second.component.ts │ │ │ │ ├── terms.guard.ts │ │ │ │ └── tests/ │ │ │ │ ├── app.component.spec.ts │ │ │ │ ├── attr.directive.spec.ts │ │ │ │ └── first.component.spec.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ └── tslint.json │ └── README.md └── corrections+errata.md