Copy disabled (too large)
Download .txt
Showing preview only (22,274K chars total). Download the full file to get everything.
Repository: Apress/pro-angular-9
Branch: master
Commit: 02b37f353b4f
Files: 4488
Total size: 20.2 MB
Directory structure:
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
│ │
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: 02 - Your First Angular App/todo/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: 02 - Your First Angular App/todo/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"todo": {
"projectType": "application",
"schematics": {
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:component": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/todo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "todo:build"
},
"configurations": {
"production": {
"browserTarget": "todo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "todo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "todo:serve"
},
"configurations": {
"production": {
"devServerTarget": "todo:serve:production"
}
}
}
}
}},
"defaultProject": "todo"
}
================================================
FILE: 02 - Your First Angular App/todo/browserslist
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
================================================
FILE: 02 - Your First Angular App/todo/e2e/protractor.conf.js
================================================
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
================================================
FILE: 02 - Your First Angular App/todo/e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('todo app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
================================================
FILE: 02 - Your First Angular App/todo/e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}
================================================
FILE: 02 - Your First Angular App/todo/e2e/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: 02 - Your First Angular App/todo/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/todo'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: 02 - Your First Angular App/todo/package.json
================================================
{
"name": "todo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"bootstrap": "^4.4.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.0",
"@angular/cli": "~9.0.0",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
================================================
FILE: 02 - Your First Angular App/todo/src/app/app.component.css
================================================
================================================
FILE: 02 - Your First Angular App/todo/src/app/app.component.html
================================================
<h3 class="bg-primary text-center text-white p-2">
{{ username }}'s To Do List
<h6 class="mt-1">{{ itemCount }} {{ showComplete ? "" : "Incomplete" }} Items</h6>
</h3>
<div class="container-fluid">
<div class="row">
<div class="col">
<input class="form-control" placeholder="Enter task here" #todoText />
</div>
<div class="col-auto">
<button class="btn btn-primary" (click)="addItem(todoText.value)">
Add
</button>
</div>
</div>
</div>
<div class="m-2">
<table class="table table-striped table-bordered table-sm">
<thead>
<tr><th>#</th><th>Description</th><th>Done</th></tr>
</thead>
<tbody>
<tr *ngFor="let item of items; let i = index">
<td>{{ i + 1 }}</td>
<td>{{ item.task }}</td>
<td><input type="checkbox" [(ngModel)]="item.complete" /></td>
<!-- <td [ngSwitch]="item.complete">
<span *ngSwitchCase="true">Yes</span>
<span *ngSwitchDefault>No</span>
</td> -->
</tr>
</tbody>
</table>
</div>
<div class="bg-secondary text-white text-center p-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" [(ngModel)]="showComplete" />
<label class="form-check-label" for="defaultCheck1">
Show Completed Tasks
</label>
</div>
</div>
================================================
FILE: 02 - Your First Angular App/todo/src/app/app.component.ts
================================================
import { Component } from '@angular/core';
import { TodoList } from "./todoList";
import { TodoItem } from "./todoItem";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private list = new TodoList("Bob", [
new TodoItem("Go for run", true),
new TodoItem("Get flowers"),
new TodoItem("Collect tickets"),
]);
get username(): string {
return this.list.user;
}
get itemCount(): number {
return this.items.length;
}
get items(): readonly TodoItem[] {
return this.list.items.filter(item => this.showComplete || !item.complete);
}
addItem(newItem) {
if (newItem != "") {
this.list.addItem(newItem);
}
}
showComplete: boolean = false;
}
================================================
FILE: 02 - Your First Angular App/todo/src/app/app.module.ts
================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
================================================
FILE: 02 - Your First Angular App/todo/src/app/todoItem.ts
================================================
export class TodoItem {
constructor(taskVal: string, completeVal: boolean = false) {
this.task = taskVal;
this.complete = completeVal;
}
task: string;
complete: boolean;
}
================================================
FILE: 02 - Your First Angular App/todo/src/app/todoList.ts
================================================
import { TodoItem } from "./todoItem";
export class TodoList {
constructor(public user: string, private todoItems: TodoItem[] = []) {
// no statements required
}
get items(): readonly TodoItem[] {
return this.todoItems;
}
addItem(task: string) {
this.todoItems.push(new TodoItem(task));
}
}
================================================
FILE: 02 - Your First Angular App/todo/src/environments/environment.prod.ts
================================================
export const environment = {
production: true
};
================================================
FILE: 02 - Your First Angular App/todo/src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
================================================
FILE: 02 - Your First Angular App/todo/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
================================================
FILE: 02 - Your First Angular App/todo/src/main.ts
================================================
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
================================================
FILE: 02 - Your First Angular App/todo/src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: 02 - Your First Angular App/todo/src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */
================================================
FILE: 02 - Your First Angular App/todo/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: 02 - Your First Angular App/todo/tsconfig.app.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
================================================
FILE: 02 - Your First Angular App/todo/tsconfig.json
================================================
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
================================================
FILE: 02 - Your First Angular App/todo/tsconfig.spec.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
================================================
FILE: 02 - Your First Angular App/todo/tslint.json
================================================
{
"extends": "tslint:recommended",
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
},
"rulesDirectory": [
"codelyzer"
]
}
================================================
FILE: 04 - HTML and CSS Primer/HtmlCssPrimer/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>ToDo</title>
<meta charset="utf-8" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body class="m-1">
<h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<form>
<div class="form-group">
<label>Task</label>
<input class="form-control" />
</div>
<div class="form-group">
<label>Location</label>
<input class="form-control" />
</div>
<div class="form-group">
<input type="checkbox" />
<label>Done</label>
</div>
<button class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-8">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
================================================
FILE: 04 - HTML and CSS Primer/HtmlCssPrimer/package.json
================================================
{
"dependencies": {
"bootstrap": "4.4.1"
}
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"JavaScriptPrimer": {
"projectType": "application",
"schematics": {
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:component": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/JavaScriptPrimer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "JavaScriptPrimer:build"
},
"configurations": {
"production": {
"browserTarget": "JavaScriptPrimer:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "JavaScriptPrimer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "JavaScriptPrimer:serve"
},
"configurations": {
"production": {
"devServerTarget": "JavaScriptPrimer:serve:production"
}
}
}
}
}},
"defaultProject": "JavaScriptPrimer"
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/browserslist
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/protractor.conf.js
================================================
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('JavaScriptPrimer app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/JavaScriptPrimer'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/package.json
================================================
{
"name": "java-script-primer",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.0",
"@angular/cli": "~9.0.0",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.css
================================================
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.html
================================================
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
height: 60px;
margin: -8px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(black, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<div class="card-container">
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<span>Learn Angular</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
<span>CLI Documentation</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Angular Blog</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>Next Steps</h2>
<p>What do you want to do next with your app?</p>
<input type="hidden" #selection>
<div class="card-container">
<div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>New Component</span>
</div>
<div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Angular Material</span>
</div>
<div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add PWA Support</span>
</div>
<div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add Dependency</span>
</div>
<div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Run and Watch Tests</span>
</div>
<div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Build for Production</span>
</div>
</div>
<!-- Terminal -->
<div class="terminal" [ngSwitch]="selection.value">
<pre *ngSwitchDefault>ng generate component xyz</pre>
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
<pre *ngSwitchCase="'test'">ng test</pre>
<pre *ngSwitchCase="'build'">ng build --prod</pre>
</div>
<!-- Links -->
<div class="card-container">
<a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank" rel="noopener">
<svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453" viewBox="0 0 21.813 23.453">
<path id="Path_15" data-name="Path 15" d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
<path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
<path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
<path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
<path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/>
</svg>
</a>
<a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
<svg alt="Angular CLI Logo" xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447" viewBox="0 0 21.762 23.447">
<g id="Group_21" data-name="Group 21" transform="translate(0)">
<path id="Path_20" data-name="Path 20" d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-2649.48 -313.618)" fill="#37474f"/>
<path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-2731.05 -313.618)" fill="#263238"/>
<path id="Path_22" data-name="Path 22" d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z" transform="translate(-2687.274 -362.17)" fill="#fff"/>
<path id="Path_23" data-name="Path 23" d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z" transform="translate(-2702.289 -380.631)" fill="#fff"/>
<rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469" transform="translate(9.709 13.744)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
<svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>
</clipPath>
</defs>
<g id="Group_25" data-name="Group 25" transform="translate(0)">
<path id="Path_24" data-name="Path 24" d="M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-3769.274 -311.417)" fill="#4a3493"/>
<path id="Path_25" data-name="Path 25" d="M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-3851.207 -311.417)" fill="#311b92"/>
<g id="Group_24" data-name="Group 24" transform="translate(6.194 6.73)" opacity="0.5">
<g id="Group_23" data-name="Group 23" transform="translate(0 0)">
<g id="Group_22" data-name="Group 22" clip-path="url(#clip-path)">
<path id="Path_26" data-name="Path 26" d="M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3822.107 -368.821)" fill="#fff"/>
</g>
</g>
</g>
<path id="Path_27" data-name="Path 27" d="M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3814.311 -359.969)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
<svg alt="Angular Protractor Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<g id="Group_26" data-name="Group 26" transform="translate(0)">
<path id="Path_28" data-name="Path 28" d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-4609.274 -311.417)" fill="#e13439"/>
<path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
<path id="Path_30" data-name="Path 30" d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z" transform="translate(-4634.008 -355.852)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
<svg alt="Meetup Logo" xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
</svg>
</a>
<a class="circle-link" title="Join the Conversation on Gitter" href="https://gitter.im/angular/angular" target="_blank" rel="noopener">
<svg alt="Gitter Logo" xmlns="http://www.w3.org/2000/svg" width="19.447" height="19.447" viewBox="0 0 19.447 19.447">
<g id="Group_40" data-name="Group 40" transform="translate(-1612 -405)">
<rect id="Rectangle_19" data-name="Rectangle 19" width="19.447" height="19.447" transform="translate(1612 405)" fill="#e60257"/>
<g id="gitter" transform="translate(1617.795 408.636)">
<g id="Group_33" data-name="Group 33" transform="translate(0 0)">
<rect id="Rectangle_15" data-name="Rectangle 15" width="1.04" height="9.601" transform="translate(2.304 2.324)" fill="#fff"/>
<rect id="Rectangle_16" data-name="Rectangle 16" width="1.04" height="9.601" transform="translate(4.607 2.324)" fill="#fff"/>
<rect id="Rectangle_17" data-name="Rectangle 17" width="1.04" height="4.648" transform="translate(6.91 2.324)" fill="#fff"/>
<rect id="Rectangle_18" data-name="Rectangle 18" width="1.04" height="6.971" transform="translate(0 0)" fill="#fff"/>
</g>
</g>
</g>
</svg>
</a>
</div>
<!-- Footer -->
<footer>
Love Angular?
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
<div class="github-star-badge">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
Star
</div>
</a>
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</footer>
<svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.ts
================================================
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'JavaScriptPrimer';
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.module.ts
================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/environments/environment.prod.ts
================================================
export const environment = {
production: true
};
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScriptPrimer</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/main.ts
================================================
let products = [
{ name: "Hat", price: 24.5, stock: 10 },
{ name: "Kayak", price: 289.99, stock: 1 },
{ name: "Soccer Ball", price: 10, stock: 0 },
{ name: "Running Shoes", price: 116.50, stock: 20 }
];
let totalValue = products
.filter(item => item.stock > 0)
.reduce((prev, item) => prev + (item.price * item.stock), 0);
console.log("Total value: $" + totalValue.toFixed(2));
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tsconfig.app.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tsconfig.json
================================================
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tsconfig.spec.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
================================================
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tslint.json
================================================
{
"extends": "tslint:recommended",
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
},
"rulesDirectory": [
"codelyzer"
]
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"JavaScriptPrimer": {
"projectType": "application",
"schematics": {
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:component": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/JavaScriptPrimer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "JavaScriptPrimer:build"
},
"configurations": {
"production": {
"browserTarget": "JavaScriptPrimer:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "JavaScriptPrimer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "JavaScriptPrimer:serve"
},
"configurations": {
"production": {
"devServerTarget": "JavaScriptPrimer:serve:production"
}
}
}
}
}},
"defaultProject": "JavaScriptPrimer"
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/browserslist
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/protractor.conf.js
================================================
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('JavaScriptPrimer app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/JavaScriptPrimer'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/package.json
================================================
{
"name": "java-script-primer",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.0",
"@angular/cli": "~9.0.0",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.css
================================================
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.html
================================================
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
height: 60px;
margin: -8px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(black, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<div class="card-container">
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<span>Learn Angular</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
<span>CLI Documentation</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Angular Blog</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>Next Steps</h2>
<p>What do you want to do next with your app?</p>
<input type="hidden" #selection>
<div class="card-container">
<div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>New Component</span>
</div>
<div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Angular Material</span>
</div>
<div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add PWA Support</span>
</div>
<div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add Dependency</span>
</div>
<div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Run and Watch Tests</span>
</div>
<div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Build for Production</span>
</div>
</div>
<!-- Terminal -->
<div class="terminal" [ngSwitch]="selection.value">
<pre *ngSwitchDefault>ng generate component xyz</pre>
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
<pre *ngSwitchCase="'test'">ng test</pre>
<pre *ngSwitchCase="'build'">ng build --prod</pre>
</div>
<!-- Links -->
<div class="card-container">
<a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank" rel="noopener">
<svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453" viewBox="0 0 21.813 23.453">
<path id="Path_15" data-name="Path 15" d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
<path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
<path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
<path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
<path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/>
</svg>
</a>
<a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
<svg alt="Angular CLI Logo" xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447" viewBox="0 0 21.762 23.447">
<g id="Group_21" data-name="Group 21" transform="translate(0)">
<path id="Path_20" data-name="Path 20" d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-2649.48 -313.618)" fill="#37474f"/>
<path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-2731.05 -313.618)" fill="#263238"/>
<path id="Path_22" data-name="Path 22" d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z" transform="translate(-2687.274 -362.17)" fill="#fff"/>
<path id="Path_23" data-name="Path 23" d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z" transform="translate(-2702.289 -380.631)" fill="#fff"/>
<rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469" transform="translate(9.709 13.744)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
<svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>
</clipPath>
</defs>
<g id="Group_25" data-name="Group 25" transform="translate(0)">
<path id="Path_24" data-name="Path 24" d="M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-3769.274 -311.417)" fill="#4a3493"/>
<path id="Path_25" data-name="Path 25" d="M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-3851.207 -311.417)" fill="#311b92"/>
<g id="Group_24" data-name="Group 24" transform="translate(6.194 6.73)" opacity="0.5">
<g id="Group_23" data-name="Group 23" transform="translate(0 0)">
<g id="Group_22" data-name="Group 22" clip-path="url(#clip-path)">
<path id="Path_26" data-name="Path 26" d="M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3822.107 -368.821)" fill="#fff"/>
</g>
</g>
</g>
<path id="Path_27" data-name="Path 27" d="M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3814.311 -359.969)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
<svg alt="Angular Protractor Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<g id="Group_26" data-name="Group 26" transform="translate(0)">
<path id="Path_28" data-name="Path 28" d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-4609.274 -311.417)" fill="#e13439"/>
<path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
<path id="Path_30" data-name="Path 30" d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z" transform="translate(-4634.008 -355.852)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
<svg alt="Meetup Logo" xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
</svg>
</a>
<a class="circle-link" title="Join the Conversation on Gitter" href="https://gitter.im/angular/angular" target="_blank" rel="noopener">
<svg alt="Gitter Logo" xmlns="http://www.w3.org/2000/svg" width="19.447" height="19.447" viewBox="0 0 19.447 19.447">
<g id="Group_40" data-name="Group 40" transform="translate(-1612 -405)">
<rect id="Rectangle_19" data-name="Rectangle 19" width="19.447" height="19.447" transform="translate(1612 405)" fill="#e60257"/>
<g id="gitter" transform="translate(1617.795 408.636)">
<g id="Group_33" data-name="Group 33" transform="translate(0 0)">
<rect id="Rectangle_15" data-name="Rectangle 15" width="1.04" height="9.601" transform="translate(2.304 2.324)" fill="#fff"/>
<rect id="Rectangle_16" data-name="Rectangle 16" width="1.04" height="9.601" transform="translate(4.607 2.324)" fill="#fff"/>
<rect id="Rectangle_17" data-name="Rectangle 17" width="1.04" height="4.648" transform="translate(6.91 2.324)" fill="#fff"/>
<rect id="Rectangle_18" data-name="Rectangle 18" width="1.04" height="6.971" transform="translate(0 0)" fill="#fff"/>
</g>
</g>
</g>
</svg>
</a>
</div>
<!-- Footer -->
<footer>
Love Angular?
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
<div class="github-star-badge">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
Star
</div>
</a>
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</footer>
<svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.ts
================================================
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'JavaScriptPrimer';
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.module.ts
================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/environments/environment.prod.ts
================================================
export const environment = {
production: true
};
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScriptPrimer</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/main.ts
================================================
let products = [
{ name: "Hat", price: 24.5, stock: 10 },
{ name: "Kayak", price: 289.99, stock: 1 },
{ name: "Soccer Ball", price: 10, stock: 0 },
{ name: "Running Shoes", price: 116.50, stock: 20 }
];
let totalValue = products
.filter(item => item.stock > 0)
.reduce((prev, item) => prev + (item.price * item.stock), 0);
console.log("Total value: $" + totalValue.toFixed(2));
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tsconfig.app.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tsconfig.json
================================================
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tsconfig.spec.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tslint.json
================================================
{
"extends": "tslint:recommended",
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
},
"rulesDirectory": [
"codelyzer"
]
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"JavaScriptPrimer": {
"projectType": "application",
"schematics": {
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:component": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/JavaScriptPrimer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "JavaScriptPrimer:build"
},
"configurations": {
"production": {
"browserTarget": "JavaScriptPrimer:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "JavaScriptPrimer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "JavaScriptPrimer:serve"
},
"configurations": {
"production": {
"devServerTarget": "JavaScriptPrimer:serve:production"
}
}
}
}
}},
"defaultProject": "JavaScriptPrimer"
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/browserslist
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/protractor.conf.js
================================================
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('JavaScriptPrimer app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/JavaScriptPrimer'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/package.json
================================================
{
"name": "java-script-primer",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.0",
"@angular/cli": "~9.0.0",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.css
================================================
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.html
================================================
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
height: 60px;
margin: -8px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(black, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<div class="card-container">
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<span>Learn Angular</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
<span>CLI Documentation</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Angular Blog</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>Next Steps</h2>
<p>What do you want to do next with your app?</p>
<input type="hidden" #selection>
<div class="card-container">
<div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>New Component</span>
</div>
<div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Angular Material</span>
</div>
<div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add PWA Support</span>
</div>
<div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add Dependency</span>
</div>
<div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Run and Watch Tests</span>
</div>
<div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Build for Production</span>
</div>
</div>
<!-- Terminal -->
<div class="terminal" [ngSwitch]="selection.value">
<pre *ngSwitchDefault>ng generate component xyz</pre>
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
<pre *ngSwitchCase="'test'">ng test</pre>
<pre *ngSwitchCase="'build'">ng build --prod</pre>
</div>
<!-- Links -->
<div class="card-container">
<a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank" rel="noopener">
<svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453" viewBox="0 0 21.813 23.453">
<path id="Path_15" data-name="Path 15" d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
<path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
<path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
<path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
<path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/>
</svg>
</a>
<a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
<svg alt="Angular CLI Logo" xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447" viewBox="0 0 21.762 23.447">
<g id="Group_21" data-name="Group 21" transform="translate(0)">
<path id="Path_20" data-name="Path 20" d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-2649.48 -313.618)" fill="#37474f"/>
<path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-2731.05 -313.618)" fill="#263238"/>
<path id="Path_22" data-name="Path 22" d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z" transform="translate(-2687.274 -362.17)" fill="#fff"/>
<path id="Path_23" data-name="Path 23" d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z" transform="translate(-2702.289 -380.631)" fill="#fff"/>
<rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469" transform="translate(9.709 13.744)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
<svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>
</clipPath>
</defs>
<g id="Group_25" data-name="Group 25" transform="translate(0)">
<path id="Path_24" data-name="Path 24" d="M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-3769.274 -311.417)" fill="#4a3493"/>
<path id="Path_25" data-name="Path 25" d="M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-3851.207 -311.417)" fill="#311b92"/>
<g id="Group_24" data-name="Group 24" transform="translate(6.194 6.73)" opacity="0.5">
<g id="Group_23" data-name="Group 23" transform="translate(0 0)">
<g id="Group_22" data-name="Group 22" clip-path="url(#clip-path)">
<path id="Path_26" data-name="Path 26" d="M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3822.107 -368.821)" fill="#fff"/>
</g>
</g>
</g>
<path id="Path_27" data-name="Path 27" d="M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3814.311 -359.969)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
<svg alt="Angular Protractor Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<g id="Group_26" data-name="Group 26" transform="translate(0)">
<path id="Path_28" data-name="Path 28" d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-4609.274 -311.417)" fill="#e13439"/>
<path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
<path id="Path_30" data-name="Path 30" d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z" transform="translate(-4634.008 -355.852)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
<svg alt="Meetup Logo" xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
</svg>
</a>
<a class="circle-link" title="Join the Conversation on Gitter" href="https://gitter.im/angular/angular" target="_blank" rel="noopener">
<svg alt="Gitter Logo" xmlns="http://www.w3.org/2000/svg" width="19.447" height="19.447" viewBox="0 0 19.447 19.447">
<g id="Group_40" data-name="Group 40" transform="translate(-1612 -405)">
<rect id="Rectangle_19" data-name="Rectangle 19" width="19.447" height="19.447" transform="translate(1612 405)" fill="#e60257"/>
<g id="gitter" transform="translate(1617.795 408.636)">
<g id="Group_33" data-name="Group 33" transform="translate(0 0)">
<rect id="Rectangle_15" data-name="Rectangle 15" width="1.04" height="9.601" transform="translate(2.304 2.324)" fill="#fff"/>
<rect id="Rectangle_16" data-name="Rectangle 16" width="1.04" height="9.601" transform="translate(4.607 2.324)" fill="#fff"/>
<rect id="Rectangle_17" data-name="Rectangle 17" width="1.04" height="4.648" transform="translate(6.91 2.324)" fill="#fff"/>
<rect id="Rectangle_18" data-name="Rectangle 18" width="1.04" height="6.971" transform="translate(0 0)" fill="#fff"/>
</g>
</g>
</g>
</svg>
</a>
</div>
<!-- Footer -->
<footer>
Love Angular?
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
<div class="github-star-badge">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
Star
</div>
</a>
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</footer>
<svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.ts
================================================
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'JavaScriptPrimer';
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.module.ts
================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/environments/environment.prod.ts
================================================
export const environment = {
production: true
};
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScriptPrimer</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/main.ts
================================================
import { Name, WeatherLocation } from "./modules/NameAndWeather";
import { Name as OtherName } from "./modules/DuplicateName";
import { TempConverter } from "./tempConverter";
let cities: { [index: string]: [string, string] } = {};
cities["London"] = ["raining", TempConverter.convertFtoC("38")];
cities["Paris"] = ["sunny", TempConverter.convertFtoC("52")];
cities["Berlin"] = ["snowing", TempConverter.convertFtoC("23")];
for (let key in cities) {
console.log(`${key}: ${cities[key][0]}, ${cities[key][1]}`);
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/modules/DuplicateName.ts
================================================
export class Name {
get message() {
return "Other Name";
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/modules/NameAndWeather.ts
================================================
export class Name {
constructor(private first: string, private second: string) {}
get nameMessage() : string {
return `Hello ${this.first} ${this.second}`;
}
}
export class WeatherLocation {
constructor(private weather: string, private city: string) {}
get weatherMessage() : string {
return `It is ${this.weather} in ${this.city}`;
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/tempConverter.ts
================================================
export class TempConverter {
static convertFtoC(temp: any): string {
let value: number;
if ((temp as number).toPrecision) {
value = temp;
} else if ((temp as string).indexOf) {
value = parseFloat(<string>temp);
} else {
value = 0;
}
return TempConverter.performCalculation(value).toFixed(1);
}
private static performCalculation(value: number): number {
return (parseFloat(value.toPrecision(2)) - 32) / 1.8;
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tsconfig.app.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tsconfig.json
================================================
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tsconfig.spec.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
================================================
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tslint.json
================================================
{
"extends": "tslint:recommended",
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
},
"rulesDirectory": [
"codelyzer"
]
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"SportsStore": {
"projectType": "application",
"schematics": {
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:component": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/SportsStore",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "SportsStore:build"
},
"configurations": {
"production": {
"browserTarget": "SportsStore:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "SportsStore:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "SportsStore:serve"
},
"configurations": {
"production": {
"devServerTarget": "SportsStore:serve:production"
}
}
}
}
}},
"defaultProject": "SportsStore"
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/authMiddleware.js
================================================
const jwt = require("jsonwebtoken");
const APP_SECRET = "myappsecret";
const USERNAME = "admin";
const PASSWORD = "secret";
const mappings = {
get: ["/api/orders", "/orders"],
post: ["/api/products", "/products", "/api/categories", "/categories"]
}
function requiresAuth(method, url) {
return (mappings[method.toLowerCase()] || [])
.find(p => url.startsWith(p)) !== undefined;
}
module.exports = function (req, res, next) {
if (req.url.endsWith("/login") && req.method == "POST") {
if (req.body && req.body.name == USERNAME && req.body.password == PASSWORD) {
let token = jwt.sign({ data: USERNAME, expiresIn: "1h" }, APP_SECRET);
res.json({ success: true, token: token });
} else {
res.json({ success: false });
}
res.end();
return;
} else if (requiresAuth(req.method, req.url)) {
let token = req.headers["authorization"] || "";
if (token.startsWith("Bearer<")) {
token = token.substring(7, token.length - 1);
try {
jwt.verify(token, APP_SECRET);
next();
return;
} catch (err) { }
}
res.statusCode = 401;
res.end();
return;
}
next();
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/browserslist
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/data.js
================================================
module.exports = function () {
return {
products: [
{ id: 1, name: "Kayak", category: "Watersports",
description: "A boat for one person", price: 275 },
{ id: 2, name: "Lifejacket", category: "Watersports",
description: "Protective and fashionable", price: 48.95 },
{ id: 3, name: "Soccer Ball", category: "Soccer",
description: "FIFA-approved size and weight", price: 19.50 },
{ id: 4, name: "Corner Flags", category: "Soccer",
description: "Give your playing field a professional touch",
price: 34.95 },
{ id: 5, name: "Stadium", category: "Soccer",
description: "Flat-packed 35,000-seat stadium", price: 79500 },
{ id: 6, name: "Thinking Cap", category: "Chess",
description: "Improve brain efficiency by 75%", price: 16 },
{ id: 7, name: "Unsteady Chair", category: "Chess",
description: "Secretly give your opponent a disadvantage",
price: 29.95 },
{ id: 8, name: "Human Chess Board", category: "Chess",
description: "A fun game for the family", price: 75 },
{ id: 9, name: "Bling Bling King", category: "Chess",
description: "Gold-plated, diamond-studded King", price: 1200 }
],
orders: []
}
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/e2e/protractor.conf.js
================================================
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('SportsStore app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/e2e/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/SportsStore'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/package.json
================================================
{
"name": "sports-store",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"json": "json-server data.js -p 3500 -m authMiddleware.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"@fortawesome/fontawesome-free": "^5.12.1",
"bootstrap": "^4.4.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.0",
"@angular/cli": "~9.0.0",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.16.0",
"jsonwebtoken": "^8.5.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.component.css
================================================
================================================
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.component.html
================================================
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
height: 60px;
margin: -8px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 32px auto;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(black, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<div class="card-container">
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<span>Learn Angular</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
<span>CLI Documentation</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Angular Blog</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>Next Steps</h2>
<p>What do you want to do next with your app?</p>
<input type="hidden" #selection>
<div class="card-container">
<div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>New Component</span>
</div>
<div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Angular Material</span>
</div>
<div class="card card-small" (click)="selection
Showing preview only (271K chars total). Download the full file or copy to clipboard to get everything.
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 │ │
Copy disabled (too large)
Download .txt
Showing preview only (24,048K chars total). Download the full file to get everything.
SYMBOL INDEX (41126 symbols across 1935 files)
FILE: 02 - Your First Angular App/todo/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 02 - Your First Angular App/todo/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 02 - Your First Angular App/todo/src/app/app.component.ts
class AppComponent (line 10) | class AppComponent {
method username (line 17) | get username(): string {
method itemCount (line 21) | get itemCount(): number {
method items (line 25) | get items(): readonly TodoItem[] {
method addItem (line 29) | addItem(newItem) {
FILE: 02 - Your First Angular App/todo/src/app/app.module.ts
class AppModule (line 17) | class AppModule { }
FILE: 02 - Your First Angular App/todo/src/app/todoItem.ts
class TodoItem (line 1) | class TodoItem {
method constructor (line 3) | constructor(taskVal: string, completeVal: boolean = false) {
FILE: 02 - Your First Angular App/todo/src/app/todoList.ts
class TodoList (line 3) | class TodoList {
method constructor (line 5) | constructor(public user: string, private todoItems: TodoItem[] = []) {
method items (line 9) | get items(): readonly TodoItem[] {
method addItem (line 13) | addItem(task: string) {
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: 05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.module.ts
class AppModule (line 16) | class AppModule { }
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.module.ts
class AppModule (line 16) | class AppModule { }
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.module.ts
class AppModule (line 16) | class AppModule { }
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/modules/DuplicateName.ts
class Name (line 1) | class Name {
method message (line 3) | get message() {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/modules/NameAndWeather.ts
class Name (line 1) | class Name {
method constructor (line 3) | constructor(private first: string, private second: string) {}
method nameMessage (line 5) | get nameMessage() : string {
class WeatherLocation (line 10) | class WeatherLocation {
method constructor (line 12) | constructor(private weather: string, private city: string) {}
method weatherMessage (line 14) | get weatherMessage() : string {
FILE: 06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/tempConverter.ts
class TempConverter (line 1) | class TempConverter {
method convertFtoC (line 3) | static convertFtoC(temp: any): string {
method performCalculation (line 15) | private static performCalculation(value: number): number {
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: 07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 16) | class AppModule { }
FILE: 07 - SportsStore/End of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 07 - SportsStore/End of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 07 - SportsStore/End of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 7) | class AppComponent { }
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 11) | class AppModule { }
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/model/model.module.ts
class ModelModule (line 8) | class ModelModule { }
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/model/product.model.ts
class Product (line 1) | class Product {
method constructor (line 3) | constructor(
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/model/product.repository.ts
class ProductRepository (line 6) | class ProductRepository {
method constructor (line 10) | constructor(private dataSource: StaticDataSource) {
method getProducts (line 18) | getProducts(category: string = null): Product[] {
method getProduct (line 23) | getProduct(id: number): Product {
method getCategories (line 27) | getCategories(): string[] {
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/model/static.datasource.ts
class StaticDataSource (line 6) | class StaticDataSource {
method getProducts (line 25) | getProducts(): Observable<Product[]> {
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/store/counter.directive.ts
class CounterDirective (line 8) | class CounterDirective {
method constructor (line 10) | constructor(private container: ViewContainerRef,
method ngOnChanges (line 17) | ngOnChanges(changes: SimpleChanges) {
class CounterDirectiveContext (line 26) | class CounterDirectiveContext {
method constructor (line 27) | constructor(public $implicit: any) { }
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/store/store.component.ts
class StoreComponent (line 9) | class StoreComponent {
method constructor (line 14) | constructor(private repository: ProductRepository) {}
method products (line 16) | get products(): Product[] {
method categories (line 22) | get categories(): string[] {
method changeCategory (line 26) | changeCategory(newCategory?: string) {
method changePage (line 30) | changePage(newPage: number) {
method changePageSize (line 34) | changePageSize(newSize: number) {
method pageCount (line 39) | get pageCount(): number {
FILE: 07 - SportsStore/End of Chapter/SportsStore/src/app/store/store.module.ts
class StoreModule (line 13) | class StoreModule { }
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 7) | class AppComponent { }
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 11) | class AppModule { }
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/model.module.ts
class ModelModule (line 8) | class ModelModule { }
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/product.model.ts
class Product (line 1) | class Product {
method constructor (line 3) | constructor(
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/product.repository.ts
class ProductRepository (line 6) | class ProductRepository {
method constructor (line 10) | constructor(private dataSource: StaticDataSource) {
method getProducts (line 18) | getProducts(category: string = null): Product[] {
method getProduct (line 23) | getProduct(id: number): Product {
method getCategories (line 27) | getCategories(): string[] {
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/static.datasource.ts
class StaticDataSource (line 6) | class StaticDataSource {
method getProducts (line 25) | getProducts(): Observable<Product[]> {
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/counter.directive.ts
class CounterDirective (line 8) | class CounterDirective {
method constructor (line 10) | constructor(private container: ViewContainerRef,
method ngOnChanges (line 17) | ngOnChanges(changes: SimpleChanges) {
class CounterDirectiveContext (line 26) | class CounterDirectiveContext {
method constructor (line 27) | constructor(public $implicit: any) { }
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/store.component.ts
class StoreComponent (line 9) | class StoreComponent {
method constructor (line 14) | constructor(private repository: ProductRepository) {}
method products (line 16) | get products(): Product[] {
method categories (line 22) | get categories(): string[] {
method changeCategory (line 26) | changeCategory(newCategory?: string) {
method changePage (line 30) | changePage(newPage: number) {
method changePageSize (line 34) | changePageSize(newSize: number) {
method pageCount (line 39) | get pageCount(): number {
FILE: 08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/store.module.ts
class StoreModule (line 13) | class StoreModule { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 7) | class AppComponent { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 32) | class AppModule { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/cart.model.ts
class Cart (line 5) | class Cart {
method addLine (line 10) | addLine(product: Product, quantity: number = 1) {
method updateQuantity (line 20) | updateQuantity(product: Product, quantity: number) {
method removeLine (line 28) | removeLine(id: number) {
method clear (line 34) | clear() {
method recalculate (line 40) | private recalculate() {
class CartLine (line 50) | class CartLine {
method constructor (line 52) | constructor(public product: Product,
method lineTotal (line 55) | get lineTotal() {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/model.module.ts
class ModelModule (line 15) | class ModelModule { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/order.model.ts
class Order (line 5) | class Order {
method constructor (line 15) | constructor(public cart: Cart) { }
method clear (line 17) | clear() {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/order.repository.ts
class OrderRepository (line 7) | class OrderRepository {
method constructor (line 10) | constructor(private dataSource: StaticDataSource) {}
method getOrders (line 12) | getOrders(): Order[] {
method saveOrder (line 16) | saveOrder(order: Order): Observable<Order> {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/product.model.ts
class Product (line 1) | class Product {
method constructor (line 3) | constructor(
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/product.repository.ts
class ProductRepository (line 6) | class ProductRepository {
method constructor (line 10) | constructor(private dataSource: StaticDataSource) {
method getProducts (line 18) | getProducts(category: string = null): Product[] {
method getProduct (line 23) | getProduct(id: number): Product {
method getCategories (line 27) | getCategories(): string[] {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/rest.datasource.ts
constant PROTOCOL (line 8) | const PROTOCOL = "http";
constant PORT (line 9) | const PORT = 3500;
class RestDataSource (line 12) | class RestDataSource {
method constructor (line 15) | constructor(private http: HttpClient) {
method getProducts (line 19) | getProducts(): Observable<Product[]> {
method saveOrder (line 23) | saveOrder(order: Order): Observable<Order> {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/model/static.datasource.ts
class StaticDataSource (line 7) | class StaticDataSource {
method getProducts (line 26) | getProducts(): Observable<Product[]> {
method saveOrder (line 30) | saveOrder(order: Order): Observable<Order> {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/store/cartDetail.component.ts
class CartDetailComponent (line 7) | class CartDetailComponent {
method constructor (line 9) | constructor(public cart: Cart) { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/store/cartSummary.component.ts
class CartSummaryComponent (line 8) | class CartSummaryComponent {
method constructor (line 10) | constructor(public cart: Cart) { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/store/checkout.component.ts
class CheckoutComponent (line 10) | class CheckoutComponent {
method constructor (line 14) | constructor(public repository: OrderRepository,
method submitOrder (line 17) | submitOrder(form: NgForm) {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/store/counter.directive.ts
class CounterDirective (line 8) | class CounterDirective {
method constructor (line 10) | constructor(private container: ViewContainerRef,
method ngOnChanges (line 17) | ngOnChanges(changes: SimpleChanges) {
class CounterDirectiveContext (line 26) | class CounterDirectiveContext {
method constructor (line 27) | constructor(public $implicit: any) { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/store/store.component.ts
class StoreComponent (line 11) | class StoreComponent {
method constructor (line 16) | constructor(private repository: ProductRepository,
method products (line 20) | get products(): Product[] {
method categories (line 26) | get categories(): string[] {
method changeCategory (line 30) | changeCategory(newCategory?: string) {
method changePage (line 34) | changePage(newPage: number) {
method changePageSize (line 38) | changePageSize(newSize: number) {
method pageCount (line 43) | get pageCount(): number {
method addProductToCart (line 48) | addProductToCart(product: Product) {
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/store/store.module.ts
class StoreModule (line 18) | class StoreModule { }
FILE: 08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/src/app/storeFirst.guard.ts
class StoreFirstGuard (line 9) | class StoreFirstGuard {
method constructor (line 12) | constructor(private router: Router) { }
method canActivate (line 14) | canActivate(route: ActivatedRouteSnapshot,
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 7) | class AppComponent { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 32) | class AppModule { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/cart.model.ts
class Cart (line 5) | class Cart {
method addLine (line 10) | addLine(product: Product, quantity: number = 1) {
method updateQuantity (line 20) | updateQuantity(product: Product, quantity: number) {
method removeLine (line 28) | removeLine(id: number) {
method clear (line 34) | clear() {
method recalculate (line 40) | private recalculate() {
class CartLine (line 50) | class CartLine {
method constructor (line 52) | constructor(public product: Product,
method lineTotal (line 55) | get lineTotal() {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/model.module.ts
class ModelModule (line 15) | class ModelModule { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/order.model.ts
class Order (line 5) | class Order {
method constructor (line 15) | constructor(public cart: Cart) { }
method clear (line 17) | clear() {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/order.repository.ts
class OrderRepository (line 7) | class OrderRepository {
method constructor (line 10) | constructor(private dataSource: StaticDataSource) {}
method getOrders (line 12) | getOrders(): Order[] {
method saveOrder (line 16) | saveOrder(order: Order): Observable<Order> {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/product.model.ts
class Product (line 1) | class Product {
method constructor (line 3) | constructor(
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/product.repository.ts
class ProductRepository (line 6) | class ProductRepository {
method constructor (line 10) | constructor(private dataSource: StaticDataSource) {
method getProducts (line 18) | getProducts(category: string = null): Product[] {
method getProduct (line 23) | getProduct(id: number): Product {
method getCategories (line 27) | getCategories(): string[] {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/rest.datasource.ts
constant PROTOCOL (line 8) | const PROTOCOL = "http";
constant PORT (line 9) | const PORT = 3500;
class RestDataSource (line 12) | class RestDataSource {
method constructor (line 15) | constructor(private http: HttpClient) {
method getProducts (line 19) | getProducts(): Observable<Product[]> {
method saveOrder (line 23) | saveOrder(order: Order): Observable<Order> {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/model/static.datasource.ts
class StaticDataSource (line 7) | class StaticDataSource {
method getProducts (line 26) | getProducts(): Observable<Product[]> {
method saveOrder (line 30) | saveOrder(order: Order): Observable<Order> {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/store/cartDetail.component.ts
class CartDetailComponent (line 7) | class CartDetailComponent {
method constructor (line 9) | constructor(public cart: Cart) { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/store/cartSummary.component.ts
class CartSummaryComponent (line 8) | class CartSummaryComponent {
method constructor (line 10) | constructor(public cart: Cart) { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/store/checkout.component.ts
class CheckoutComponent (line 10) | class CheckoutComponent {
method constructor (line 14) | constructor(public repository: OrderRepository,
method submitOrder (line 17) | submitOrder(form: NgForm) {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/store/counter.directive.ts
class CounterDirective (line 8) | class CounterDirective {
method constructor (line 10) | constructor(private container: ViewContainerRef,
method ngOnChanges (line 17) | ngOnChanges(changes: SimpleChanges) {
class CounterDirectiveContext (line 26) | class CounterDirectiveContext {
method constructor (line 27) | constructor(public $implicit: any) { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/store/store.component.ts
class StoreComponent (line 11) | class StoreComponent {
method constructor (line 16) | constructor(private repository: ProductRepository,
method products (line 20) | get products(): Product[] {
method categories (line 26) | get categories(): string[] {
method changeCategory (line 30) | changeCategory(newCategory?: string) {
method changePage (line 34) | changePage(newPage: number) {
method changePageSize (line 38) | changePageSize(newSize: number) {
method pageCount (line 43) | get pageCount(): number {
method addProductToCart (line 48) | addProductToCart(product: Product) {
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/store/store.module.ts
class StoreModule (line 18) | class StoreModule { }
FILE: 09 - SportsStore - Admin/Beginning of Chapter/SportsStore/src/app/storeFirst.guard.ts
class StoreFirstGuard (line 9) | class StoreFirstGuard {
method constructor (line 12) | constructor(private router: Router) { }
method canActivate (line 14) | canActivate(route: ActivatedRouteSnapshot,
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/admin.component.ts
class AdminComponent (line 8) | class AdminComponent {
method constructor (line 10) | constructor(private auth: AuthService,
method logout (line 13) | logout() {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/admin.module.ts
class AdminModule (line 33) | class AdminModule {}
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/auth.component.ts
class AuthComponent (line 9) | class AuthComponent {
method constructor (line 14) | constructor(private router: Router,
method authenticate (line 17) | authenticate(form: NgForm) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/auth.guard.ts
class AuthGuard (line 7) | class AuthGuard {
method constructor (line 9) | constructor(private router: Router,
method canActivate (line 12) | canActivate(route: ActivatedRouteSnapshot,
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/orderTable.component.ts
class OrderTableComponent (line 8) | class OrderTableComponent {
method constructor (line 11) | constructor(private repository: OrderRepository) {}
method getOrders (line 13) | getOrders(): Order[] {
method markShipped (line 18) | markShipped(order: Order) {
method delete (line 23) | delete(id: number) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/productEditor.component.ts
class ProductEditorComponent (line 10) | class ProductEditorComponent {
method constructor (line 14) | constructor(private repository: ProductRepository,
method save (line 25) | save(form: NgForm) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/admin/productTable.component.ts
class ProductTableComponent (line 8) | class ProductTableComponent {
method constructor (line 10) | constructor(private repository: ProductRepository) { }
method getProducts (line 12) | getProducts(): Product[] {
method deleteProduct (line 16) | deleteProduct(id: number) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 7) | class AppComponent { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 38) | class AppModule { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/auth.service.ts
class AuthService (line 6) | class AuthService {
method constructor (line 8) | constructor(private datasource: RestDataSource) {}
method authenticate (line 10) | authenticate(username: string, password: string): Observable<boolean> {
method authenticated (line 14) | get authenticated(): boolean {
method clear (line 18) | clear() {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/cart.model.ts
class Cart (line 5) | class Cart {
method addLine (line 10) | addLine(product: Product, quantity: number = 1) {
method updateQuantity (line 20) | updateQuantity(product: Product, quantity: number) {
method removeLine (line 28) | removeLine(id: number) {
method clear (line 34) | clear() {
method recalculate (line 40) | private recalculate() {
class CartLine (line 50) | class CartLine {
method constructor (line 52) | constructor(public product: Product,
method lineTotal (line 55) | get lineTotal() {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/model.module.ts
class ModelModule (line 17) | class ModelModule { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/order.model.ts
class Order (line 5) | class Order {
method constructor (line 15) | constructor(public cart: Cart) { }
method clear (line 17) | clear() {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/order.repository.ts
class OrderRepository (line 8) | class OrderRepository {
method constructor (line 12) | constructor(private dataSource: RestDataSource) { }
method loadOrders (line 14) | loadOrders() {
method getOrders (line 20) | getOrders(): Order[] {
method saveOrder (line 27) | saveOrder(order: Order): Observable<Order> {
method updateOrder (line 31) | updateOrder(order: Order) {
method deleteOrder (line 38) | deleteOrder(id: number) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/product.model.ts
class Product (line 1) | class Product {
method constructor (line 3) | constructor(
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/product.repository.ts
class ProductRepository (line 7) | class ProductRepository {
method constructor (line 11) | constructor(private dataSource: RestDataSource) {
method getProducts (line 19) | getProducts(category: string = null): Product[] {
method getProduct (line 24) | getProduct(id: number): Product {
method getCategories (line 28) | getCategories(): string[] {
method saveProduct (line 32) | saveProduct(product: Product) {
method deleteProduct (line 45) | deleteProduct(id: number) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/rest.datasource.ts
constant PROTOCOL (line 10) | const PROTOCOL = "http";
constant PORT (line 11) | const PORT = 3500;
class RestDataSource (line 14) | class RestDataSource {
method constructor (line 18) | constructor(private http: HttpClient) {
method getProducts (line 22) | getProducts(): Observable<Product[]> {
method saveOrder (line 26) | saveOrder(order: Order): Observable<Order> {
method authenticate (line 30) | authenticate(user: string, pass: string): Observable<boolean> {
method saveProduct (line 39) | saveProduct(product: Product): Observable<Product> {
method updateProduct (line 44) | updateProduct(product): Observable<Product> {
method deleteProduct (line 49) | deleteProduct(id: number): Observable<Product> {
method getOrders (line 54) | getOrders(): Observable<Order[]> {
method deleteOrder (line 58) | deleteOrder(id: number): Observable<Order> {
method updateOrder (line 63) | updateOrder(order: Order): Observable<Order> {
method getOptions (line 68) | private getOptions() {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/model/static.datasource.ts
class StaticDataSource (line 7) | class StaticDataSource {
method getProducts (line 26) | getProducts(): Observable<Product[]> {
method saveOrder (line 30) | saveOrder(order: Order): Observable<Order> {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/store/cartDetail.component.ts
class CartDetailComponent (line 7) | class CartDetailComponent {
method constructor (line 9) | constructor(public cart: Cart) { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/store/cartSummary.component.ts
class CartSummaryComponent (line 8) | class CartSummaryComponent {
method constructor (line 10) | constructor(public cart: Cart) { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/store/checkout.component.ts
class CheckoutComponent (line 10) | class CheckoutComponent {
method constructor (line 14) | constructor(public repository: OrderRepository,
method submitOrder (line 17) | submitOrder(form: NgForm) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/store/counter.directive.ts
class CounterDirective (line 8) | class CounterDirective {
method constructor (line 10) | constructor(private container: ViewContainerRef,
method ngOnChanges (line 17) | ngOnChanges(changes: SimpleChanges) {
class CounterDirectiveContext (line 26) | class CounterDirectiveContext {
method constructor (line 27) | constructor(public $implicit: any) { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/store/store.component.ts
class StoreComponent (line 11) | class StoreComponent {
method constructor (line 16) | constructor(private repository: ProductRepository,
method products (line 20) | get products(): Product[] {
method categories (line 26) | get categories(): string[] {
method changeCategory (line 30) | changeCategory(newCategory?: string) {
method changePage (line 34) | changePage(newPage: number) {
method changePageSize (line 38) | changePageSize(newSize: number) {
method pageCount (line 43) | get pageCount(): number {
method addProductToCart (line 48) | addProductToCart(product: Product) {
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/store/store.module.ts
class StoreModule (line 18) | class StoreModule { }
FILE: 09 - SportsStore - Admin/End of Chapter/SportsStore/src/app/storeFirst.guard.ts
class StoreFirstGuard (line 9) | class StoreFirstGuard {
method constructor (line 12) | constructor(private router: Router) { }
method canActivate (line 14) | canActivate(route: ActivatedRouteSnapshot,
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/e2e/protractor.conf.js
method onPrepare (line 26) | onPrepare() {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/e2e/src/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo(): Promise<unknown> {
method getTitleText (line 8) | getTitleText(): Promise<string> {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/admin.component.ts
class AdminComponent (line 8) | class AdminComponent {
method constructor (line 10) | constructor(private auth: AuthService,
method logout (line 13) | logout() {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/admin.module.ts
class AdminModule (line 33) | class AdminModule {}
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/auth.component.ts
class AuthComponent (line 9) | class AuthComponent {
method constructor (line 14) | constructor(private router: Router,
method authenticate (line 17) | authenticate(form: NgForm) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/auth.guard.ts
class AuthGuard (line 7) | class AuthGuard {
method constructor (line 9) | constructor(private router: Router,
method canActivate (line 12) | canActivate(route: ActivatedRouteSnapshot,
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/orderTable.component.ts
class OrderTableComponent (line 8) | class OrderTableComponent {
method constructor (line 11) | constructor(private repository: OrderRepository) {}
method getOrders (line 13) | getOrders(): Order[] {
method markShipped (line 18) | markShipped(order: Order) {
method delete (line 23) | delete(id: number) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/productEditor.component.ts
class ProductEditorComponent (line 10) | class ProductEditorComponent {
method constructor (line 14) | constructor(private repository: ProductRepository,
method save (line 25) | save(form: NgForm) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/admin/productTable.component.ts
class ProductTableComponent (line 8) | class ProductTableComponent {
method constructor (line 10) | constructor(private repository: ProductRepository) { }
method getProducts (line 12) | getProducts(): Product[] {
method deleteProduct (line 16) | deleteProduct(id: number) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/app.component.ts
class AppComponent (line 7) | class AppComponent { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/app.module.ts
class AppModule (line 38) | class AppModule { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/auth.service.ts
class AuthService (line 6) | class AuthService {
method constructor (line 8) | constructor(private datasource: RestDataSource) {}
method authenticate (line 10) | authenticate(username: string, password: string): Observable<boolean> {
method authenticated (line 14) | get authenticated(): boolean {
method clear (line 18) | clear() {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/cart.model.ts
class Cart (line 5) | class Cart {
method addLine (line 10) | addLine(product: Product, quantity: number = 1) {
method updateQuantity (line 20) | updateQuantity(product: Product, quantity: number) {
method removeLine (line 28) | removeLine(id: number) {
method clear (line 34) | clear() {
method recalculate (line 40) | private recalculate() {
class CartLine (line 50) | class CartLine {
method constructor (line 52) | constructor(public product: Product,
method lineTotal (line 55) | get lineTotal() {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/model.module.ts
class ModelModule (line 17) | class ModelModule { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/order.model.ts
class Order (line 5) | class Order {
method constructor (line 15) | constructor(public cart: Cart) { }
method clear (line 17) | clear() {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/order.repository.ts
class OrderRepository (line 8) | class OrderRepository {
method constructor (line 12) | constructor(private dataSource: RestDataSource) { }
method loadOrders (line 14) | loadOrders() {
method getOrders (line 20) | getOrders(): Order[] {
method saveOrder (line 27) | saveOrder(order: Order): Observable<Order> {
method updateOrder (line 31) | updateOrder(order: Order) {
method deleteOrder (line 38) | deleteOrder(id: number) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/product.model.ts
class Product (line 1) | class Product {
method constructor (line 3) | constructor(
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/product.repository.ts
class ProductRepository (line 7) | class ProductRepository {
method constructor (line 11) | constructor(private dataSource: RestDataSource) {
method getProducts (line 19) | getProducts(category: string = null): Product[] {
method getProduct (line 24) | getProduct(id: number): Product {
method getCategories (line 28) | getCategories(): string[] {
method saveProduct (line 32) | saveProduct(product: Product) {
method deleteProduct (line 45) | deleteProduct(id: number) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/rest.datasource.ts
constant PROTOCOL (line 10) | const PROTOCOL = "http";
constant PORT (line 11) | const PORT = 3500;
class RestDataSource (line 14) | class RestDataSource {
method constructor (line 18) | constructor(private http: HttpClient) {
method getProducts (line 22) | getProducts(): Observable<Product[]> {
method saveOrder (line 26) | saveOrder(order: Order): Observable<Order> {
method authenticate (line 30) | authenticate(user: string, pass: string): Observable<boolean> {
method saveProduct (line 39) | saveProduct(product: Product): Observable<Product> {
method updateProduct (line 44) | updateProduct(product): Observable<Product> {
method deleteProduct (line 49) | deleteProduct(id: number): Observable<Product> {
method getOrders (line 54) | getOrders(): Observable<Order[]> {
method deleteOrder (line 58) | deleteOrder(id: number): Observable<Order> {
method updateOrder (line 63) | updateOrder(order: Order): Observable<Order> {
method getOptions (line 68) | private getOptions() {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/model/static.datasource.ts
class StaticDataSource (line 7) | class StaticDataSource {
method getProducts (line 26) | getProducts(): Observable<Product[]> {
method saveOrder (line 30) | saveOrder(order: Order): Observable<Order> {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/store/cartDetail.component.ts
class CartDetailComponent (line 7) | class CartDetailComponent {
method constructor (line 9) | constructor(public cart: Cart) { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/store/cartSummary.component.ts
class CartSummaryComponent (line 8) | class CartSummaryComponent {
method constructor (line 10) | constructor(public cart: Cart) { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/store/checkout.component.ts
class CheckoutComponent (line 10) | class CheckoutComponent {
method constructor (line 14) | constructor(public repository: OrderRepository,
method submitOrder (line 17) | submitOrder(form: NgForm) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/store/counter.directive.ts
class CounterDirective (line 8) | class CounterDirective {
method constructor (line 10) | constructor(private container: ViewContainerRef,
method ngOnChanges (line 17) | ngOnChanges(changes: SimpleChanges) {
class CounterDirectiveContext (line 26) | class CounterDirectiveContext {
method constructor (line 27) | constructor(public $implicit: any) { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/store/store.component.ts
class StoreComponent (line 11) | class StoreComponent {
method constructor (line 16) | constructor(private repository: ProductRepository,
method products (line 20) | get products(): Product[] {
method categories (line 26) | get categories(): string[] {
method changeCategory (line 30) | changeCategory(newCategory?: string) {
method changePage (line 34) | changePage(newPage: number) {
method changePageSize (line 38) | changePageSize(newSize: number) {
method pageCount (line 43) | get pageCount(): number {
method addProductToCart (line 48) | addProductToCart(product: Product) {
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/store/store.module.ts
class StoreModule (line 18) | class StoreModule { }
FILE: 10 - SportsStore - Deployment/Beginning of Chapter/SportsStore/src/app/storeFirst.guard.ts
class StoreFirstGuard (line 9) | class StoreFirstGuard {
method constructor (line 12) | constructor(private router: Router) { }
method canActivate (line 14) | canActivate(route: ActivatedRouteSnapshot,
FILE: 10 - SportsStore - Deployment/End of Chapter/SportsStore/authMiddleware.js
constant APP_SECRET (line 3) | const APP_SECRET = "myappsecret";
constant USERNAME (line 4) | const USERNAME = "admin";
constant PASSWORD (line 5) | const PASSWORD = "secret";
function requiresAuth (line 12) | function requiresAuth(method, url) {
FILE: 10 - SportsStore - Deployment/End of Chapter/SportsStore/dist/SportsStore/5-es2015.b2d2985f67757f20fa32.js
function a (line 1) | function a(t,e){if(1&t&&(c.Mb(0,"div",11),c.hc(1),c.Lb()),2&t){const t=c...
class t (line 1) | class t{constructor(t,e){this.router=t,this.auth=e}authenticate(t){t.val...
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
class t (line 1) | class t{constructor(t,e){this.auth=t,this.router=e}logout(){this.auth.cl...
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
class t (line 1) | class t{constructor(t,e){this.router=t,this.auth=e}canActivate(t,e){retu...
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
function l (line 1) | function l(t,e){if(1&t){const t=c.Nb();c.Mb(0,"tr"),c.Mb(1,"td"),c.hc(2)...
class t (line 1) | class t{constructor(t){this.repository=t}getProducts(){return this.repos...
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
class t (line 1) | class t{constructor(t,e,n){this.repository=t,this.router=e,this.editing=...
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
function f (line 1) | function f(t,e){1&t&&(c.Mb(0,"tr"),c.Mb(1,"td",7),c.hc(2,"There are no o...
function v (line 1) | function v(t,e){if(1&t&&(c.Mb(0,"tr"),c.Kb(1,"td",4),c.Mb(2,"td"),c.hc(3...
function y (line 1) | function y(t,e){if(1&t){const t=c.Nb();c.Mb(0,"tr"),c.Mb(1,"td"),c.hc(2)...
class t (line 1) | class t{constructor(t){this.repository=t,this.includeShipped=!1}getOrder...
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
class t (line 1) | class t{}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method authenticate (line 1) | authenticate(t){t.valid?this.auth.authenticate(this.username,this.pass...
method constructor (line 1) | constructor(t,e){this.auth=t,this.router=e}
method logout (line 1) | logout(){this.auth.clear(),this.router.navigateByUrl("/")}
method constructor (line 1) | constructor(t,e){this.router=t,this.auth=e}
method canActivate (line 1) | canActivate(t,e){return!!this.auth.authenticated||(this.router.navigat...
method constructor (line 1) | constructor(t){this.repository=t}
method getProducts (line 1) | getProducts(){return this.repository.getProducts()}
method deleteProduct (line 1) | deleteProduct(t){this.repository.deleteProduct(t)}
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.router=e,this.editing=!1,thi...
method save (line 1) | save(t){this.repository.saveProduct(this.product),this.router.navigate...
method constructor (line 1) | constructor(t){this.repository=t,this.includeShipped=!1}
method getOrders (line 1) | getOrders(){return this.repository.getOrders().filter(t=>this.includeS...
method markShipped (line 1) | markShipped(t){t.shipped=!0,this.repository.updateOrder(t)}
method delete (line 1) | delete(t){this.repository.deleteOrder(t)}
FILE: 10 - SportsStore - Deployment/End of Chapter/SportsStore/dist/SportsStore/5-es5.b2d2985f67757f20fa32.js
function _classCallCheck (line 1) | function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("...
function _defineProperties (line 1) | function _defineProperties(t,e){for(var n=0;n<e.length;n++){var r=e[n];r...
function _createClass (line 1) | function _createClass(t,e,n){return e&&_defineProperties(t.prototype,e),...
function a (line 1) | function a(t,e){if(1&t&&(b.Mb(0,"div",11),b.hc(1),b.Lb()),2&t){var n=b.W...
function t (line 1) | function t(e,n){_classCallCheck(this,t),this.router=e,this.auth=n}
function t (line 1) | function t(e,n){_classCallCheck(this,t),this.auth=e,this.router=n}
function t (line 1) | function t(e,n){_classCallCheck(this,t),this.router=e,this.auth=n}
function m (line 1) | function m(t,e){if(1&t){var n=b.Nb();b.Mb(0,"tr"),b.Mb(1,"td"),b.hc(2),b...
function t (line 1) | function t(e){_classCallCheck(this,t),this.repository=e}
function t (line 1) | function t(e,n,r){_classCallCheck(this,t),this.repository=e,this.router=...
function w (line 1) | function w(t,e){1&t&&(b.Mb(0,"tr"),b.Mb(1,"td",7),b.hc(2,"There are no o...
function z (line 1) | function z(t,e){if(1&t&&(b.Mb(0,"tr"),b.Kb(1,"td",4),b.Mb(2,"td"),b.hc(3...
function P (line 1) | function P(t,e){if(1&t){var n=b.Nb();b.Mb(0,"tr"),b.Mb(1,"td"),b.hc(2),b...
function t (line 1) | function t(e){_classCallCheck(this,t),this.repository=e,this.includeShip...
FILE: 10 - SportsStore - Deployment/End of Chapter/SportsStore/dist/SportsStore/main-es2015.17a65f3ef96068aef242.js
function s (line 1) | function s(){return Object(r.a)(1)}
method constructor (line 1) | constructor(t,e,n){super(),this.parent=t,this.outerValue=e,this.outerI...
method _next (line 1) | _next(t){this.parent.notifyNext(this.outerValue,t,this.outerIndex,this...
method _error (line 1) | _error(t){this.parent.notifyError(t,this),this.unsubscribe()}
method _complete (line 1) | _complete(){this.parent.notifyComplete(this),this.unsubscribe()}
method notifyNext (line 1) | notifyNext(t,e,n,r,s){this.destination.next(e)}
method notifyError (line 1) | notifyError(t,e){this.destination.error(t)}
method notifyComplete (line 1) | notifyComplete(t){this.destination.complete()}
method useDeprecatedSynchronousErrorHandling (line 1) | set useDeprecatedSynchronousErrorHandling(t){if(t){const t=new Error;con...
method useDeprecatedSynchronousErrorHandling (line 1) | get useDeprecatedSynchronousErrorHandling(){return r}
function l (line 1) | function l(t,e){return new i.a(n=>{const r=t.length;if(0===r)return void...
method constructor (line 1) | constructor(t,e,n=Number.POSITIVE_INFINITY){super(t),this.project=e,th...
method _next (line 1) | _next(t){this.active<this.concurrent?this._tryNext(t):this.buffer.push...
method _tryNext (line 1) | _tryNext(t){let e;const n=this.index++;try{e=this.project(t,n)}catch(r...
method _innerSub (line 1) | _innerSub(t,e,n){const s=new i.a(this,e,n),o=this.destination;o.add(s)...
method _complete (line 1) | _complete(){this.hasCompleted=!0,0===this.active&&0===this.buffer.leng...
method notifyNext (line 1) | notifyNext(t,e,n,r,s){this.destination.next(e)}
method notifyComplete (line 1) | notifyComplete(t){const e=this.buffer;this.remove(t),this.active--,e.l...
method constructor (line 1) | constructor(t,e,n,i){let o;super(),this._parentSubscriber=t;let a=this...
method next (line 1) | next(t){if(!this.isStopped&&this._next){const{_parentSubscriber:e}=thi...
method error (line 1) | error(t){if(!this.isStopped){const{_parentSubscriber:e}=this,{useDepre...
method complete (line 1) | complete(){if(!this.isStopped){const{_parentSubscriber:t}=this;if(this...
method __tryOrUnsub (line 1) | __tryOrUnsub(t,e){try{t.call(this._context,e)}catch(n){if(this.unsubsc...
method __tryOrSetError (line 1) | __tryOrSetError(t,e,n){if(!a.a.useDeprecatedSynchronousErrorHandling)t...
method _unsubscribe (line 1) | _unsubscribe(){const{_parentSubscriber:t}=this;this._context=null,this...
method constructor (line 1) | constructor(t,e){super(t),this.project=e,this.index=0}
method _next (line 1) | _next(t){let e;const n=this.index++;try{e=this.project(t,n)}catch(r){r...
method _innerSub (line 1) | _innerSub(t,e,n){const r=this.innerSubscription;r&&r.unsubscribe();con...
method _complete (line 1) | _complete(){const{innerSubscription:t}=this;t&&!t.closed||super._compl...
method _unsubscribe (line 1) | _unsubscribe(){this.innerSubscription=null}
method notifyComplete (line 1) | notifyComplete(t){this.destination.remove(t),this.innerSubscription=nu...
method notifyNext (line 1) | notifyNext(t,e,n,r,s){this.destination.next(e)}
class t (line 1) | class t{constructor(t,e){this._renderer=t,this._elementRef=e,this.onChan...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=t}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(t,e,n){this._renderer=t,this._elementRef=e,this._compositi...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=t}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _handleInput (line 1) | _handleInput(t){(!this._compositionMode||this._compositionMode&&!this....
method _compositionStart (line 1) | _compositionStart(){this._composing=!0}
method _compositionEnd (line 1) | _compositionEnd(t){this._composing=!1,this._compositionMode&&this.onCh...
method value (line 1) | get value(){return this.control?this.control.value:null}
method valid (line 1) | get valid(){return this.control?this.control.valid:null}
method invalid (line 1) | get invalid(){return this.control?this.control.invalid:null}
method pending (line 1) | get pending(){return this.control?this.control.pending:null}
method disabled (line 1) | get disabled(){return this.control?this.control.disabled:null}
method enabled (line 1) | get enabled(){return this.control?this.control.enabled:null}
method errors (line 1) | get errors(){return this.control?this.control.errors:null}
method pristine (line 1) | get pristine(){return this.control?this.control.pristine:null}
method dirty (line 1) | get dirty(){return this.control?this.control.dirty:null}
method touched (line 1) | get touched(){return this.control?this.control.touched:null}
method status (line 1) | get status(){return this.control?this.control.status:null}
method untouched (line 1) | get untouched(){return this.control?this.control.untouched:null}
method statusChanges (line 1) | get statusChanges(){return this.control?this.control.statusChanges:null}
method valueChanges (line 1) | get valueChanges(){return this.control?this.control.valueChanges:null}
method path (line 1) | get path(){return null}
method reset (line 1) | reset(t){this.control&&this.control.reset(t)}
method hasError (line 1) | hasError(t,e){return!!this.control&&this.control.hasError(t,e)}
method getError (line 1) | getError(t,e){return this.control?this.control.getError(t,e):null}
method formDirective (line 1) | get formDirective(){return null}
method path (line 1) | get path(){return null}
method constructor (line 1) | constructor(t){super(t)}
method constructor (line 1) | constructor(t){super(t)}
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{t(""==e?null:parseFloat(e))}}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(){this._accessors=[]}
method add (line 1) | add(t,e){this._accessors.push([t,e])}
method remove (line 1) | remove(t){for(let e=this._accessors.length-1;e>=0;--e)if(this._accesso...
method select (line 1) | select(t){this._accessors.forEach(e=>{this._isSameGroup(e,t)&&e[1]!==t...
method _isSameGroup (line 1) | _isSameGroup(t,e){return!!t[0].control&&t[0]._parent===e._control._par...
method constructor (line 1) | constructor(t,e,n,r){this._renderer=t,this._elementRef=e,this._registr...
method ngOnInit (line 1) | ngOnInit(){this._control=this._injector.get(w),this._checkName(),this....
method ngOnDestroy (line 1) | ngOnDestroy(){this._registry.remove(this)}
method writeValue (line 1) | writeValue(t){this._state=t===this.value,this._renderer.setProperty(th...
method registerOnChange (line 1) | registerOnChange(t){this._fn=t,this.onChange=()=>{t(this.value),this._...
method fireUncheck (line 1) | fireUncheck(t){this.writeValue(t)}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _checkName (line 1) | _checkName(){this.name&&this.formControlName&&this.name!==this.formCon...
method _throwNameError (line 1) | _throwNameError(){throw new Error('\n If you define both a name a...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{t(""==e?null:parseFloat(e))}}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this._optionMap=n...
method compareWith (line 1) | set compareWith(t){if("function"!=typeof t)throw new Error(`compareWit...
method writeValue (line 1) | writeValue(t){this.value=t;const e=this._getOptionId(t);null==e&&this....
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{this.value=this._getOptionValue(...
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _registerOption (line 1) | _registerOption(){return(this._idCounter++).toString()}
method _getOptionId (line 1) | _getOptionId(t){for(const e of Array.from(this._optionMap.keys()))if(t...
method _getOptionValue (line 1) | _getOptionValue(t){const e=function(t){return t.split(":")[0]}(t);retu...
method constructor (line 1) | constructor(t,e,n){this._element=t,this._renderer=e,this._select=n,thi...
method ngValue (line 1) | set ngValue(t){null!=this._select&&(this._select._optionMap.set(this.i...
method value (line 1) | set value(t){this._setElementValue(t),this._select&&this._select.write...
method _setElementValue (line 1) | _setElementValue(t){this._renderer.setProperty(this._element.nativeEle...
method ngOnDestroy (line 1) | ngOnDestroy(){this._select&&(this._select._optionMap.delete(this.id),t...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this._optionMap=n...
method compareWith (line 1) | set compareWith(t){if("function"!=typeof t)throw new Error(`compareWit...
method writeValue (line 1) | writeValue(t){let e;if(this.value=t,Array.isArray(t)){const n=t.map(t=...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{const n=[];if(e.hasOwnProperty("...
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _registerOption (line 1) | _registerOption(t){const e=(this._idCounter++).toString();return this....
method _getOptionId (line 1) | _getOptionId(t){for(const e of Array.from(this._optionMap.keys()))if(t...
method _getOptionValue (line 1) | _getOptionValue(t){const e=function(t){return t.split(":")[0]}(t);retu...
method constructor (line 1) | constructor(t,e,n){this._element=t,this._renderer=e,this._select=n,thi...
method ngValue (line 1) | set ngValue(t){null!=this._select&&(this._value=t,this._setElementValu...
method value (line 1) | set value(t){this._select?(this._value=t,this._setElementValue(Q(this....
method _setElementValue (line 1) | _setElementValue(t){this._renderer.setProperty(this._element.nativeEle...
method _setSelected (line 1) | _setSelected(t){this._renderer.setProperty(this._element.nativeElement...
method ngOnDestroy (line 1) | ngOnDestroy(){this._select&&(this._select._optionMap.delete(this.id),t...
method constructor (line 1) | constructor(t,e){super(),this.submitted=!1,this._directives=[],this.ng...
method ngAfterViewInit (line 1) | ngAfterViewInit(){this._setUpdateStrategy()}
method formDirective (line 1) | get formDirective(){return this}
method control (line 1) | get control(){return this.form}
method path (line 1) | get path(){return[]}
method controls (line 1) | get controls(){return this.form.controls}
method addControl (line 1) | addControl(t){pt.then(()=>{const e=this._findContainer(t.path);t.contr...
method getControl (line 1) | getControl(t){return this.form.get(t.path)}
method removeControl (line 1) | removeControl(t){pt.then(()=>{const e=this._findContainer(t.path);e&&e...
method addFormGroup (line 1) | addFormGroup(t){pt.then(()=>{const e=this._findContainer(t.path),n=new...
method removeFormGroup (line 1) | removeFormGroup(t){pt.then(()=>{const e=this._findContainer(t.path);e&...
method getFormGroup (line 1) | getFormGroup(t){return this.form.get(t.path)}
method updateModel (line 1) | updateModel(t,e){pt.then(()=>{this.form.get(t.path).setValue(e)})}
method setValue (line 1) | setValue(t){this.control.setValue(t)}
method onSubmit (line 1) | onSubmit(t){return this.submitted=!0,e=this._directives,this.form._syn...
method onReset (line 1) | onReset(){this.resetForm()}
method resetForm (line 1) | resetForm(t){this.form.reset(t),this.submitted=!1}
method _setUpdateStrategy (line 1) | _setUpdateStrategy(){this.options&&null!=this.options.updateOn&&(this....
method _findContainer (line 1) | _findContainer(t){return t.pop(),t.length?this.form.get(t):this.form}
method ngOnInit (line 1) | ngOnInit(){this._checkParentType(),this.formDirective.addFormGroup(this)}
method ngOnDestroy (line 1) | ngOnDestroy(){this.formDirective&&this.formDirective.removeFormGroup(t...
method control (line 1) | get control(){return this.formDirective.getFormGroup(this)}
method path (line 1) | get path(){return X(null==this.name?this.name:this.name.toString(),thi...
method formDirective (line 1) | get formDirective(){return this._parent?this._parent.formDirective:null}
method validator (line 1) | get validator(){return nt(this._validators)}
method asyncValidator (line 1) | get asyncValidator(){return rt(this._asyncValidators)}
method _checkParentType (line 1) | _checkParentType(){}
method constructor (line 1) | constructor(t,e,n){super(),this._parent=t,this._validators=e,this._asy...
method _checkParentType (line 1) | _checkParentType(){this._parent instanceof t||this._parent instanceof ...
method constructor (line 1) | constructor(t,e,n,s){super(),this.control=new ut,this._registered=!1,t...
method ngOnChanges (line 1) | ngOnChanges(t){this._checkForErrors(),this._registered||this._setUpCon...
method ngOnDestroy (line 1) | ngOnDestroy(){this.formDirective&&this.formDirective.removeControl(this)}
method path (line 1) | get path(){return this._parent?X(this.name,this._parent):[this.name]}
method formDirective (line 1) | get formDirective(){return this._parent?this._parent.formDirective:null}
method validator (line 1) | get validator(){return nt(this._rawValidators)}
method asyncValidator (line 1) | get asyncValidator(){return rt(this._rawAsyncValidators)}
method viewToModelUpdate (line 1) | viewToModelUpdate(t){this.viewModel=t,this.update.emit(t)}
method _setUpControl (line 1) | _setUpControl(){this._setUpdateStrategy(),this._isStandalone()?this._s...
method _setUpdateStrategy (line 1) | _setUpdateStrategy(){this.options&&null!=this.options.updateOn&&(this....
method _isStandalone (line 1) | _isStandalone(){return!this._parent||!(!this.options||!this.options.st...
method _setUpStandalone (line 1) | _setUpStandalone(){Y(this.control,this),this.control.updateValueAndVal...
method _checkForErrors (line 1) | _checkForErrors(){this._isStandalone()||this._checkParentType(),this._...
method _checkParentType (line 1) | _checkParentType(){!(this._parent instanceof vt)&&this._parent instanc...
method _checkName (line 1) | _checkName(){this.options&&this.options.name&&(this.name=this.options....
method _updateValue (line 1) | _updateValue(t){wt.then(()=>{this.control.setValue(t,{emitViewToModelC...
method _updateDisabled (line 1) | _updateDisabled(t){const e=t.isDisabled.currentValue,n=""===e||e&&"fal...
method required (line 1) | get required(){return this._required}
method required (line 1) | set required(t){this._required=null!=t&&!1!==t&&"false"!==`${t}`,this....
method validate (line 1) | validate(t){return this.required?A.required(t):null}
method registerOnValidatorChange (line 1) | registerOnValidatorChange(t){this._onChange=t}
method constructor (line 1) | constructor(t){this.http=t,this.baseUrl="/api/"}
method getProducts (line 1) | getProducts(){return this.http.get(this.baseUrl+"products")}
method saveOrder (line 1) | saveOrder(t){return this.http.post(this.baseUrl+"orders",t)}
method authenticate (line 1) | authenticate(t,e){return this.http.post(this.baseUrl+"login",{name:t,p...
method saveProduct (line 1) | saveProduct(t){return this.http.post(this.baseUrl+"products",t,this.ge...
method updateProduct (line 1) | updateProduct(t){return this.http.put(`${this.baseUrl}products/${t.id}...
method deleteProduct (line 1) | deleteProduct(t){return this.http.delete(`${this.baseUrl}products/${t}...
method getOrders (line 1) | getOrders(){return this.http.get(this.baseUrl+"orders",this.getOptions...
method deleteOrder (line 1) | deleteOrder(t){return this.http.delete(`${this.baseUrl}orders/${t}`,th...
method updateOrder (line 1) | updateOrder(t){return this.http.put(`${this.baseUrl}orders/${t.id}`,t,...
method getOptions (line 1) | getOptions(){return{headers:new s.c({Authorization:`Bearer<${this.auth...
method constructor (line 1) | constructor(t){this._isScalar=!1,t&&(this._subscribe=t)}
method lift (line 1) | lift(e){const n=new t;return n.source=this,n.operator=e,n}
method subscribe (line 1) | subscribe(t,e,n){const{operator:o}=this,a=function(t,e,n){if(t){if(t i...
method _trySubscribe (line 1) | _trySubscribe(t){try{return this._subscribe(t)}catch(e){c.a.useDepreca...
method forEach (line 1) | forEach(t,e){return new(e=l(e))((e,n)=>{let r;r=this.subscribe(e=>{try...
method _subscribe (line 1) | _subscribe(t){const{source:e}=this;return e&&e.subscribe(t)}
method pipe (line 1) | pipe(...t){return 0===t.length?this:Object(a.b)(t)(this)}
method toPromise (line 1) | toPromise(t){return new(t=l(t))((t,e)=>{let n;this.subscribe(t=>n=t,t=...
method constructor (line 1) | constructor(){super(),this.observers=[],this.closed=!1,this.isStopped=...
method lift (line 1) | lift(t){const e=new h(this,this);return e.operator=t,e}
method next (line 1) | next(t){if(this.closed)throw new o.a;if(!this.isStopped){const{observe...
method error (line 1) | error(t){if(this.closed)throw new o.a;this.hasError=!0,this.thrownErro...
method complete (line 1) | complete(){if(this.closed)throw new o.a;this.isStopped=!0;const{observ...
method unsubscribe (line 1) | unsubscribe(){this.isStopped=!0,this.closed=!0,this.observers=null}
method _trySubscribe (line 1) | _trySubscribe(t){if(this.closed)throw new o.a;return super._trySubscri...
method _subscribe (line 1) | _subscribe(t){if(this.closed)throw new o.a;return this.hasError?(t.err...
method asObservable (line 1) | asObservable(){const t=new r.a;return t.source=this,t}
method create (line 1) | static create(t,e){return Array.isArray(t)?ii(t,e,""):ii(t.providers,t...
method constructor (line 1) | constructor(t){this.nativeElement=t}
method constructor (line 1) | constructor(t){this.factories=t}
method create (line 1) | static create(e,n){if(null!=n){const t=n.factories.slice();e=e.concat(...
method extend (line 1) | static extend(e){return{provide:t,useFactory:n=>{if(!n)throw new Error...
method find (line 1) | find(t){const e=this.factories.find(e=>e.supports(t));if(null!=e)retur...
method constructor (line 1) | constructor(t){this.factories=t}
method create (line 1) | static create(e,n){if(n){const t=n.factories.slice();e=e.concat(t)}ret...
method extend (line 1) | static extend(e){return{provide:t,useFactory:n=>{if(!n)throw new Error...
method find (line 1) | find(t){const e=this.factories.find(e=>e.supports(t));if(e)return e;th...
method constructor (line 1) | constructor(t){this.appInits=t,this.initialized=!1,this.done=!1,this.d...
method runInitializers (line 1) | runInitializers(){if(this.initialized)return;const t=[],e=()=>{this.do...
method log (line 1) | log(t){console.log(t)}
method warn (line 1) | warn(t){console.warn(t)}
method constructor (line 1) | constructor(){this.compileModuleSync=Za,this.compileModuleAsync=Qa,thi...
method clearCache (line 1) | clearCache(){}
method clearCacheFor (line 1) | clearCacheFor(t){}
method getModuleId (line 1) | getModuleId(t){}
method constructor (line 1) | constructor(t){this._ngZone=t,this._pendingCount=0,this._isZoneStable=...
method _watchAngularEvents (line 1) | _watchAngularEvents(){this._ngZone.onUnstable.subscribe({next:()=>{thi...
method increasePendingRequestCount (line 1) | increasePendingRequestCount(){return this._pendingCount+=1,this._didWo...
method decreasePendingRequestCount (line 1) | decreasePendingRequestCount(){if(this._pendingCount-=1,this._pendingCo...
method isStable (line 1) | isStable(){return this._isZoneStable&&0===this._pendingCount&&!this._n...
method _runCallbacksIfReady (line 1) | _runCallbacksIfReady(){if(this.isStable())nc(()=>{for(;0!==this._callb...
method getPendingTasks (line 1) | getPendingTasks(){return this.taskTrackingZone?this.taskTrackingZone.m...
method addCallback (line 1) | addCallback(t,e,n){let r=-1;e&&e>0&&(r=setTimeout(()=>{this._callbacks...
method whenStable (line 1) | whenStable(t,e,n){if(n&&!this.taskTrackingZone)throw new Error('Task t...
method getPendingRequestCount (line 1) | getPendingRequestCount(){return this._pendingCount}
method findProviders (line 1) | findProviders(t,e,n){return[]}
method constructor (line 1) | constructor(){this._applications=new Map,mc.addToWindow(this)}
method registerApplication (line 1) | registerApplication(t,e){this._applications.set(t,e)}
method unregisterApplication (line 1) | unregisterApplication(t){this._applications.delete(t)}
method unregisterAllApplications (line 1) | unregisterAllApplications(){this._applications.clear()}
method getTestability (line 1) | getTestability(t){return this._applications.get(t)||null}
method getAllTestabilities (line 1) | getAllTestabilities(){return Array.from(this._applications.values())}
method getAllRootElements (line 1) | getAllRootElements(){return Array.from(this._applications.keys())}
method findTestabilityInTree (line 1) | findTestabilityInTree(t,e=!0){return mc.findTestabilityInTree(this,t,e)}
method constructor (line 1) | constructor(t){this._injector=t,this._modules=[],this._destroyListener...
method bootstrapModuleFactory (line 1) | bootstrapModuleFactory(t,e){const n=function(t,e){let n;return n="noop...
method bootstrapModule (line 1) | bootstrapModule(t,e=[]){const n=Sc({},e);return bc(this.injector,n,t)....
method _moduleDoBootstrap (line 1) | _moduleDoBootstrap(t){const e=t.injector.get(Oc);if(t._bootstrapCompon...
method onDestroy (line 1) | onDestroy(t){this._destroyListeners.push(t)}
method injector (line 1) | get injector(){return this._injector}
method destroy (line 1) | destroy(){if(this._destroyed)throw new Error("The platform has already...
method destroyed (line 1) | get destroyed(){return this._destroyed}
method constructor (line 1) | constructor(t,e,n,r,s,l){this._zone=t,this._console=e,this._injector=n...
method bootstrap (line 1) | bootstrap(t,e){if(!this._initStatus.done)throw new Error("Cannot boots...
method tick (line 1) | tick(){if(this._runningTick)throw new Error("ApplicationRef.tick is ca...
method attachView (line 1) | attachView(t){const e=t;this._views.push(e),e.attachToAppRef(this)}
method detachView (line 1) | detachView(t){const e=t;Ec(this._views,e),e.detachFromAppRef()}
method _loadComponent (line 1) | _loadComponent(t){this.attachView(t.hostView),this.tick(),this.compone...
method _unloadComponent (line 1) | _unloadComponent(t){this.detachView(t.hostView),Ec(this.components,t)}
method ngOnDestroy (line 1) | ngOnDestroy(){this._views.slice().forEach(t=>t.destroy())}
method viewCount (line 1) | get viewCount(){return this._views.length}
method constructor (line 1) | constructor(t,e){this._compiler=t,this._config=e||kc}
method load (line 1) | load(t){return this.loadAndCompile(t)}
method loadAndCompile (line 1) | loadAndCompile(t){let[e,r]=t.split("#");return void 0===r&&(r="default...
method loadFactory (line 1) | loadFactory(t){let[e,r]=t.split("#"),s="NgFactory";return void 0===r&&...
method constructor (line 1) | constructor(t){}
method constructor (line 1) | constructor(t){this.datasource=t}
method authenticate (line 1) | authenticate(t,e){return this.datasource.authenticate(t,e)}
method authenticated (line 1) | get authenticated(){return null!=this.datasource.auth_token}
method clear (line 1) | clear(){this.datasource.auth_token=null}
method constructor (line 1) | constructor(t){this.dataSource=t,this.orders=[],this.loaded=!1}
method loadOrders (line 1) | loadOrders(){this.loaded=!0,this.dataSource.getOrders().subscribe(t=>t...
method getOrders (line 1) | getOrders(){return this.loaded||this.loadOrders(),this.orders}
method saveOrder (line 1) | saveOrder(t){return this.dataSource.saveOrder(t)}
method updateOrder (line 1) | updateOrder(t){this.dataSource.updateOrder(t).subscribe(t=>{this.order...
method deleteOrder (line 1) | deleteOrder(t){this.dataSource.deleteOrder(t).subscribe(e=>{this.order...
method constructor (line 1) | constructor(t){this.dataSource=t,this.products=[],this.categories=[],t...
method getProducts (line 1) | getProducts(t=null){return this.products.filter(e=>null==t||t==e.categ...
method getProduct (line 1) | getProduct(t){return this.products.find(e=>e.id==t)}
method getCategories (line 1) | getCategories(){return this.categories}
method saveProduct (line 1) | saveProduct(t){null==t.id||0==t.id?this.dataSource.saveProduct(t).subs...
method deleteProduct (line 1) | deleteProduct(t){this.dataSource.deleteProduct(t).subscribe(e=>{this.p...
method constructor (line 1) | constructor(t){super(),this._doc=t,this._init()}
method _init (line 1) | _init(){this.location=i().getLocation(),this._history=i().getHistory()}
method getBaseHrefFromDOM (line 1) | getBaseHrefFromDOM(){return i().getBaseHref(this._doc)}
method onPopState (line 1) | onPopState(t){i().getGlobalEventTarget(this._doc,"window").addEventLis...
method onHashChange (line 1) | onHashChange(t){i().getGlobalEventTarget(this._doc,"window").addEventL...
method href (line 1) | get href(){return this.location.href}
method protocol (line 1) | get protocol(){return this.location.protocol}
method hostname (line 1) | get hostname(){return this.location.hostname}
method port (line 1) | get port(){return this.location.port}
method pathname (line 1) | get pathname(){return this.location.pathname}
method search (line 1) | get search(){return this.location.search}
method hash (line 1) | get hash(){return this.location.hash}
method pathname (line 1) | set pathname(t){this.location.pathname=t}
method pushState (line 1) | pushState(t,e,n){p()?this._history.pushState(t,e,n):this.location.hash=n}
method replaceState (line 1) | replaceState(t,e,n){p()?this._history.replaceState(t,e,n):this.locatio...
method forward (line 1) | forward(){this._history.forward()}
method back (line 1) | back(){this._history.back()}
method getState (line 1) | getState(){return this._history.state}
method constructor (line 1) | constructor(t,e){if(super(),this._platformLocation=t,null==e&&(e=this....
method onPopState (line 1) | onPopState(t){this._platformLocation.onPopState(t),this._platformLocat...
method getBaseHref (line 1) | getBaseHref(){return this._baseHref}
method prepareExternalUrl (line 1) | prepareExternalUrl(t){return g(this._baseHref,t)}
method path (line 1) | path(t=!1){const e=this._platformLocation.pathname+b(this._platformLoc...
method pushState (line 1) | pushState(t,e,n,r){const s=this.prepareExternalUrl(n+b(r));this._platf...
method replaceState (line 1) | replaceState(t,e,n,r){const s=this.prepareExternalUrl(n+b(r));this._pl...
method forward (line 1) | forward(){this._platformLocation.forward()}
method back (line 1) | back(){this._platformLocation.back()}
method constructor (line 1) | constructor(t,e){super(),this._platformLocation=t,this._baseHref="",nu...
method onPopState (line 1) | onPopState(t){this._platformLocation.onPopState(t),this._platformLocat...
method getBaseHref (line 1) | getBaseHref(){return this._baseHref}
method path (line 1) | path(t=!1){let e=this._platformLocation.hash;return null==e&&(e="#"),e...
method prepareExternalUrl (line 1) | prepareExternalUrl(t){const e=g(this._baseHref,t);return e.length>0?"#...
method pushState (line 1) | pushState(t,e,n,r){let s=this.prepareExternalUrl(n+b(r));0==s.length&&...
method replaceState (line 1) | replaceState(t,e,n,r){let s=this.prepareExternalUrl(n+b(r));0==s.lengt...
method forward (line 1) | forward(){this._platformLocation.forward()}
method back (line 1) | back(){this._platformLocation.back()}
method constructor (line 1) | constructor(t,e){this._subject=new r.n,this._urlChangeListeners=[],thi...
method path (line 1) | path(t=!1){return this.normalize(this._platformStrategy.path(t))}
method getState (line 1) | getState(){return this._platformLocation.getState()}
method isCurrentPathEqualTo (line 1) | isCurrentPathEqualTo(t,e=""){return this.path()==this.normalize(t+b(e))}
method normalize (line 1) | normalize(e){return t.stripTrailingSlash(function(t,e){return t&&e.sta...
method prepareExternalUrl (line 1) | prepareExternalUrl(t){return t&&"/"!==t[0]&&(t="/"+t),this._platformSt...
method go (line 1) | go(t,e="",n=null){this._platformStrategy.pushState(n,"",t,e),this._not...
method replaceState (line 1) | replaceState(t,e="",n=null){this._platformStrategy.replaceState(n,"",t...
method forward (line 1) | forward(){this._platformStrategy.forward()}
method back (line 1) | back(){this._platformStrategy.back()}
method onUrlChange (line 1) | onUrlChange(t){this._urlChangeListeners.push(t),this.subscribe(t=>{thi...
method _notifyUrlChangeListeners (line 1) | _notifyUrlChangeListeners(t="",e){this._urlChangeListeners.forEach(n=>...
method subscribe (line 1) | subscribe(t,e,n){return this._subject.subscribe({next:t,error:e,comple...
method constructor (line 1) | constructor(t){super(),this.locale=t}
method getPluralCategory (line 1) | getPluralCategory(t,e){switch(P(e||this.locale)(t)){case k.Zero:return...
method constructor (line 1) | constructor(t,e,n){this._viewContainer=t,this._template=e,this._differ...
method ngForOf (line 1) | set ngForOf(t){this._ngForOf=t,this._ngForOfDirty=!0}
method ngForTrackBy (line 1) | set ngForTrackBy(t){Object(r.T)()&&null!=t&&"function"!=typeof t&&cons...
method ngForTrackBy (line 1) | get ngForTrackBy(){return this._trackByFn}
method ngForTemplate (line 1) | set ngForTemplate(t){t&&(this._template=t)}
method ngDoCheck (line 1) | ngDoCheck(){if(this._ngForOfDirty){this._ngForOfDirty=!1;const n=this....
method _applyChanges (line 1) | _applyChanges(t){const e=[];t.forEachOperation((t,n,r)=>{if(null==t.pr...
method _perViewChange (line 1) | _perViewChange(t,e){t.context.$implicit=e.item}
method ngTemplateContextGuard (line 1) | static ngTemplateContextGuard(t,e){return!0}
method constructor (line 1) | constructor(t,e){this._viewContainer=t,this._context=new H,this._thenT...
method ngIf (line 1) | set ngIf(t){this._context.$implicit=this._context.ngIf=t,this._updateV...
method ngIfThen (line 1) | set ngIfThen(t){$("ngIfThen",t),this._thenTemplateRef=t,this._thenView...
method ngIfElse (line 1) | set ngIfElse(t){$("ngIfElse",t),this._elseTemplateRef=t,this._elseView...
method _updateView (line 1) | _updateView(){this._context.$implicit?this._thenViewRef||(this._viewCo...
method ngTemplateContextGuard (line 1) | static ngTemplateContextGuard(t,e){return!0}
method constructor (line 1) | constructor(t,e="USD"){this._locale=t,this._defaultCurrencyCode=e}
method transform (line 1) | transform(e,n,s="symbol",i,o){if(function(t){return null==t||""===t||t...
method constructor (line 1) | constructor(t){this.closed=!1,this._parentOrParents=null,this._subscri...
method unsubscribe (line 1) | unsubscribe(){let e;if(this.closed)return;let{_parentOrParents:n,_unsu...
method add (line 1) | add(e){let n=e;if(!e)return t.EMPTY;switch(typeof e){case"function":n=...
method remove (line 1) | remove(t){const e=this._subscriptions;if(e){const n=e.indexOf(t);-1!==...
method constructor (line 1) | constructor(t){this.handler=t}
method request (line 1) | request(t,e,n={}){let r;if(t instanceof v)r=t;else{let s=void 0;s=n.he...
method delete (line 1) | delete(t,e={}){return this.request("DELETE",t,e)}
method get (line 1) | get(t,e={}){return this.request("GET",t,e)}
method head (line 1) | head(t,e={}){return this.request("HEAD",t,e)}
method jsonp (line 1) | jsonp(t,e){return this.request("JSONP",t,{params:(new g).append(e,"JSO...
method options (line 1) | options(t,e={}){return this.request("OPTIONS",t,e)}
method patch (line 1) | patch(t,e,n={}){return this.request("PATCH",t,E(n,e))}
method post (line 1) | post(t,e,n={}){return this.request("POST",t,E(n,e))}
method put (line 1) | put(t,e,n={}){return this.request("PUT",t,E(n,e))}
method intercept (line 1) | intercept(t,e){return e.handle(t)}
method constructor (line 1) | constructor(){}
method build (line 1) | build(){return new XMLHttpRequest}
method constructor (line 1) | constructor(t){this.xhrFactory=t}
method handle (line 1) | handle(t){if("JSONP"===t.method)throw new Error("Attempted to construc...
method constructor (line 1) | constructor(t,e,n){this.doc=t,this.platform=e,this.cookieName=n,this.l...
method getToken (line 1) | getToken(){if("server"===this.platform)return null;const t=this.doc.co...
method constructor (line 1) | constructor(t,e){this.tokenService=t,this.headerName=e}
method intercept (line 1) | intercept(t,e){const n=t.url.toLowerCase();if("GET"===t.method||"HEAD"...
method constructor (line 1) | constructor(t,e){this.backend=t,this.injector=e,this.chain=null}
method handle (line 1) | handle(t){if(null===this.chain){const t=this.injector.get(k,[]);this.c...
method disable (line 1) | static disable(){return{ngModule:t,providers:[{provide:V,useClass:A}]}}
method withOptions (line 1) | static withOptions(e={}){return{ngModule:t,providers:[e.cookieName?{pr...
method constructor (line 1) | constructor(t,e,n,r,i,o,c,l){this.rootComponentType=t,this.urlSerializ...
method setupNavigations (line 1) | setupNavigations(t){const e=this.events;return t.pipe(Object(O.a)(t=>0...
method resetRootComponentType (line 1) | resetRootComponentType(t){this.rootComponentType=t,this.routerState.ro...
method getTransition (line 1) | getTransition(){const t=this.transitions.value;return t.urlAfterRedire...
method setTransition (line 1) | setTransition(t){this.transitions.next(Object.assign(Object.assign({},...
method initialNavigation (line 1) | initialNavigation(){this.setUpLocationChangeListener(),0===this.naviga...
method setUpLocationChangeListener (line 1) | setUpLocationChangeListener(){this.locationSubscription||(this.locatio...
method url (line 1) | get url(){return this.serializeUrl(this.currentUrlTree)}
method getCurrentNavigation (line 1) | getCurrentNavigation(){return this.currentNavigation}
method triggerEvent (line 1) | triggerEvent(t){this.events.next(t)}
method resetConfig (line 1) | resetConfig(t){At(t),this.config=t.map(It),this.navigated=!1,this.last...
method ngOnDestroy (line 1) | ngOnDestroy(){this.dispose()}
method dispose (line 1) | dispose(){this.locationSubscription&&(this.locationSubscription.unsubs...
method createUrlTree (line 1) | createUrlTree(t,e={}){const{relativeTo:n,queryParams:r,fragment:i,pres...
method navigateByUrl (line 1) | navigateByUrl(t,e={skipLocationChange:!1}){Object(s.T)()&&this.isNgZon...
method navigate (line 1) | navigate(t,e={skipLocationChange:!1}){return function(t){for(let e=0;e...
method serializeUrl (line 1) | serializeUrl(t){return this.urlSerializer.serialize(t)}
method parseUrl (line 1) | parseUrl(t){let e;try{e=this.urlSerializer.parse(t)}catch(n){e=this.ma...
method isActive (line 1) | isActive(t,e){if(Me(t))return Ut(this.currentUrlTree,t,e);const n=this...
method removeEmptyProps (line 1) | removeEmptyProps(t){return Object.keys(t).reduce((e,n)=>{const r=t[n];...
method processNavigations (line 1) | processNavigations(){this.navigations.subscribe(t=>{this.navigated=!0,...
method scheduleNavigation (line 1) | scheduleNavigation(t,e,n,r,s){const i=this.getTransition();if(i&&"impe...
method setBrowserUrl (line 1) | setBrowserUrl(t,e,n,r){const s=this.urlSerializer.serialize(t);r=r||{}...
method resetStateAndUrl (line 1) | resetStateAndUrl(t,e,n){this.routerState=t,this.currentUrlTree=e,this....
method resetUrlToCurrentUrlTree (line 1) | resetUrlToCurrentUrlTree(){this.location.replaceState(this.urlSerializ...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.route=e,this.commands=[],nul...
method routerLink (line 1) | set routerLink(t){this.commands=null!=t?Array.isArray(t)?t:[t]:[]}
method preserveQueryParams (line 1) | set preserveQueryParams(t){Object(s.T)()&&console&&console.warn&&conso...
method onClick (line 1) | onClick(){const t={skipLocationChange:En(this.skipLocationChange),repl...
method urlTree (line 1) | get urlTree(){return this.router.createUrlTree(this.commands,{relative...
method constructor (line 1) | constructor(t,e,n){this.router=t,this.route=e,this.locationStrategy=n,...
method routerLink (line 1) | set routerLink(t){this.commands=null!=t?Array.isArray(t)?t:[t]:[]}
method preserveQueryParams (line 1) | set preserveQueryParams(t){Object(s.T)()&&console&&console.warn&&conso...
method ngOnChanges (line 1) | ngOnChanges(t){this.updateTargetUrlAndHref()}
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method onClick (line 1) | onClick(t,e,n,r){if(0!==t||e||n||r)return!0;if("string"==typeof this.t...
method updateTargetUrlAndHref (line 1) | updateTargetUrlAndHref(){this.href=this.locationStrategy.prepareExtern...
method urlTree (line 1) | get urlTree(){return this.router.createUrlTree(this.commands,{relative...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.element=e,this.renderer=n,th...
method ngAfterContentInit (line 1) | ngAfterContentInit(){this.links.changes.subscribe(t=>this.update()),th...
method routerLinkActive (line 1) | set routerLinkActive(t){const e=Array.isArray(t)?t:t.split(" ");this.c...
method ngOnChanges (line 1) | ngOnChanges(t){this.update()}
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method update (line 1) | update(){this.links&&this.linksWithHrefs&&this.router.navigated&&Promi...
method isLinkActive (line 1) | isLinkActive(t){return e=>t.isActive(e.urlTree,this.routerLinkActiveOp...
method hasActiveLinks (line 1) | hasActiveLinks(){const t=this.isLinkActive(this.router);return this.li...
method constructor (line 1) | constructor(t,e,n,r,i){this.parentContexts=t,this.location=e,this.reso...
method ngOnDestroy (line 1) | ngOnDestroy(){this.parentContexts.onChildOutletDestroyed(this.name)}
method ngOnInit (line 1) | ngOnInit(){if(!this.activated){const t=this.parentContexts.getContext(...
method isActivated (line 1) | get isActivated(){return!!this.activated}
method component (line 1) | get component(){if(!this.activated)throw new Error("Outlet is not acti...
method activatedRoute (line 1) | get activatedRoute(){if(!this.activated)throw new Error("Outlet is not...
method activatedRouteData (line 1) | get activatedRouteData(){return this._activatedRoute?this._activatedRo...
method detach (line 1) | detach(){if(!this.activated)throw new Error("Outlet is not activated")...
method attach (line 1) | attach(t,e){this.activated=t,this._activatedRoute=e,this.location.inse...
method deactivate (line 1) | deactivate(){if(this.activated){const t=this.component;this.activated....
method activateWith (line 1) | activateWith(t,e){if(this.isActivated)throw new Error("Cannot activate...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.injector=r,this.preloadingSt...
method setUpPreloading (line 1) | setUpPreloading(){this.subscription=this.router.events.pipe(Object(O.a...
method preload (line 1) | preload(){const t=this.injector.get(s.x);return this.processRoutes(t,t...
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method processRoutes (line 1) | processRoutes(t,e){const n=[];for(const r of e)if(r.loadChildren&&!r.c...
method preloadConfig (line 1) | preloadConfig(t,e){return this.preloadingStrategy.preload(e,()=>this.l...
method constructor (line 1) | constructor(t,e,n={}){this.router=t,this.viewportScroller=e,this.optio...
method init (line 1) | init(){"disabled"!==this.options.scrollPositionRestoration&&this.viewp...
method createScrollEvents (line 1) | createScrollEvents(){return this.router.events.subscribe(t=>{t instanc...
method consumeScrollEvents (line 1) | consumeScrollEvents(){return this.router.events.subscribe(t=>{t instan...
method scheduleScrollEvent (line 1) | scheduleScrollEvent(t,e){this.router.triggerEvent(new Ct(t,"popstate"=...
method ngOnDestroy (line 1) | ngOnDestroy(){this.routerEventsSubscription&&this.routerEventsSubscrip...
method constructor (line 1) | constructor(t,e){}
method forRoot (line 1) | static forRoot(e,n){return{ngModule:t,providers:[Ln,zn(e),{provide:Dn,...
method forChild (line 1) | static forChild(e){return{ngModule:t,providers:[zn(e)]}}
method constructor (line 1) | constructor(t){this.injector=t,this.initNavigation=!1,this.resultOfPre...
method appInitializer (line 1) | appInitializer(){return this.injector.get(r.f,Promise.resolve(null)).t...
method bootstrapListener (line 1) | bootstrapListener(t){const e=this.injector.get(Mn),n=this.injector.get...
method isLegacyEnabled (line 1) | isLegacyEnabled(t){return"legacy_enabled"===t.initialNavigation||!0===...
method isLegacyDisabled (line 1) | isLegacyDisabled(t){return"legacy_disabled"===t.initialNavigation||!1=...
method constructor (line 1) | constructor(t,e){this._zone=e,this._eventNameToPlugin=new Map,t.forEac...
method addEventListener (line 1) | addEventListener(t,e,n){return this._findPluginFor(e).addEventListener...
method addGlobalEventListener (line 1) | addGlobalEventListener(t,e,n){return this._findPluginFor(e).addGlobalE...
method getZone (line 1) | getZone(){return this._zone}
method _findPluginFor (line 1) | _findPluginFor(t){const e=this._eventNameToPlugin.get(t);if(e)return e...
method constructor (line 1) | constructor(){this._stylesSet=new Set}
method addStyles (line 1) | addStyles(t){const e=new Set;t.forEach(t=>{this._stylesSet.has(t)||(th...
method onStylesAdded (line 1) | onStylesAdded(t){}
method getAllStyles (line 1) | getAllStyles(){return Array.from(this._stylesSet)}
method constructor (line 1) | constructor(t){super(),this._doc=t,this._hostNodes=new Set,this._style...
method _addStylesToHost (line 1) | _addStylesToHost(t,e){t.forEach(t=>{const n=this._doc.createElement("s...
method addHost (line 1) | addHost(t){this._addStylesToHost(this._stylesSet,t),this._hostNodes.ad...
method removeHost (line 1) | removeHost(t){this._hostNodes.delete(t)}
method onStylesAdded (line 1) | onStylesAdded(t){this._hostNodes.forEach(e=>this._addStylesToHost(t,e))}
method ngOnDestroy (line 1) | ngOnDestroy(){this._styleNodes.forEach(t=>Object(s.q)().remove(t))}
method constructor (line 1) | constructor(t,e,n){this.eventManager=t,this.sharedStylesHost=e,this.ap...
method createRenderer (line 1) | createRenderer(t,e){if(!t||!e)return this.defaultRenderer;switch(e.enc...
method begin (line 1) | begin(){}
method end (line 1) | end(){}
method constructor (line 1) | constructor(t){super(t)}
method supports (line 1) | supports(t){return!0}
method addEventListener (line 1) | addEventListener(t,e,n){return t.addEventListener(e,n,!1),()=>this.rem...
method removeEventListener (line 1) | removeEventListener(t,e,n){return t.removeEventListener(e,n)}
method constructor (line 1) | constructor(t){super(t)}
method supports (line 1) | supports(e){return null!=t.parseEventName(e)}
method addEventListener (line 1) | addEventListener(e,n,r){const i=t.parseEventName(n),o=t.eventCallback(...
method parseEventName (line 1) | static parseEventName(e){const n=e.toLowerCase().split("."),r=n.shift(...
method getEventFullKey (line 1) | static getEventFullKey(t){let e="",n=function(t){let e=t.key;if(null==...
method eventCallback (line 1) | static eventCallback(e,n,r){return s=>{t.getEventFullKey(s)===e&&r.run...
method _normalizeKey (line 1) | static _normalizeKey(t){switch(t){case"esc":return"escape";default:ret...
method constructor (line 1) | constructor(t){if(t)throw new Error("BrowserModule has already been lo...
method withServerTransition (line 1) | static withServerTransition(e){return{ngModule:t,providers:[{provide:r...
method constructor (line 1) | constructor(){this.products=[new U.a(1,"Product 1","Category 1","Produ...
method getProducts (line 1) | getProducts(){return Object(F.a)([this.products])}
method saveOrder (line 1) | saveOrder(t){return console.log(JSON.stringify(t)),Object(F.a)([t])}
method constructor (line 1) | constructor(){this.lines=[],this.itemCount=0,this.cartPrice=0}
method addLine (line 1) | addLine(t,e=1){let n=this.lines.find(e=>e.product.id==t.id);null!=n?n....
method updateQuantity (line 1) | updateQuantity(t,e){let n=this.lines.find(e=>e.product.id==t.id);null!...
method removeLine (line 1) | removeLine(t){let e=this.lines.findIndex(e=>e.product.id==t);this.line...
method clear (line 1) | clear(){this.lines=[],this.itemCount=0,this.cartPrice=0}
method recalculate (line 1) | recalculate(){this.itemCount=0,this.cartPrice=0,this.lines.forEach(t=>...
method constructor (line 1) | constructor(t){this.cart=t,this.shipped=!1}
method clear (line 1) | clear(){this.id=null,this.name=this.address=this.city=null,this.state=...
method constructor (line 1) | constructor(){this.connEvents=new Q.a,window.addEventListener("online"...
method handleConnectionChange (line 1) | handleConnectionChange(t){this.connEvents.next(this.connected)}
method connected (line 1) | get connected(){return window.navigator.onLine}
method Changes (line 1) | get Changes(){return this.connEvents}
method constructor (line 1) | constructor(t){this.cart=t}
method constructor (line 1) | constructor(t,e){this.container=t,this.template=e}
method ngOnChanges (line 1) | ngOnChanges(t){this.container.clear();for(let e=0;e<this.counter;e++)t...
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.cart=e,this.router=n,this.se...
method products (line 1) | get products(){let t=(this.selectedPage-1)*this.productsPerPage;return...
method categories (line 1) | get categories(){return this.repository.getCategories()}
method changeCategory (line 1) | changeCategory(t){this.selectedCategory=t}
method changePage (line 1) | changePage(t){this.selectedPage=t}
method changePageSize (line 1) | changePageSize(t){this.productsPerPage=Number(t),this.changePage(1)}
method pageCount (line 1) | get pageCount(){return Math.ceil(this.repository.getProducts(this.sele...
method addProductToCart (line 1) | addProductToCart(t){this.cart.addLine(t),this.router.navigateByUrl("/c...
method constructor (line 1) | constructor(t,e){this.repository=t,this.order=e,this.orderSent=!1,this...
method submitOrder (line 1) | submitOrder(t){this.submitted=!0,t.valid&&this.repository.saveOrder(th...
method constructor (line 1) | constructor(t,e){this.cart=t,this.connection=e,this.connected=!0,this....
method constructor (line 1) | constructor(t){this.router=t,this.firstNavigation=!0}
method canActivate (line 1) | canActivate(t,e){return!this.firstNavigation||(this.firstNavigation=!1...
method constructor (line 1) | constructor(e,n=t.now){this.SchedulerAction=e,this.now=n}
method schedule (line 1) | schedule(t,e=0,n){return new this.SchedulerAction(this,t).schedule(n,e)}
method constructor (line 1) | constructor(t,e,n){this.kind=t,this.value=e,this.error=n,this.hasValue...
method observe (line 1) | observe(t){switch(this.kind){case"N":return t.next&&t.next(this.value)...
method do (line 1) | do(t,e,n){switch(this.kind){case"N":return t&&t(this.value);case"E":re...
method accept (line 1) | accept(t,e,n){return t&&"function"==typeof t.next?this.observe(t):this...
method toObservable (line 1) | toObservable(){switch(this.kind){case"N":return Object(At.a)(this.valu...
method createNext (line 1) | static createNext(e){return void 0!==e?new t("N",e):t.undefinedValueNo...
method createError (line 1) | static createError(e){return new t("E",void 0,e)}
method createComplete (line 1) | static createComplete(){return t.completeNotification}
method constructor (line 1) | constructor(t){if(this.sw=t,this.subscriptionChanges=new Q.a,!t.isEnab...
method isEnabled (line 1) | get isEnabled(){return this.sw.isEnabled}
method requestSubscription (line 1) | requestSubscription(t){if(!this.sw.isEnabled)return Promise.reject(new...
method unsubscribe (line 1) | unsubscribe(){return this.sw.isEnabled?this.subscription.pipe(Object(L...
method decodeBase64 (line 1) | decodeBase64(t){return atob(t)}
method constructor (line 1) | constructor(t){if(this.sw=t,!t.isEnabled)return this.available=It,void...
method isEnabled (line 1) | get isEnabled(){return this.sw.isEnabled}
method checkForUpdate (line 1) | checkForUpdate(){if(!this.sw.isEnabled)return Promise.reject(new Error...
method activateUpdate (line 1) | activateUpdate(){if(!this.sw.isEnabled)return Promise.reject(new Error...
method register (line 1) | static register(e,n={}){return{ngModule:t,providers:[{provide:ne,useVa...
class t (line 1) | class t{constructor(t,e,n){this._renderer=t,this._elementRef=e,this._com...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=t}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(t,e,n){this._renderer=t,this._elementRef=e,this._compositi...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=t}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _handleInput (line 1) | _handleInput(t){(!this._compositionMode||this._compositionMode&&!this....
method _compositionStart (line 1) | _compositionStart(){this._composing=!0}
method _compositionEnd (line 1) | _compositionEnd(t){this._composing=!1,this._compositionMode&&this.onCh...
method value (line 1) | get value(){return this.control?this.control.value:null}
method valid (line 1) | get valid(){return this.control?this.control.valid:null}
method invalid (line 1) | get invalid(){return this.control?this.control.invalid:null}
method pending (line 1) | get pending(){return this.control?this.control.pending:null}
method disabled (line 1) | get disabled(){return this.control?this.control.disabled:null}
method enabled (line 1) | get enabled(){return this.control?this.control.enabled:null}
method errors (line 1) | get errors(){return this.control?this.control.errors:null}
method pristine (line 1) | get pristine(){return this.control?this.control.pristine:null}
method dirty (line 1) | get dirty(){return this.control?this.control.dirty:null}
method touched (line 1) | get touched(){return this.control?this.control.touched:null}
method status (line 1) | get status(){return this.control?this.control.status:null}
method untouched (line 1) | get untouched(){return this.control?this.control.untouched:null}
method statusChanges (line 1) | get statusChanges(){return this.control?this.control.statusChanges:null}
method valueChanges (line 1) | get valueChanges(){return this.control?this.control.valueChanges:null}
method path (line 1) | get path(){return null}
method reset (line 1) | reset(t){this.control&&this.control.reset(t)}
method hasError (line 1) | hasError(t,e){return!!this.control&&this.control.hasError(t,e)}
method getError (line 1) | getError(t,e){return this.control?this.control.getError(t,e):null}
method formDirective (line 1) | get formDirective(){return null}
method path (line 1) | get path(){return null}
method constructor (line 1) | constructor(t){super(t)}
method constructor (line 1) | constructor(t){super(t)}
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{t(""==e?null:parseFloat(e))}}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(){this._accessors=[]}
method add (line 1) | add(t,e){this._accessors.push([t,e])}
method remove (line 1) | remove(t){for(let e=this._accessors.length-1;e>=0;--e)if(this._accesso...
method select (line 1) | select(t){this._accessors.forEach(e=>{this._isSameGroup(e,t)&&e[1]!==t...
method _isSameGroup (line 1) | _isSameGroup(t,e){return!!t[0].control&&t[0]._parent===e._control._par...
method constructor (line 1) | constructor(t,e,n,r){this._renderer=t,this._elementRef=e,this._registr...
method ngOnInit (line 1) | ngOnInit(){this._control=this._injector.get(w),this._checkName(),this....
method ngOnDestroy (line 1) | ngOnDestroy(){this._registry.remove(this)}
method writeValue (line 1) | writeValue(t){this._state=t===this.value,this._renderer.setProperty(th...
method registerOnChange (line 1) | registerOnChange(t){this._fn=t,this.onChange=()=>{t(this.value),this._...
method fireUncheck (line 1) | fireUncheck(t){this.writeValue(t)}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _checkName (line 1) | _checkName(){this.name&&this.formControlName&&this.name!==this.formCon...
method _throwNameError (line 1) | _throwNameError(){throw new Error('\n If you define both a name a...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{t(""==e?null:parseFloat(e))}}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this._optionMap=n...
method compareWith (line 1) | set compareWith(t){if("function"!=typeof t)throw new Error(`compareWit...
method writeValue (line 1) | writeValue(t){this.value=t;const e=this._getOptionId(t);null==e&&this....
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{this.value=this._getOptionValue(...
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _registerOption (line 1) | _registerOption(){return(this._idCounter++).toString()}
method _getOptionId (line 1) | _getOptionId(t){for(const e of Array.from(this._optionMap.keys()))if(t...
method _getOptionValue (line 1) | _getOptionValue(t){const e=function(t){return t.split(":")[0]}(t);retu...
method constructor (line 1) | constructor(t,e,n){this._element=t,this._renderer=e,this._select=n,thi...
method ngValue (line 1) | set ngValue(t){null!=this._select&&(this._select._optionMap.set(this.i...
method value (line 1) | set value(t){this._setElementValue(t),this._select&&this._select.write...
method _setElementValue (line 1) | _setElementValue(t){this._renderer.setProperty(this._element.nativeEle...
method ngOnDestroy (line 1) | ngOnDestroy(){this._select&&(this._select._optionMap.delete(this.id),t...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this._optionMap=n...
method compareWith (line 1) | set compareWith(t){if("function"!=typeof t)throw new Error(`compareWit...
method writeValue (line 1) | writeValue(t){let e;if(this.value=t,Array.isArray(t)){const n=t.map(t=...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{const n=[];if(e.hasOwnProperty("...
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _registerOption (line 1) | _registerOption(t){const e=(this._idCounter++).toString();return this....
method _getOptionId (line 1) | _getOptionId(t){for(const e of Array.from(this._optionMap.keys()))if(t...
method _getOptionValue (line 1) | _getOptionValue(t){const e=function(t){return t.split(":")[0]}(t);retu...
method constructor (line 1) | constructor(t,e,n){this._element=t,this._renderer=e,this._select=n,thi...
method ngValue (line 1) | set ngValue(t){null!=this._select&&(this._value=t,this._setElementValu...
method value (line 1) | set value(t){this._select?(this._value=t,this._setElementValue(Q(this....
method _setElementValue (line 1) | _setElementValue(t){this._renderer.setProperty(this._element.nativeEle...
method _setSelected (line 1) | _setSelected(t){this._renderer.setProperty(this._element.nativeElement...
method ngOnDestroy (line 1) | ngOnDestroy(){this._select&&(this._select._optionMap.delete(this.id),t...
method constructor (line 1) | constructor(t,e){super(),this.submitted=!1,this._directives=[],this.ng...
method ngAfterViewInit (line 1) | ngAfterViewInit(){this._setUpdateStrategy()}
method formDirective (line 1) | get formDirective(){return this}
method control (line 1) | get control(){return this.form}
method path (line 1) | get path(){return[]}
method controls (line 1) | get controls(){return this.form.controls}
method addControl (line 1) | addControl(t){pt.then(()=>{const e=this._findContainer(t.path);t.contr...
method getControl (line 1) | getControl(t){return this.form.get(t.path)}
method removeControl (line 1) | removeControl(t){pt.then(()=>{const e=this._findContainer(t.path);e&&e...
method addFormGroup (line 1) | addFormGroup(t){pt.then(()=>{const e=this._findContainer(t.path),n=new...
method removeFormGroup (line 1) | removeFormGroup(t){pt.then(()=>{const e=this._findContainer(t.path);e&...
method getFormGroup (line 1) | getFormGroup(t){return this.form.get(t.path)}
method updateModel (line 1) | updateModel(t,e){pt.then(()=>{this.form.get(t.path).setValue(e)})}
method setValue (line 1) | setValue(t){this.control.setValue(t)}
method onSubmit (line 1) | onSubmit(t){return this.submitted=!0,e=this._directives,this.form._syn...
method onReset (line 1) | onReset(){this.resetForm()}
method resetForm (line 1) | resetForm(t){this.form.reset(t),this.submitted=!1}
method _setUpdateStrategy (line 1) | _setUpdateStrategy(){this.options&&null!=this.options.updateOn&&(this....
method _findContainer (line 1) | _findContainer(t){return t.pop(),t.length?this.form.get(t):this.form}
method ngOnInit (line 1) | ngOnInit(){this._checkParentType(),this.formDirective.addFormGroup(this)}
method ngOnDestroy (line 1) | ngOnDestroy(){this.formDirective&&this.formDirective.removeFormGroup(t...
method control (line 1) | get control(){return this.formDirective.getFormGroup(this)}
method path (line 1) | get path(){return X(null==this.name?this.name:this.name.toString(),thi...
method formDirective (line 1) | get formDirective(){return this._parent?this._parent.formDirective:null}
method validator (line 1) | get validator(){return nt(this._validators)}
method asyncValidator (line 1) | get asyncValidator(){return rt(this._asyncValidators)}
method _checkParentType (line 1) | _checkParentType(){}
method constructor (line 1) | constructor(t,e,n){super(),this._parent=t,this._validators=e,this._asy...
method _checkParentType (line 1) | _checkParentType(){this._parent instanceof t||this._parent instanceof ...
method constructor (line 1) | constructor(t,e,n,s){super(),this.control=new ut,this._registered=!1,t...
method ngOnChanges (line 1) | ngOnChanges(t){this._checkForErrors(),this._registered||this._setUpCon...
method ngOnDestroy (line 1) | ngOnDestroy(){this.formDirective&&this.formDirective.removeControl(this)}
method path (line 1) | get path(){return this._parent?X(this.name,this._parent):[this.name]}
method formDirective (line 1) | get formDirective(){return this._parent?this._parent.formDirective:null}
method validator (line 1) | get validator(){return nt(this._rawValidators)}
method asyncValidator (line 1) | get asyncValidator(){return rt(this._rawAsyncValidators)}
method viewToModelUpdate (line 1) | viewToModelUpdate(t){this.viewModel=t,this.update.emit(t)}
method _setUpControl (line 1) | _setUpControl(){this._setUpdateStrategy(),this._isStandalone()?this._s...
method _setUpdateStrategy (line 1) | _setUpdateStrategy(){this.options&&null!=this.options.updateOn&&(this....
method _isStandalone (line 1) | _isStandalone(){return!this._parent||!(!this.options||!this.options.st...
method _setUpStandalone (line 1) | _setUpStandalone(){Y(this.control,this),this.control.updateValueAndVal...
method _checkForErrors (line 1) | _checkForErrors(){this._isStandalone()||this._checkParentType(),this._...
method _checkParentType (line 1) | _checkParentType(){!(this._parent instanceof vt)&&this._parent instanc...
method _checkName (line 1) | _checkName(){this.options&&this.options.name&&(this.name=this.options....
method _updateValue (line 1) | _updateValue(t){wt.then(()=>{this.control.setValue(t,{emitViewToModelC...
method _updateDisabled (line 1) | _updateDisabled(t){const e=t.isDisabled.currentValue,n=""===e||e&&"fal...
method required (line 1) | get required(){return this._required}
method required (line 1) | set required(t){this._required=null!=t&&!1!==t&&"false"!==`${t}`,this....
method validate (line 1) | validate(t){return this.required?A.required(t):null}
method registerOnValidatorChange (line 1) | registerOnValidatorChange(t){this._onChange=t}
method constructor (line 1) | constructor(t){this.http=t,this.baseUrl="/api/"}
method getProducts (line 1) | getProducts(){return this.http.get(this.baseUrl+"products")}
method saveOrder (line 1) | saveOrder(t){return this.http.post(this.baseUrl+"orders",t)}
method authenticate (line 1) | authenticate(t,e){return this.http.post(this.baseUrl+"login",{name:t,p...
method saveProduct (line 1) | saveProduct(t){return this.http.post(this.baseUrl+"products",t,this.ge...
method updateProduct (line 1) | updateProduct(t){return this.http.put(`${this.baseUrl}products/${t.id}...
method deleteProduct (line 1) | deleteProduct(t){return this.http.delete(`${this.baseUrl}products/${t}...
method getOrders (line 1) | getOrders(){return this.http.get(this.baseUrl+"orders",this.getOptions...
method deleteOrder (line 1) | deleteOrder(t){return this.http.delete(`${this.baseUrl}orders/${t}`,th...
method updateOrder (line 1) | updateOrder(t){return this.http.put(`${this.baseUrl}orders/${t.id}`,t,...
method getOptions (line 1) | getOptions(){return{headers:new s.c({Authorization:`Bearer<${this.auth...
method constructor (line 1) | constructor(t){this._isScalar=!1,t&&(this._subscribe=t)}
method lift (line 1) | lift(e){const n=new t;return n.source=this,n.operator=e,n}
method subscribe (line 1) | subscribe(t,e,n){const{operator:o}=this,a=function(t,e,n){if(t){if(t i...
method _trySubscribe (line 1) | _trySubscribe(t){try{return this._subscribe(t)}catch(e){c.a.useDepreca...
method forEach (line 1) | forEach(t,e){return new(e=l(e))((e,n)=>{let r;r=this.subscribe(e=>{try...
method _subscribe (line 1) | _subscribe(t){const{source:e}=this;return e&&e.subscribe(t)}
method pipe (line 1) | pipe(...t){return 0===t.length?this:Object(a.b)(t)(this)}
method toPromise (line 1) | toPromise(t){return new(t=l(t))((t,e)=>{let n;this.subscribe(t=>n=t,t=...
method constructor (line 1) | constructor(){super(),this.observers=[],this.closed=!1,this.isStopped=...
method lift (line 1) | lift(t){const e=new h(this,this);return e.operator=t,e}
method next (line 1) | next(t){if(this.closed)throw new o.a;if(!this.isStopped){const{observe...
method error (line 1) | error(t){if(this.closed)throw new o.a;this.hasError=!0,this.thrownErro...
method complete (line 1) | complete(){if(this.closed)throw new o.a;this.isStopped=!0;const{observ...
method unsubscribe (line 1) | unsubscribe(){this.isStopped=!0,this.closed=!0,this.observers=null}
method _trySubscribe (line 1) | _trySubscribe(t){if(this.closed)throw new o.a;return super._trySubscri...
method _subscribe (line 1) | _subscribe(t){if(this.closed)throw new o.a;return this.hasError?(t.err...
method asObservable (line 1) | asObservable(){const t=new r.a;return t.source=this,t}
method create (line 1) | static create(t,e){return Array.isArray(t)?ii(t,e,""):ii(t.providers,t...
method constructor (line 1) | constructor(t){this.nativeElement=t}
method constructor (line 1) | constructor(t){this.factories=t}
method create (line 1) | static create(e,n){if(null!=n){const t=n.factories.slice();e=e.concat(...
method extend (line 1) | static extend(e){return{provide:t,useFactory:n=>{if(!n)throw new Error...
method find (line 1) | find(t){const e=this.factories.find(e=>e.supports(t));if(null!=e)retur...
method constructor (line 1) | constructor(t){this.factories=t}
method create (line 1) | static create(e,n){if(n){const t=n.factories.slice();e=e.concat(t)}ret...
method extend (line 1) | static extend(e){return{provide:t,useFactory:n=>{if(!n)throw new Error...
method find (line 1) | find(t){const e=this.factories.find(e=>e.supports(t));if(e)return e;th...
method constructor (line 1) | constructor(t){this.appInits=t,this.initialized=!1,this.done=!1,this.d...
method runInitializers (line 1) | runInitializers(){if(this.initialized)return;const t=[],e=()=>{this.do...
method log (line 1) | log(t){console.log(t)}
method warn (line 1) | warn(t){console.warn(t)}
method constructor (line 1) | constructor(){this.compileModuleSync=Za,this.compileModuleAsync=Qa,thi...
method clearCache (line 1) | clearCache(){}
method clearCacheFor (line 1) | clearCacheFor(t){}
method getModuleId (line 1) | getModuleId(t){}
method constructor (line 1) | constructor(t){this._ngZone=t,this._pendingCount=0,this._isZoneStable=...
method _watchAngularEvents (line 1) | _watchAngularEvents(){this._ngZone.onUnstable.subscribe({next:()=>{thi...
method increasePendingRequestCount (line 1) | increasePendingRequestCount(){return this._pendingCount+=1,this._didWo...
method decreasePendingRequestCount (line 1) | decreasePendingRequestCount(){if(this._pendingCount-=1,this._pendingCo...
method isStable (line 1) | isStable(){return this._isZoneStable&&0===this._pendingCount&&!this._n...
method _runCallbacksIfReady (line 1) | _runCallbacksIfReady(){if(this.isStable())nc(()=>{for(;0!==this._callb...
method getPendingTasks (line 1) | getPendingTasks(){return this.taskTrackingZone?this.taskTrackingZone.m...
method addCallback (line 1) | addCallback(t,e,n){let r=-1;e&&e>0&&(r=setTimeout(()=>{this._callbacks...
method whenStable (line 1) | whenStable(t,e,n){if(n&&!this.taskTrackingZone)throw new Error('Task t...
method getPendingRequestCount (line 1) | getPendingRequestCount(){return this._pendingCount}
method findProviders (line 1) | findProviders(t,e,n){return[]}
method constructor (line 1) | constructor(){this._applications=new Map,mc.addToWindow(this)}
method registerApplication (line 1) | registerApplication(t,e){this._applications.set(t,e)}
method unregisterApplication (line 1) | unregisterApplication(t){this._applications.delete(t)}
method unregisterAllApplications (line 1) | unregisterAllApplications(){this._applications.clear()}
method getTestability (line 1) | getTestability(t){return this._applications.get(t)||null}
method getAllTestabilities (line 1) | getAllTestabilities(){return Array.from(this._applications.values())}
method getAllRootElements (line 1) | getAllRootElements(){return Array.from(this._applications.keys())}
method findTestabilityInTree (line 1) | findTestabilityInTree(t,e=!0){return mc.findTestabilityInTree(this,t,e)}
method constructor (line 1) | constructor(t){this._injector=t,this._modules=[],this._destroyListener...
method bootstrapModuleFactory (line 1) | bootstrapModuleFactory(t,e){const n=function(t,e){let n;return n="noop...
method bootstrapModule (line 1) | bootstrapModule(t,e=[]){const n=Sc({},e);return bc(this.injector,n,t)....
method _moduleDoBootstrap (line 1) | _moduleDoBootstrap(t){const e=t.injector.get(Oc);if(t._bootstrapCompon...
method onDestroy (line 1) | onDestroy(t){this._destroyListeners.push(t)}
method injector (line 1) | get injector(){return this._injector}
method destroy (line 1) | destroy(){if(this._destroyed)throw new Error("The platform has already...
method destroyed (line 1) | get destroyed(){return this._destroyed}
method constructor (line 1) | constructor(t,e,n,r,s,l){this._zone=t,this._console=e,this._injector=n...
method bootstrap (line 1) | bootstrap(t,e){if(!this._initStatus.done)throw new Error("Cannot boots...
method tick (line 1) | tick(){if(this._runningTick)throw new Error("ApplicationRef.tick is ca...
method attachView (line 1) | attachView(t){const e=t;this._views.push(e),e.attachToAppRef(this)}
method detachView (line 1) | detachView(t){const e=t;Ec(this._views,e),e.detachFromAppRef()}
method _loadComponent (line 1) | _loadComponent(t){this.attachView(t.hostView),this.tick(),this.compone...
method _unloadComponent (line 1) | _unloadComponent(t){this.detachView(t.hostView),Ec(this.components,t)}
method ngOnDestroy (line 1) | ngOnDestroy(){this._views.slice().forEach(t=>t.destroy())}
method viewCount (line 1) | get viewCount(){return this._views.length}
method constructor (line 1) | constructor(t,e){this._compiler=t,this._config=e||kc}
method load (line 1) | load(t){return this.loadAndCompile(t)}
method loadAndCompile (line 1) | loadAndCompile(t){let[e,r]=t.split("#");return void 0===r&&(r="default...
method loadFactory (line 1) | loadFactory(t){let[e,r]=t.split("#"),s="NgFactory";return void 0===r&&...
method constructor (line 1) | constructor(t){}
method constructor (line 1) | constructor(t){this.datasource=t}
method authenticate (line 1) | authenticate(t,e){return this.datasource.authenticate(t,e)}
method authenticated (line 1) | get authenticated(){return null!=this.datasource.auth_token}
method clear (line 1) | clear(){this.datasource.auth_token=null}
method constructor (line 1) | constructor(t){this.dataSource=t,this.orders=[],this.loaded=!1}
method loadOrders (line 1) | loadOrders(){this.loaded=!0,this.dataSource.getOrders().subscribe(t=>t...
method getOrders (line 1) | getOrders(){return this.loaded||this.loadOrders(),this.orders}
method saveOrder (line 1) | saveOrder(t){return this.dataSource.saveOrder(t)}
method updateOrder (line 1) | updateOrder(t){this.dataSource.updateOrder(t).subscribe(t=>{this.order...
method deleteOrder (line 1) | deleteOrder(t){this.dataSource.deleteOrder(t).subscribe(e=>{this.order...
method constructor (line 1) | constructor(t){this.dataSource=t,this.products=[],this.categories=[],t...
method getProducts (line 1) | getProducts(t=null){return this.products.filter(e=>null==t||t==e.categ...
method getProduct (line 1) | getProduct(t){return this.products.find(e=>e.id==t)}
method getCategories (line 1) | getCategories(){return this.categories}
method saveProduct (line 1) | saveProduct(t){null==t.id||0==t.id?this.dataSource.saveProduct(t).subs...
method deleteProduct (line 1) | deleteProduct(t){this.dataSource.deleteProduct(t).subscribe(e=>{this.p...
method constructor (line 1) | constructor(t){super(),this._doc=t,this._init()}
method _init (line 1) | _init(){this.location=i().getLocation(),this._history=i().getHistory()}
method getBaseHrefFromDOM (line 1) | getBaseHrefFromDOM(){return i().getBaseHref(this._doc)}
method onPopState (line 1) | onPopState(t){i().getGlobalEventTarget(this._doc,"window").addEventLis...
method onHashChange (line 1) | onHashChange(t){i().getGlobalEventTarget(this._doc,"window").addEventL...
method href (line 1) | get href(){return this.location.href}
method protocol (line 1) | get protocol(){return this.location.protocol}
method hostname (line 1) | get hostname(){return this.location.hostname}
method port (line 1) | get port(){return this.location.port}
method pathname (line 1) | get pathname(){return this.location.pathname}
method search (line 1) | get search(){return this.location.search}
method hash (line 1) | get hash(){return this.location.hash}
method pathname (line 1) | set pathname(t){this.location.pathname=t}
method pushState (line 1) | pushState(t,e,n){p()?this._history.pushState(t,e,n):this.location.hash=n}
method replaceState (line 1) | replaceState(t,e,n){p()?this._history.replaceState(t,e,n):this.locatio...
method forward (line 1) | forward(){this._history.forward()}
method back (line 1) | back(){this._history.back()}
method getState (line 1) | getState(){return this._history.state}
method constructor (line 1) | constructor(t,e){if(super(),this._platformLocation=t,null==e&&(e=this....
method onPopState (line 1) | onPopState(t){this._platformLocation.onPopState(t),this._platformLocat...
method getBaseHref (line 1) | getBaseHref(){return this._baseHref}
method prepareExternalUrl (line 1) | prepareExternalUrl(t){return g(this._baseHref,t)}
method path (line 1) | path(t=!1){const e=this._platformLocation.pathname+b(this._platformLoc...
method pushState (line 1) | pushState(t,e,n,r){const s=this.prepareExternalUrl(n+b(r));this._platf...
method replaceState (line 1) | replaceState(t,e,n,r){const s=this.prepareExternalUrl(n+b(r));this._pl...
method forward (line 1) | forward(){this._platformLocation.forward()}
method back (line 1) | back(){this._platformLocation.back()}
method constructor (line 1) | constructor(t,e){super(),this._platformLocation=t,this._baseHref="",nu...
method onPopState (line 1) | onPopState(t){this._platformLocation.onPopState(t),this._platformLocat...
method getBaseHref (line 1) | getBaseHref(){return this._baseHref}
method path (line 1) | path(t=!1){let e=this._platformLocation.hash;return null==e&&(e="#"),e...
method prepareExternalUrl (line 1) | prepareExternalUrl(t){const e=g(this._baseHref,t);return e.length>0?"#...
method pushState (line 1) | pushState(t,e,n,r){let s=this.prepareExternalUrl(n+b(r));0==s.length&&...
method replaceState (line 1) | replaceState(t,e,n,r){let s=this.prepareExternalUrl(n+b(r));0==s.lengt...
method forward (line 1) | forward(){this._platformLocation.forward()}
method back (line 1) | back(){this._platformLocation.back()}
method constructor (line 1) | constructor(t,e){this._subject=new r.n,this._urlChangeListeners=[],thi...
method path (line 1) | path(t=!1){return this.normalize(this._platformStrategy.path(t))}
method getState (line 1) | getState(){return this._platformLocation.getState()}
method isCurrentPathEqualTo (line 1) | isCurrentPathEqualTo(t,e=""){return this.path()==this.normalize(t+b(e))}
method normalize (line 1) | normalize(e){return t.stripTrailingSlash(function(t,e){return t&&e.sta...
method prepareExternalUrl (line 1) | prepareExternalUrl(t){return t&&"/"!==t[0]&&(t="/"+t),this._platformSt...
method go (line 1) | go(t,e="",n=null){this._platformStrategy.pushState(n,"",t,e),this._not...
method replaceState (line 1) | replaceState(t,e="",n=null){this._platformStrategy.replaceState(n,"",t...
method forward (line 1) | forward(){this._platformStrategy.forward()}
method back (line 1) | back(){this._platformStrategy.back()}
method onUrlChange (line 1) | onUrlChange(t){this._urlChangeListeners.push(t),this.subscribe(t=>{thi...
method _notifyUrlChangeListeners (line 1) | _notifyUrlChangeListeners(t="",e){this._urlChangeListeners.forEach(n=>...
method subscribe (line 1) | subscribe(t,e,n){return this._subject.subscribe({next:t,error:e,comple...
method constructor (line 1) | constructor(t){super(),this.locale=t}
method getPluralCategory (line 1) | getPluralCategory(t,e){switch(P(e||this.locale)(t)){case k.Zero:return...
method constructor (line 1) | constructor(t,e,n){this._viewContainer=t,this._template=e,this._differ...
method ngForOf (line 1) | set ngForOf(t){this._ngForOf=t,this._ngForOfDirty=!0}
method ngForTrackBy (line 1) | set ngForTrackBy(t){Object(r.T)()&&null!=t&&"function"!=typeof t&&cons...
method ngForTrackBy (line 1) | get ngForTrackBy(){return this._trackByFn}
method ngForTemplate (line 1) | set ngForTemplate(t){t&&(this._template=t)}
method ngDoCheck (line 1) | ngDoCheck(){if(this._ngForOfDirty){this._ngForOfDirty=!1;const n=this....
method _applyChanges (line 1) | _applyChanges(t){const e=[];t.forEachOperation((t,n,r)=>{if(null==t.pr...
method _perViewChange (line 1) | _perViewChange(t,e){t.context.$implicit=e.item}
method ngTemplateContextGuard (line 1) | static ngTemplateContextGuard(t,e){return!0}
method constructor (line 1) | constructor(t,e){this._viewContainer=t,this._context=new H,this._thenT...
method ngIf (line 1) | set ngIf(t){this._context.$implicit=this._context.ngIf=t,this._updateV...
method ngIfThen (line 1) | set ngIfThen(t){$("ngIfThen",t),this._thenTemplateRef=t,this._thenView...
method ngIfElse (line 1) | set ngIfElse(t){$("ngIfElse",t),this._elseTemplateRef=t,this._elseView...
method _updateView (line 1) | _updateView(){this._context.$implicit?this._thenViewRef||(this._viewCo...
method ngTemplateContextGuard (line 1) | static ngTemplateContextGuard(t,e){return!0}
method constructor (line 1) | constructor(t,e="USD"){this._locale=t,this._defaultCurrencyCode=e}
method transform (line 1) | transform(e,n,s="symbol",i,o){if(function(t){return null==t||""===t||t...
method constructor (line 1) | constructor(t){this.closed=!1,this._parentOrParents=null,this._subscri...
method unsubscribe (line 1) | unsubscribe(){let e;if(this.closed)return;let{_parentOrParents:n,_unsu...
method add (line 1) | add(e){let n=e;if(!e)return t.EMPTY;switch(typeof e){case"function":n=...
method remove (line 1) | remove(t){const e=this._subscriptions;if(e){const n=e.indexOf(t);-1!==...
method constructor (line 1) | constructor(t){this.handler=t}
method request (line 1) | request(t,e,n={}){let r;if(t instanceof v)r=t;else{let s=void 0;s=n.he...
method delete (line 1) | delete(t,e={}){return this.request("DELETE",t,e)}
method get (line 1) | get(t,e={}){return this.request("GET",t,e)}
method head (line 1) | head(t,e={}){return this.request("HEAD",t,e)}
method jsonp (line 1) | jsonp(t,e){return this.request("JSONP",t,{params:(new g).append(e,"JSO...
method options (line 1) | options(t,e={}){return this.request("OPTIONS",t,e)}
method patch (line 1) | patch(t,e,n={}){return this.request("PATCH",t,E(n,e))}
method post (line 1) | post(t,e,n={}){return this.request("POST",t,E(n,e))}
method put (line 1) | put(t,e,n={}){return this.request("PUT",t,E(n,e))}
method intercept (line 1) | intercept(t,e){return e.handle(t)}
method constructor (line 1) | constructor(){}
method build (line 1) | build(){return new XMLHttpRequest}
method constructor (line 1) | constructor(t){this.xhrFactory=t}
method handle (line 1) | handle(t){if("JSONP"===t.method)throw new Error("Attempted to construc...
method constructor (line 1) | constructor(t,e,n){this.doc=t,this.platform=e,this.cookieName=n,this.l...
method getToken (line 1) | getToken(){if("server"===this.platform)return null;const t=this.doc.co...
method constructor (line 1) | constructor(t,e){this.tokenService=t,this.headerName=e}
method intercept (line 1) | intercept(t,e){const n=t.url.toLowerCase();if("GET"===t.method||"HEAD"...
method constructor (line 1) | constructor(t,e){this.backend=t,this.injector=e,this.chain=null}
method handle (line 1) | handle(t){if(null===this.chain){const t=this.injector.get(k,[]);this.c...
method disable (line 1) | static disable(){return{ngModule:t,providers:[{provide:V,useClass:A}]}}
method withOptions (line 1) | static withOptions(e={}){return{ngModule:t,providers:[e.cookieName?{pr...
method constructor (line 1) | constructor(t,e,n,r,i,o,c,l){this.rootComponentType=t,this.urlSerializ...
method setupNavigations (line 1) | setupNavigations(t){const e=this.events;return t.pipe(Object(O.a)(t=>0...
method resetRootComponentType (line 1) | resetRootComponentType(t){this.rootComponentType=t,this.routerState.ro...
method getTransition (line 1) | getTransition(){const t=this.transitions.value;return t.urlAfterRedire...
method setTransition (line 1) | setTransition(t){this.transitions.next(Object.assign(Object.assign({},...
method initialNavigation (line 1) | initialNavigation(){this.setUpLocationChangeListener(),0===this.naviga...
method setUpLocationChangeListener (line 1) | setUpLocationChangeListener(){this.locationSubscription||(this.locatio...
method url (line 1) | get url(){return this.serializeUrl(this.currentUrlTree)}
method getCurrentNavigation (line 1) | getCurrentNavigation(){return this.currentNavigation}
method triggerEvent (line 1) | triggerEvent(t){this.events.next(t)}
method resetConfig (line 1) | resetConfig(t){At(t),this.config=t.map(It),this.navigated=!1,this.last...
method ngOnDestroy (line 1) | ngOnDestroy(){this.dispose()}
method dispose (line 1) | dispose(){this.locationSubscription&&(this.locationSubscription.unsubs...
method createUrlTree (line 1) | createUrlTree(t,e={}){const{relativeTo:n,queryParams:r,fragment:i,pres...
method navigateByUrl (line 1) | navigateByUrl(t,e={skipLocationChange:!1}){Object(s.T)()&&this.isNgZon...
method navigate (line 1) | navigate(t,e={skipLocationChange:!1}){return function(t){for(let e=0;e...
method serializeUrl (line 1) | serializeUrl(t){return this.urlSerializer.serialize(t)}
method parseUrl (line 1) | parseUrl(t){let e;try{e=this.urlSerializer.parse(t)}catch(n){e=this.ma...
method isActive (line 1) | isActive(t,e){if(Me(t))return Ut(this.currentUrlTree,t,e);const n=this...
method removeEmptyProps (line 1) | removeEmptyProps(t){return Object.keys(t).reduce((e,n)=>{const r=t[n];...
method processNavigations (line 1) | processNavigations(){this.navigations.subscribe(t=>{this.navigated=!0,...
method scheduleNavigation (line 1) | scheduleNavigation(t,e,n,r,s){const i=this.getTransition();if(i&&"impe...
method setBrowserUrl (line 1) | setBrowserUrl(t,e,n,r){const s=this.urlSerializer.serialize(t);r=r||{}...
method resetStateAndUrl (line 1) | resetStateAndUrl(t,e,n){this.routerState=t,this.currentUrlTree=e,this....
method resetUrlToCurrentUrlTree (line 1) | resetUrlToCurrentUrlTree(){this.location.replaceState(this.urlSerializ...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.route=e,this.commands=[],nul...
method routerLink (line 1) | set routerLink(t){this.commands=null!=t?Array.isArray(t)?t:[t]:[]}
method preserveQueryParams (line 1) | set preserveQueryParams(t){Object(s.T)()&&console&&console.warn&&conso...
method onClick (line 1) | onClick(){const t={skipLocationChange:En(this.skipLocationChange),repl...
method urlTree (line 1) | get urlTree(){return this.router.createUrlTree(this.commands,{relative...
method constructor (line 1) | constructor(t,e,n){this.router=t,this.route=e,this.locationStrategy=n,...
method routerLink (line 1) | set routerLink(t){this.commands=null!=t?Array.isArray(t)?t:[t]:[]}
method preserveQueryParams (line 1) | set preserveQueryParams(t){Object(s.T)()&&console&&console.warn&&conso...
method ngOnChanges (line 1) | ngOnChanges(t){this.updateTargetUrlAndHref()}
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method onClick (line 1) | onClick(t,e,n,r){if(0!==t||e||n||r)return!0;if("string"==typeof this.t...
method updateTargetUrlAndHref (line 1) | updateTargetUrlAndHref(){this.href=this.locationStrategy.prepareExtern...
method urlTree (line 1) | get urlTree(){return this.router.createUrlTree(this.commands,{relative...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.element=e,this.renderer=n,th...
method ngAfterContentInit (line 1) | ngAfterContentInit(){this.links.changes.subscribe(t=>this.update()),th...
method routerLinkActive (line 1) | set routerLinkActive(t){const e=Array.isArray(t)?t:t.split(" ");this.c...
method ngOnChanges (line 1) | ngOnChanges(t){this.update()}
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method update (line 1) | update(){this.links&&this.linksWithHrefs&&this.router.navigated&&Promi...
method isLinkActive (line 1) | isLinkActive(t){return e=>t.isActive(e.urlTree,this.routerLinkActiveOp...
method hasActiveLinks (line 1) | hasActiveLinks(){const t=this.isLinkActive(this.router);return this.li...
method constructor (line 1) | constructor(t,e,n,r,i){this.parentContexts=t,this.location=e,this.reso...
method ngOnDestroy (line 1) | ngOnDestroy(){this.parentContexts.onChildOutletDestroyed(this.name)}
method ngOnInit (line 1) | ngOnInit(){if(!this.activated){const t=this.parentContexts.getContext(...
method isActivated (line 1) | get isActivated(){return!!this.activated}
method component (line 1) | get component(){if(!this.activated)throw new Error("Outlet is not acti...
method activatedRoute (line 1) | get activatedRoute(){if(!this.activated)throw new Error("Outlet is not...
method activatedRouteData (line 1) | get activatedRouteData(){return this._activatedRoute?this._activatedRo...
method detach (line 1) | detach(){if(!this.activated)throw new Error("Outlet is not activated")...
method attach (line 1) | attach(t,e){this.activated=t,this._activatedRoute=e,this.location.inse...
method deactivate (line 1) | deactivate(){if(this.activated){const t=this.component;this.activated....
method activateWith (line 1) | activateWith(t,e){if(this.isActivated)throw new Error("Cannot activate...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.injector=r,this.preloadingSt...
method setUpPreloading (line 1) | setUpPreloading(){this.subscription=this.router.events.pipe(Object(O.a...
method preload (line 1) | preload(){const t=this.injector.get(s.x);return this.processRoutes(t,t...
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method processRoutes (line 1) | processRoutes(t,e){const n=[];for(const r of e)if(r.loadChildren&&!r.c...
method preloadConfig (line 1) | preloadConfig(t,e){return this.preloadingStrategy.preload(e,()=>this.l...
method constructor (line 1) | constructor(t,e,n={}){this.router=t,this.viewportScroller=e,this.optio...
method init (line 1) | init(){"disabled"!==this.options.scrollPositionRestoration&&this.viewp...
method createScrollEvents (line 1) | createScrollEvents(){return this.router.events.subscribe(t=>{t instanc...
method consumeScrollEvents (line 1) | consumeScrollEvents(){return this.router.events.subscribe(t=>{t instan...
method scheduleScrollEvent (line 1) | scheduleScrollEvent(t,e){this.router.triggerEvent(new Ct(t,"popstate"=...
method ngOnDestroy (line 1) | ngOnDestroy(){this.routerEventsSubscription&&this.routerEventsSubscrip...
method constructor (line 1) | constructor(t,e){}
method forRoot (line 1) | static forRoot(e,n){return{ngModule:t,providers:[Ln,zn(e),{provide:Dn,...
method forChild (line 1) | static forChild(e){return{ngModule:t,providers:[zn(e)]}}
method constructor (line 1) | constructor(t){this.injector=t,this.initNavigation=!1,this.resultOfPre...
method appInitializer (line 1) | appInitializer(){return this.injector.get(r.f,Promise.resolve(null)).t...
method bootstrapListener (line 1) | bootstrapListener(t){const e=this.injector.get(Mn),n=this.injector.get...
method isLegacyEnabled (line 1) | isLegacyEnabled(t){return"legacy_enabled"===t.initialNavigation||!0===...
method isLegacyDisabled (line 1) | isLegacyDisabled(t){return"legacy_disabled"===t.initialNavigation||!1=...
method constructor (line 1) | constructor(t,e){this._zone=e,this._eventNameToPlugin=new Map,t.forEac...
method addEventListener (line 1) | addEventListener(t,e,n){return this._findPluginFor(e).addEventListener...
method addGlobalEventListener (line 1) | addGlobalEventListener(t,e,n){return this._findPluginFor(e).addGlobalE...
method getZone (line 1) | getZone(){return this._zone}
method _findPluginFor (line 1) | _findPluginFor(t){const e=this._eventNameToPlugin.get(t);if(e)return e...
method constructor (line 1) | constructor(){this._stylesSet=new Set}
method addStyles (line 1) | addStyles(t){const e=new Set;t.forEach(t=>{this._stylesSet.has(t)||(th...
method onStylesAdded (line 1) | onStylesAdded(t){}
method getAllStyles (line 1) | getAllStyles(){return Array.from(this._stylesSet)}
method constructor (line 1) | constructor(t){super(),this._doc=t,this._hostNodes=new Set,this._style...
method _addStylesToHost (line 1) | _addStylesToHost(t,e){t.forEach(t=>{const n=this._doc.createElement("s...
method addHost (line 1) | addHost(t){this._addStylesToHost(this._stylesSet,t),this._hostNodes.ad...
method removeHost (line 1) | removeHost(t){this._hostNodes.delete(t)}
method onStylesAdded (line 1) | onStylesAdded(t){this._hostNodes.forEach(e=>this._addStylesToHost(t,e))}
method ngOnDestroy (line 1) | ngOnDestroy(){this._styleNodes.forEach(t=>Object(s.q)().remove(t))}
method constructor (line 1) | constructor(t,e,n){this.eventManager=t,this.sharedStylesHost=e,this.ap...
method createRenderer (line 1) | createRenderer(t,e){if(!t||!e)return this.defaultRenderer;switch(e.enc...
method begin (line 1) | begin(){}
method end (line 1) | end(){}
method constructor (line 1) | constructor(t){super(t)}
method supports (line 1) | supports(t){return!0}
method addEventListener (line 1) | addEventListener(t,e,n){return t.addEventListener(e,n,!1),()=>this.rem...
method removeEventListener (line 1) | removeEventListener(t,e,n){return t.removeEventListener(e,n)}
method constructor (line 1) | constructor(t){super(t)}
method supports (line 1) | supports(e){return null!=t.parseEventName(e)}
method addEventListener (line 1) | addEventListener(e,n,r){const i=t.parseEventName(n),o=t.eventCallback(...
method parseEventName (line 1) | static parseEventName(e){const n=e.toLowerCase().split("."),r=n.shift(...
method getEventFullKey (line 1) | static getEventFullKey(t){let e="",n=function(t){let e=t.key;if(null==...
method eventCallback (line 1) | static eventCallback(e,n,r){return s=>{t.getEventFullKey(s)===e&&r.run...
method _normalizeKey (line 1) | static _normalizeKey(t){switch(t){case"esc":return"escape";default:ret...
method constructor (line 1) | constructor(t){if(t)throw new Error("BrowserModule has already been lo...
method withServerTransition (line 1) | static withServerTransition(e){return{ngModule:t,providers:[{provide:r...
method constructor (line 1) | constructor(){this.products=[new U.a(1,"Product 1","Category 1","Produ...
method getProducts (line 1) | getProducts(){return Object(F.a)([this.products])}
method saveOrder (line 1) | saveOrder(t){return console.log(JSON.stringify(t)),Object(F.a)([t])}
method constructor (line 1) | constructor(){this.lines=[],this.itemCount=0,this.cartPrice=0}
method addLine (line 1) | addLine(t,e=1){let n=this.lines.find(e=>e.product.id==t.id);null!=n?n....
method updateQuantity (line 1) | updateQuantity(t,e){let n=this.lines.find(e=>e.product.id==t.id);null!...
method removeLine (line 1) | removeLine(t){let e=this.lines.findIndex(e=>e.product.id==t);this.line...
method clear (line 1) | clear(){this.lines=[],this.itemCount=0,this.cartPrice=0}
method recalculate (line 1) | recalculate(){this.itemCount=0,this.cartPrice=0,this.lines.forEach(t=>...
method constructor (line 1) | constructor(t){this.cart=t,this.shipped=!1}
method clear (line 1) | clear(){this.id=null,this.name=this.address=this.city=null,this.state=...
method constructor (line 1) | constructor(){this.connEvents=new Q.a,window.addEventListener("online"...
method handleConnectionChange (line 1) | handleConnectionChange(t){this.connEvents.next(this.connected)}
method connected (line 1) | get connected(){return window.navigator.onLine}
method Changes (line 1) | get Changes(){return this.connEvents}
method constructor (line 1) | constructor(t){this.cart=t}
method constructor (line 1) | constructor(t,e){this.container=t,this.template=e}
method ngOnChanges (line 1) | ngOnChanges(t){this.container.clear();for(let e=0;e<this.counter;e++)t...
method constructor (line 1) | constructor(t,e,n){this.repository=t,this.cart=e,this.router=n,this.se...
method products (line 1) | get products(){let t=(this.selectedPage-1)*this.productsPerPage;return...
method categories (line 1) | get categories(){return this.repository.getCategories()}
method changeCategory (line 1) | changeCategory(t){this.selectedCategory=t}
method changePage (line 1) | changePage(t){this.selectedPage=t}
method changePageSize (line 1) | changePageSize(t){this.productsPerPage=Number(t),this.changePage(1)}
method pageCount (line 1) | get pageCount(){return Math.ceil(this.repository.getProducts(this.sele...
method addProductToCart (line 1) | addProductToCart(t){this.cart.addLine(t),this.router.navigateByUrl("/c...
method constructor (line 1) | constructor(t,e){this.repository=t,this.order=e,this.orderSent=!1,this...
method submitOrder (line 1) | submitOrder(t){this.submitted=!0,t.valid&&this.repository.saveOrder(th...
method constructor (line 1) | constructor(t,e){this.cart=t,this.connection=e,this.connected=!0,this....
method constructor (line 1) | constructor(t){this.router=t,this.firstNavigation=!0}
method canActivate (line 1) | canActivate(t,e){return!this.firstNavigation||(this.firstNavigation=!1...
method constructor (line 1) | constructor(e,n=t.now){this.SchedulerAction=e,this.now=n}
method schedule (line 1) | schedule(t,e=0,n){return new this.SchedulerAction(this,t).schedule(n,e)}
method constructor (line 1) | constructor(t,e,n){this.kind=t,this.value=e,this.error=n,this.hasValue...
method observe (line 1) | observe(t){switch(this.kind){case"N":return t.next&&t.next(this.value)...
method do (line 1) | do(t,e,n){switch(this.kind){case"N":return t&&t(this.value);case"E":re...
method accept (line 1) | accept(t,e,n){return t&&"function"==typeof t.next?this.observe(t):this...
method toObservable (line 1) | toObservable(){switch(this.kind){case"N":return Object(At.a)(this.valu...
method createNext (line 1) | static createNext(e){return void 0!==e?new t("N",e):t.undefinedValueNo...
method createError (line 1) | static createError(e){return new t("E",void 0,e)}
method createComplete (line 1) | static createComplete(){return t.completeNotification}
method constructor (line 1) | constructor(t){if(this.sw=t,this.subscriptionChanges=new Q.a,!t.isEnab...
method isEnabled (line 1) | get isEnabled(){return this.sw.isEnabled}
method requestSubscription (line 1) | requestSubscription(t){if(!this.sw.isEnabled)return Promise.reject(new...
method unsubscribe (line 1) | unsubscribe(){return this.sw.isEnabled?this.subscription.pipe(Object(L...
method decodeBase64 (line 1) | decodeBase64(t){return atob(t)}
method constructor (line 1) | constructor(t){if(this.sw=t,!t.isEnabled)return this.available=It,void...
method isEnabled (line 1) | get isEnabled(){return this.sw.isEnabled}
method checkForUpdate (line 1) | checkForUpdate(){if(!this.sw.isEnabled)return Promise.reject(new Error...
method activateUpdate (line 1) | activateUpdate(){if(!this.sw.isEnabled)return Promise.reject(new Error...
method register (line 1) | static register(e,n={}){return{ngModule:t,providers:[{provide:ne,useVa...
class t (line 1) | class t{get value(){return this.control?this.control.value:null}get vali...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=t}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(t,e,n){this._renderer=t,this._elementRef=e,this._compositi...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=t}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _handleInput (line 1) | _handleInput(t){(!this._compositionMode||this._compositionMode&&!this....
method _compositionStart (line 1) | _compositionStart(){this._composing=!0}
method _compositionEnd (line 1) | _compositionEnd(t){this._composing=!1,this._compositionMode&&this.onCh...
method value (line 1) | get value(){return this.control?this.control.value:null}
method valid (line 1) | get valid(){return this.control?this.control.valid:null}
method invalid (line 1) | get invalid(){return this.control?this.control.invalid:null}
method pending (line 1) | get pending(){return this.control?this.control.pending:null}
method disabled (line 1) | get disabled(){return this.control?this.control.disabled:null}
method enabled (line 1) | get enabled(){return this.control?this.control.enabled:null}
method errors (line 1) | get errors(){return this.control?this.control.errors:null}
method pristine (line 1) | get pristine(){return this.control?this.control.pristine:null}
method dirty (line 1) | get dirty(){return this.control?this.control.dirty:null}
method touched (line 1) | get touched(){return this.control?this.control.touched:null}
method status (line 1) | get status(){return this.control?this.control.status:null}
method untouched (line 1) | get untouched(){return this.control?this.control.untouched:null}
method statusChanges (line 1) | get statusChanges(){return this.control?this.control.statusChanges:null}
method valueChanges (line 1) | get valueChanges(){return this.control?this.control.valueChanges:null}
method path (line 1) | get path(){return null}
method reset (line 1) | reset(t){this.control&&this.control.reset(t)}
method hasError (line 1) | hasError(t,e){return!!this.control&&this.control.hasError(t,e)}
method getError (line 1) | getError(t,e){return this.control?this.control.getError(t,e):null}
method formDirective (line 1) | get formDirective(){return null}
method path (line 1) | get path(){return null}
method constructor (line 1) | constructor(t){super(t)}
method constructor (line 1) | constructor(t){super(t)}
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{t(""==e?null:parseFloat(e))}}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(){this._accessors=[]}
method add (line 1) | add(t,e){this._accessors.push([t,e])}
method remove (line 1) | remove(t){for(let e=this._accessors.length-1;e>=0;--e)if(this._accesso...
method select (line 1) | select(t){this._accessors.forEach(e=>{this._isSameGroup(e,t)&&e[1]!==t...
method _isSameGroup (line 1) | _isSameGroup(t,e){return!!t[0].control&&t[0]._parent===e._control._par...
method constructor (line 1) | constructor(t,e,n,r){this._renderer=t,this._elementRef=e,this._registr...
method ngOnInit (line 1) | ngOnInit(){this._control=this._injector.get(w),this._checkName(),this....
method ngOnDestroy (line 1) | ngOnDestroy(){this._registry.remove(this)}
method writeValue (line 1) | writeValue(t){this._state=t===this.value,this._renderer.setProperty(th...
method registerOnChange (line 1) | registerOnChange(t){this._fn=t,this.onChange=()=>{t(this.value),this._...
method fireUncheck (line 1) | fireUncheck(t){this.writeValue(t)}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _checkName (line 1) | _checkName(){this.name&&this.formControlName&&this.name!==this.formCon...
method _throwNameError (line 1) | _throwNameError(){throw new Error('\n If you define both a name a...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this.onChange=t=>...
method writeValue (line 1) | writeValue(t){this._renderer.setProperty(this._elementRef.nativeElemen...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{t(""==e?null:parseFloat(e))}}
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this._optionMap=n...
method compareWith (line 1) | set compareWith(t){if("function"!=typeof t)throw new Error(`compareWit...
method writeValue (line 1) | writeValue(t){this.value=t;const e=this._getOptionId(t);null==e&&this....
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{this.value=this._getOptionValue(...
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _registerOption (line 1) | _registerOption(){return(this._idCounter++).toString()}
method _getOptionId (line 1) | _getOptionId(t){for(const e of Array.from(this._optionMap.keys()))if(t...
method _getOptionValue (line 1) | _getOptionValue(t){const e=function(t){return t.split(":")[0]}(t);retu...
method constructor (line 1) | constructor(t,e,n){this._element=t,this._renderer=e,this._select=n,thi...
method ngValue (line 1) | set ngValue(t){null!=this._select&&(this._select._optionMap.set(this.i...
method value (line 1) | set value(t){this._setElementValue(t),this._select&&this._select.write...
method _setElementValue (line 1) | _setElementValue(t){this._renderer.setProperty(this._element.nativeEle...
method ngOnDestroy (line 1) | ngOnDestroy(){this._select&&(this._select._optionMap.delete(this.id),t...
method constructor (line 1) | constructor(t,e){this._renderer=t,this._elementRef=e,this._optionMap=n...
method compareWith (line 1) | set compareWith(t){if("function"!=typeof t)throw new Error(`compareWit...
method writeValue (line 1) | writeValue(t){let e;if(this.value=t,Array.isArray(t)){const n=t.map(t=...
method registerOnChange (line 1) | registerOnChange(t){this.onChange=e=>{const n=[];if(e.hasOwnProperty("...
method registerOnTouched (line 1) | registerOnTouched(t){this.onTouched=t}
method setDisabledState (line 1) | setDisabledState(t){this._renderer.setProperty(this._elementRef.native...
method _registerOption (line 1) | _registerOption(t){const e=(this._idCounter++).toString();return this....
method _getOptionId (line 1) | _getOptionId(t){for(const e of Array.from(this._optionMap.keys()))if(t...
method _getOptionValue (line 1) | _getOptionValue(t){const e=function(t){return t.split(":")[0]}(t);retu...
method constructor (line 1) | constructor(t,e,n){this._element=t,this._renderer=e,this._select=n,thi...
method ngValue (line 1) | set ngValue(t){null!=this._select&&(this._value=t,this._setElementValu...
method value (line 1) | set value(t){this._select?(this._value=t,this._setElementValue(Q(this....
method _setElementValue (line 1) | _setElementValue(t){this._renderer.setProperty(this._element.nativeEle...
method _setSelected (line 1) | _setSelected(t){this._renderer.setProperty(this._element.nativeElement...
method ngOnDestroy (line 1) | ngOnDestroy(){this._select&&(this._select._optionMap.delete(this.id),t...
method constructor (line 1) | constructor(t,e){super(),this.submitted=!1,this._directives=[],this.ng...
method ngAfterViewInit (line 1) | ngAfterViewInit(){this._setUpdateStrategy()}
method formDirective (line 1) | get formDirective(){return this}
method control (line 1) | get control(){return this.form}
method path (line 1) | get path(){return[]}
method controls (line 1) | get controls(){return this.form.controls}
method addControl (line 1) | addControl(t){pt.then(()=>{const e=this._findContainer(t.path);t.contr...
method getControl (line 1) | getControl(t){return this.form.get(t.path)}
method removeControl (line 1) | removeControl(t){pt.then(()=>{const e=this._findContainer(t.path);e&&e...
method addFormGroup (line 1) | addFormGroup(t){pt.then(()=>{const e=this._findContainer(t.path),n=new...
method removeFormGroup (line 1) | removeFormGroup(t){pt.then(()=>{const e=this._findContainer(t.path);e&...
method getFormGroup (line 1) | getFormGroup(t){return this.form.get(t.path)}
method updateModel (line 1) | updateModel(t,e){pt.then(()=>{this.form.get(t.path).setValue(e)})}
method setValue (line 1) | setValue(t){this.control.setValue(t)}
method onSubmit (line 1) | onSubmit(t){return this.submitted=!0,e=this._directives,this.form._syn...
method onReset (line 1) | onReset(){this.resetForm()}
method resetForm (line 1) | resetForm(t){this.form.reset(t),this.submitted=!1}
method _setUpdateStrategy (line 1) | _setUpdateStrategy(){this.options&&null!=this.options.updateOn&&(this....
method _findContainer (line 1) | _findContainer(t){return t.pop(),t.length?this.form.get(t):this.form}
method ngOnInit (line 1) | ngOnInit(){this._checkParentType(),this.formDirective.addFormGroup(this)}
method ngOnDestroy (line 1) | ngOnDestroy(){this.formDirective&&this.formDirective.removeFormGroup(t...
method control (line 1) | get control(){return this.formDirective.getFormGroup(this)}
method path (line 1) | get path(){return X(null==this.name?this.name:this.name.toString(),thi...
method formDirective (line 1) | get formDirective(){return this._parent?this._parent.formDirective:null}
method validator (line 1) | get validator(){return nt(this._validators)}
method asyncValidator (line 1) | get asyncValidator(){return rt(this._asyncValidators)}
method _checkParentType (line 1) | _checkParentType(){}
method constructor (line 1) | constructor(t,e,n){super(),this._parent=t,this._validators=e,this._asy...
method _checkParentType (line 1) | _checkParentType(){this._parent instanceof t||this._parent instanceof ...
method constructor (line 1) | constructor(t,e,n,s){super(),this.control=new ut,this._registered=!1,t...
method ngOnChanges (line 1) | ngOnChanges(t){this._checkForErrors(),this._registered||this._setUpCon...
method ngOnDestroy (line 1) | ngOnDestroy(){this.formDirective&&this.formDirective.removeControl(this)}
method path (line 1) | get path(){return this._parent?X(this.name,this._parent):[this.name]}
method formDirective (line 1) | get formDirective(){return this._parent?this._parent.formDirective:null}
method validator (line 1) | get validator(){return nt(this._rawValidators)}
method asyncValidator (line 1) | get asyncValidator(){return rt(this._rawAsyncValidators)}
method viewToModelUpdate (line 1) | viewToModelUpdate(t){this.viewModel=t,this.update.emit(t)}
method _setUpControl (line 1) | _setUpControl(){this._setUpdateStrategy(),this._isStandalone()?this._s...
method _setUpdateStrategy (line 1) | _setUpdateStrategy(){this.options&&null!=this.options.updateOn&&(this....
method _isStandalone (line 1) | _isStandalone(){return!this._parent||!(!this.options||!this.options.st...
method _setUpStandalone (line 1) | _setUpStandalone(){Y(this.control,this),this.control.updateValueAndVal...
method _checkForErrors (line 1) | _checkForErrors(){this._isStandalone()||this._checkParentType(),this._...
method _checkParentType (line 1) | _checkParentType(){!(this._parent instanceof vt)&&this._parent instanc...
method _checkName (line 1) | _checkName(){this.options&&this.options.name&&(this.name=this.options....
method _updateValue (line 1) | _updateValue(t){wt.then(()=>{this.control.setValue(t,{emitViewToModelC...
method _updateDisabled (line 1) | _updateDisabled(t){const e=t.isDisabled.currentValue,n=""===e||e&&"fal...
method required (line 1) | get required(){return this._required}
method required (line 1) | set required(t){this._required=null!=t&&!1!==t&&"false"!==`${t}`,this....
method validate (line 1) | validate(t){return this.required?A.required(t):null}
method registerOnValidatorChange (line 1) | registerOnValidatorChange(t){this._onChange=t}
method constructor (line 1) | constructor(t){this.http=t,this.baseUrl="/api/"}
method getProducts (line 1) | getProducts(){return this.http.get(this.baseUrl+"products")}
method saveOrder (line 1) | saveOrder(t){return this.http.post(this.baseUrl+"orders",t)}
method authenticate (line 1) | authenticate(t,e){return this.http.post(this.baseUrl+"login",{name:t,p...
method saveProduct (line 1) | saveProduct(t){return this.http.post(this.baseUrl+"products",t,this.ge...
method updateProduct (line 1) | updateProduct(t){return this.http.put(`${this.baseUrl}products/${t.id}...
method deleteProduct (line 1) | deleteProduct(t){return this.http.delete(`${this.baseUrl}products/${t}...
method getOrders (line 1) | getOrders(){return this.http.get(this.baseUrl+"orders",this.getOptions...
method deleteOrder (line 1) | deleteOrder(t){return this.http.delete(`${this.baseUrl}orders/${t}`,th...
method updateOrder (line 1) | updateOrder(t){return this.http.put(`${this.baseUrl}orders/${t.id}`,t,...
method getOptions (line 1) | getOptions(){return{headers:new s.c({Authorization:`Bearer<${this.auth...
method constructor (line 1) | constructor(t){this._isScalar=!1,t&&(this._subscribe=t)}
method lift (line 1) | lift(e){const n=new t;return n.source=this,n.operator=e,n}
method subscribe (line 1) | subscribe(t,e,n){const{operator:o}=this,a=function(t,e,n){if(t){if(t i...
method _trySubscribe (line 1) | _trySubscribe(t){try{return this._subscribe(t)}catch(e){c.a.useDepreca...
method forEach (line 1) | forEach(t,e){return new(e=l(e))((e,n)=>{let r;r=this.subscribe(e=>{try...
method _subscribe (line 1) | _subscribe(t){const{source:e}=this;return e&&e.subscribe(t)}
method pipe (line 1) | pipe(...t){return 0===t.length?this:Object(a.b)(t)(this)}
method toPromise (line 1) | toPromise(t){return new(t=l(t))((t,e)=>{let n;this.subscribe(t=>n=t,t=...
method constructor (line 1) | constructor(){super(),this.observers=[],this.closed=!1,this.isStopped=...
method lift (line 1) | lift(t){const e=new h(this,this);return e.operator=t,e}
method next (line 1) | next(t){if(this.closed)throw new o.a;if(!this.isStopped){const{observe...
method error (line 1) | error(t){if(this.closed)throw new o.a;this.hasError=!0,this.thrownErro...
method complete (line 1) | complete(){if(this.closed)throw new o.a;this.isStopped=!0;const{observ...
method unsubscribe (line 1) | unsubscribe(){this.isStopped=!0,this.closed=!0,this.observers=null}
method _trySubscribe (line 1) | _trySubscribe(t){if(this.closed)throw new o.a;return super._trySubscri...
method _subscribe (line 1) | _subscribe(t){if(this.closed)throw new o.a;return this.hasError?(t.err...
method asObservable (line 1) | asObservable(){const t=new r.a;return t.source=this,t}
method create (line 1) | static create(t,e){return Array.isArray(t)?ii(t,e,""):ii(t.providers,t...
method constructor (line 1) | constructor(t){this.nativeElement=t}
method constructor (line 1) | constructor(t){this.factories=t}
method create (line 1) | static create(e,n){if(null!=n){const t=n.factories.slice();e=e.concat(...
method extend (line 1) | static extend(e){return{provide:t,useFactory:n=>{if(!n)throw new Error...
method find (line 1) | find(t){const e=this.factories.find(e=>e.supports(t));if(null!=e)retur...
method constructor (line 1) | constructor(t){this.factories=t}
method create (line 1) | static create(e,n){if(n){const t=n.factories.slice();e=e.concat(t)}ret...
method extend (line 1) | static extend(e){return{provide:t,useFactory:n=>{if(!n)throw new Error...
method find (line 1) | find(t){const e=this.factories.find(e=>e.supports(t));if(e)return e;th...
method constructor (line 1) | constructor(t){this.appInits=t,this.initialized=!1,this.done=!1,this.d...
method runInitializers (line 1) | runInitializers(){if(this.initialized)return;const t=[],e=()=>{this.do...
method log (line 1) | log(t){console.log(t)}
method warn (line 1) | warn(t){console.warn(t)}
method constructor (line 1) | constructor(){this.compileModuleSync=Za,this.compileModuleAsync=Qa,thi...
method clearCache (line 1) | clearCache(){}
method clearCacheFor (line 1) | clearCacheFor(t){}
method getModuleId (line 1) | getModuleId(t){}
method constructor (line 1) | constructor(t){this._ngZone=t,this._pendingCount=0,this._isZoneStable=...
method _watchAngularEvents (line 1) | _watchAngularEvents(){this._ngZone.onUnstable.subscribe({next:()=>{thi...
method increasePendingRequestCount (line 1) | increasePendingRequestCount(){return this._pendingCount+=1,this._didWo...
method decreasePendingRequestCount (line 1) | decreasePendingRequestCount(){if(this._pendingCount-=1,this._pendingCo...
method isStable (line 1) | isStable(){return this._isZoneStable&&0===this._pendingCount&&!this._n...
method _runCallbacksIfReady (line 1) | _runCallbacksIfReady(){if(this.isStable())nc(()=>{for(;0!==this._callb...
method getPendingTasks (line 1) | getPendingTasks(){return this.taskTrackingZone?this.taskTrackingZone.m...
method addCallback (line 1) | addCallback(t,e,n){let r=-1;e&&e>0&&(r=setTimeout(()=>{this._callbacks...
method whenStable (line 1) | whenStable(t,e,n){if(n&&!this.taskTrackingZone)throw new Error('Task t...
method getPendingRequestCount (line 1) | getPendingRequestCount(){return this._pendingCount}
method findProviders (line 1) | findProviders(t,e,n){return[]}
method constructor (line 1) | constructor(){this._applications=new Map,mc.addToWindow(this)}
method registerApplication (line 1) | registerApplication(t,e){this._applications.set(t,e)}
method unregisterApplication (line 1) | unregisterApplication(t){this._applications.delete(t)}
method unregisterAllApplications (line 1) | unregisterAllApplications(){this._applications.clear()}
method getTestability (line 1) | getTestability(t){return this._applications.get(t)||null}
method getAllTestabilities (line 1) | getAllTestabilities(){return Array.from(this._applications.values())}
method getAllRootElements (line 1) | getAllRootElements(){return Array.from(this._applications.keys())}
method findTestabilityInTree (line 1) | findTestabilityInTree(t,e=!0){return mc.findTestabilityInTree(this,t,e)}
method constructor (line 1) | constructor(t){this._injector=t,this._modules=[],this._destroyListener...
method bootstrapModuleFactory (line 1) | bootstrapModuleFactory(t,e){const n=function(t,e){let n;return n="noop...
method bootstrapModule (line 1) | bootstrapModule(t,e=[]){const n=Sc({},e);return bc(this.injector,n,t)....
method _moduleDoBootstrap (line 1) | _moduleDoBootstrap(t){const e=t.injector.get(Oc);if(t._bootstrapCompon...
method onDestroy (line 1) | onDestroy(t){this._destroyListeners.push(t)}
method injector (line 1) | get injector(){return this._injector}
method destroy (line 1) | destroy(){if(this._destroyed)throw new Error("The platform has already...
method destroyed (line 1) | get destroyed(){return this._destroyed}
method constructor (line 1) | constructor(t,e,n,r,s,l){this._zone=t,this._console=e,this._injector=n...
method bootstrap (line 1) | bootstrap(t,e){if(!this._initStatus.done)throw new Error("Cannot boots...
method tick (line 1) | tick(){if(this._runningTick)throw new Error("ApplicationRef.tick is ca...
method attachView (line 1) | attachView(t){const e=t;this._views.push(e),e.attachToAppRef(this)}
method detachView (line 1) | detachView(t){const e=t;Ec(this._views,e),e.detachFromAppRef()}
method _loadComponent (line 1) | _loadComponent(t){this.attachView(t.hostView),this.tick(),this.compone...
method _unloadComponent (line 1) | _unloadComponent(t){this.detachView(t.hostView),Ec(this.components,t)}
method ngOnDestroy (line 1) | ngOnDestroy(){this._views.slice().forEach(t=>t.destroy())}
method viewCount (line 1) | get viewCount(){return this._views.length}
method constructor (line 1) | constructor(t,e){this._compiler=t,this._config=e||kc}
method load (line 1) | load(t){return this.loadAndCompile(t)}
method loadAndCompile (line 1) | loadAndCompile(t){let[e,r]=t.split("#");return void 0===r&&(r="default...
method loadFactory (line 1) | loadFactory(t){let[e,r]=t.split("#"),s="NgFactory";return void 0===r&&...
method constructor (line 1) | constructor(t){}
method constructor (line 1) | constructor(t){this.datasource=t}
method authenticate (line 1) | authenticate(t,e){return this.datasource.authenticate(t,e)}
method authenticated (line 1) | get authenticated(){return null!=this.datasource.auth_token}
method clear (line 1) | clear(){this.datasource.auth_token=null}
method constructor (line 1) | constructor(t){this.dataSource=t,this.orders=[],this.loaded=!1}
method loadOrders (line 1) | loadOrders(){this.loaded=!0,this.dataSource.getOrders().subscribe(t=>t...
method getOrders (line 1) | getOrders(){return this.loaded||this.loadOrders(),this.orders}
method saveOrder (line 1) | saveOrder(t){return this.dataSource.saveOrder(t)}
method updateOrder (line 1) | updateOrder(t){this.dataSource.updateOrder(t).subscribe(t=>{this.order...
method deleteOrder (line 1) | deleteOrder(t){this.dataSource.deleteOrder(t).subscribe(e=>{this.order...
method constructor (line 1) | constructor(t){this.dataSource=t,this.products=[],this.categories=[],t...
method getProducts (line 1) | getProducts(t=null){return this.products.filter(e=>null==t||t==e.categ...
method getProduct (line 1) | getProduct(t){return this.products.find(e=>e.id==t)}
method getCategories (line 1) | getCategories(){return this.categories}
method saveProduct (line 1) | saveProduct(t){null==t.id||0==t.id?this.dataSource.saveProduct(t).subs...
method deleteProduct (line 1) | deleteProduct(t){this.dataSource.deleteProduct(t).subscribe(e=>{this.p...
method constructor (line 1) | constructor(t){super(),this._doc=t,this._init()}
method _init (line 1) | _init(){this.location=i().getLocation(),this._history=i().getHistory()}
method getBaseHrefFromDOM (line 1) | getBaseHrefFromDOM(){return i().getBaseHref(this._doc)}
method onPopState (line 1) | onPopState(t){i().getGlobalEventTarget(this._doc,"window").addEventLis...
method onHashChange (line 1) | onHashChange(t){i().getGlobalEventTarget(this._doc,"window").addEventL...
method href (line 1) | get href(){return this.location.href}
method protocol (line 1) | get protocol(){return this.location.protocol}
method hostname (line 1) | get hostname(){return this.location.hostname}
method port (line 1) | get port(){return this.location.port}
method pathname (line 1) | get pathname(){return this.location.pathname}
method search (line 1) | get search(){return this.location.search}
method hash (line 1) | get hash(){return this.location.hash}
method pathname (line 1) | set pathname(t){this.location.pathname=t}
method pushState (line 1) | pushState(t,e,n){p()?this._history.pushState(t,e,n):this.location.hash=n}
method replaceState (line 1) | replaceState(t,e,n){p()?this._history.replaceState(t,e,n):this.locatio...
method forward (line 1) | forward(){this._history.forward()}
method back (line 1) | back(){this._history.back()}
method getState (line 1) | getState(){return this._history.state}
method constructor (line 1) | constructor(t,e){if(super(),this._platformLocation=t,null==e&&(e=this....
method onPopState (line 1) | onPopState(t){this._platformLocation.onPopState(t),this._platformLocat...
method getBaseHref (line 1) | getBaseHref(){return this._baseHref}
method prepareExternalUrl (line 1) | prepareExternalUrl(t){return g(this._baseHref,t)}
method path (line 1) | path(t=!1){const e=this._platformLocation.pathname+b(this._platformLoc...
method pushState (line 1) | pushState(t,e,n,r){const s=this.prepareExternalUrl(n+b(r));this._platf...
method replaceState (line 1) | replaceState(t,e,n,r){const s=this.prepareExternalUrl(n+b(r));this._pl...
method forward (line 1) | forward(){this._platformLocation.forward()}
method back (line 1) | back(){this._platformLocation.back()}
method constructor (line 1) | constructor(t,e){super(),this._platformLocation=t,this._baseHref="",nu...
method onPopState (line 1) | onPopState(t){this._platformLocation.onPopState(t),this._platformLocat...
method getBaseHref (line 1) | getBaseHref(){return this._baseHref}
method path (line 1) | path(t=!1){let e=this._platformLocation.hash;return null==e&&(e="#"),e...
method prepareExternalUrl (line 1) | prepareExternalUrl(t){const e=g(this._baseHref,t);return e.length>0?"#...
method pushState (line 1) | pushState(t,e,n,r){let s=this.prepareExternalUrl(n+b(r));0==s.length&&...
method replaceState (line 1) | replaceState(t,e,n,r){let s=this.prepareExternalUrl(n+b(r));0==s.lengt...
method forward (line 1) | forward(){this._platformLocation.forward()}
method back (line 1) | back(){this._platformLocation.back()}
method constructor (line 1) | constructor(t,e){this._subject=new r.n,this._urlChangeListeners=[],thi...
method path (line 1) | path(t=!1){return this.normalize(this._platformStrategy.path(t))}
method getState (line 1) | getState(){return this._platformLocation.getState()}
method isCurrentPathEqualTo (line 1) | isCurrentPathEqualTo(t,e=""){return this.path()==this.normalize(t+b(e))}
method normalize (line 1) | normalize(e){return t.stripTrailingSlash(function(t,e){return t&&e.sta...
method prepareExternalUrl (line 1) | prepareExternalUrl(t){return t&&"/"!==t[0]&&(t="/"+t),this._platformSt...
method go (line 1) | go(t,e="",n=null){this._platformStrategy.pushState(n,"",t,e),this._not...
method replaceState (line 1) | replaceState(t,e="",n=null){this._platformStrategy.replaceState(n,"",t...
method forward (line 1) | forward(){this._platformStrategy.forward()}
method back (line 1) | back(){this._platformStrategy.back()}
method onUrlChange (line 1) | onUrlChange(t){this._urlChangeListeners.push(t),this.subscribe(t=>{thi...
method _notifyUrlChangeListeners (line 1) | _notifyUrlChangeListeners(t="",e){this._urlChangeListeners.forEach(n=>...
method subscribe (line 1) | subscribe(t,e,n){return this._subject.subscribe({next:t,error:e,comple...
method constructor (line 1) | constructor(t){super(),this.locale=t}
method getPluralCategory (line 1) | getPluralCategory(t,e){switch(P(e||this.locale)(t)){case k.Zero:return...
method constructor (line 1) | constructor(t,e,n){this._viewContainer=t,this._template=e,this._differ...
method ngForOf (line 1) | set ngForOf(t){this._ngForOf=t,this._ngForOfDirty=!0}
method ngForTrackBy (line 1) | set ngForTrackBy(t){Object(r.T)()&&null!=t&&"function"!=typeof t&&cons...
method ngForTrackBy (line 1) | get ngForTrackBy(){return this._trackByFn}
method ngForTemplate (line 1) | set ngForTemplate(t){t&&(this._template=t)}
method ngDoCheck (line 1) | ngDoCheck(){if(this._ngForOfDirty){this._ngForOfDirty=!1;const n=this....
method _applyChanges (line 1) | _applyChanges(t){const e=[];t.forEachOperation((t,n,r)=>{if(null==t.pr...
method _perViewChange (line 1) | _perViewChange(t,e){t.context.$implicit=e.item}
method ngTemplateContextGuard (line 1) | static ngTemplateContextGuard(t,e){return!0}
method constructor (line 1) | constructor(t,e){this._viewContainer=t,this._context=new H,this._thenT...
method ngIf (line 1) | set ngIf(t){this._context.$implicit=this._context.ngIf=t,this._updateV...
method ngIfThen (line 1) | set ngIfThen(t){$("ngIfThen",t),this._thenTemplateRef=t,this._thenView...
method ngIfElse (line 1) | set ngIfElse(t){$("ngIfElse",t),this._elseTemplateRef=t,this._elseView...
method _updateView (line 1) | _updateView(){this._context.$implicit?this._thenViewRef||(this._viewCo...
method ngTemplateContextGuard (line 1) | static ngTemplateContextGuard(t,e){return!0}
method constructor (line 1) | constructor(t,e="USD"){this._locale=t,this._defaultCurrencyCode=e}
method transform (line 1) | transform(e,n,s="symbol",i,o){if(function(t){return null==t||""===t||t...
method constructor (line 1) | constructor(t){this.closed=!1,this._parentOrParents=null,this._subscri...
method unsubscribe (line 1) | unsubscribe(){let e;if(this.closed)return;let{_parentOrParents:n,_unsu...
method add (line 1) | add(e){let n=e;if(!e)return t.EMPTY;switch(typeof e){case"function":n=...
method remove (line 1) | remove(t){const e=this._subscriptions;if(e){const n=e.indexOf(t);-1!==...
method constructor (line 1) | constructor(t){this.handler=t}
method request (line 1) | request(t,e,n={}){let r;if(t instanceof v)r=t;else{let s=void 0;s=n.he...
method delete (line 1) | delete(t,e={}){return this.request("DELETE",t,e)}
method get (line 1) | get(t,e={}){return this.request("GET",t,e)}
method head (line 1) | head(t,e={}){return this.request("HEAD",t,e)}
method jsonp (line 1) | jsonp(t,e){return this.request("JSONP",t,{params:(new g).append(e,"JSO...
method options (line 1) | options(t,e={}){return this.request("OPTIONS",t,e)}
method patch (line 1) | patch(t,e,n={}){return this.request("PATCH",t,E(n,e))}
method post (line 1) | post(t,e,n={}){return this.request("POST",t,E(n,e))}
method put (line 1) | put(t,e,n={}){return this.request("PUT",t,E(n,e))}
method intercept (line 1) | intercept(t,e){return e.handle(t)}
method constructor (line 1) | constructor(){}
method build (line 1) | build(){return new XMLHttpRequest}
method constructor (line 1) | constructor(t){this.xhrFactory=t}
method handle (line 1) | handle(t){if("JSONP"===t.method)throw new Error("Attempted to construc...
method constructor (line 1) | constructor(t,e,n){this.doc=t,this.platform=e,this.cookieName=n,this.l...
method getToken (line 1) | getToken(){if("server"===this.platform)return null;const t=this.doc.co...
method constructor (line 1) | constructor(t,e){this.tokenService=t,this.headerName=e}
method intercept (line 1) | intercept(t,e){const n=t.url.toLowerCase();if("GET"===t.method||"HEAD"...
method constructor (line 1) | constructor(t,e){this.backend=t,this.injector=e,this.chain=null}
method handle (line 1) | handle(t){if(null===this.chain){const t=this.injector.get(k,[]);this.c...
method disable (line 1) | static disable(){return{ngModule:t,providers:[{provide:V,useClass:A}]}}
method withOptions (line 1) | static withOptions(e={}){return{ngModule:t,providers:[e.cookieName?{pr...
method constructor (line 1) | constructor(t,e,n,r,i,o,c,l){this.rootComponentType=t,this.urlSerializ...
method setupNavigations (line 1) | setupNavigations(t){const e=this.events;return t.pipe(Object(O.a)(t=>0...
method resetRootComponentType (line 1) | resetRootComponentType(t){this.rootComponentType=t,this.routerState.ro...
method getTransition (line 1) | getTransition(){const t=this.transitions.value;return t.urlAfterRedire...
method setTransition (line 1) | setTransition(t){this.transitions.next(Object.assign(Object.assign({},...
method initialNavigation (line 1) | initialNavigation(){this.setUpLocationChangeListener(),0===this.naviga...
method setUpLocationChangeListener (line 1) | setUpLocationChangeListener(){this.locationSubscription||(this.locatio...
method url (line 1) | get url(){return this.serializeUrl(this.currentUrlTree)}
method getCurrentNavigation (line 1) | getCurrentNavigation(){return this.currentNavigation}
method triggerEvent (line 1) | triggerEvent(t){this.events.next(t)}
method resetConfig (line 1) | resetConfig(t){At(t),this.config=t.map(It),this.navigated=!1,this.last...
method ngOnDestroy (line 1) | ngOnDestroy(){this.dispose()}
method dispose (line 1) | dispose(){this.locationSubscription&&(this.locationSubscription.unsubs...
method createUrlTree (line 1) | createUrlTree(t,e={}){const{relativeTo:n,queryParams:r,fragment:i,pres...
method navigateByUrl (line 1) | navigateByUrl(t,e={skipLocationChange:!1}){Object(s.T)()&&this.isNgZon...
method navigate (line 1) | navigate(t,e={skipLocationChange:!1}){return function(t){for(let e=0;e...
method serializeUrl (line 1) | serializeUrl(t){return this.urlSerializer.serialize(t)}
method parseUrl (line 1) | parseUrl(t){let e;try{e=this.urlSerializer.parse(t)}catch(n){e=this.ma...
method isActive (line 1) | isActive(t,e){if(Me(t))return Ut(this.currentUrlTree,t,e);const n=this...
method removeEmptyProps (line 1) | removeEmptyProps(t){return Object.keys(t).reduce((e,n)=>{const r=t[n];...
method processNavigations (line 1) | processNavigations(){this.navigations.subscribe(t=>{this.navigated=!0,...
method scheduleNavigation (line 1) | scheduleNavigation(t,e,n,r,s){const i=this.getTransition();if(i&&"impe...
method setBrowserUrl (line 1) | setBrowserUrl(t,e,n,r){const s=this.urlSerializer.serialize(t);r=r||{}...
method resetStateAndUrl (line 1) | resetStateAndUrl(t,e,n){this.routerState=t,this.currentUrlTree=e,this....
method resetUrlToCurrentUrlTree (line 1) | resetUrlToCurrentUrlTree(){this.location.replaceState(this.urlSerializ...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.route=e,this.commands=[],nul...
method routerLink (line 1) | set routerLink(t){this.commands=null!=t?Array.isArray(t)?t:[t]:[]}
method preserveQueryParams (line 1) | set preserveQueryParams(t){Object(s.T)()&&console&&console.warn&&conso...
method onClick (line 1) | onClick(){const t={skipLocationChange:En(this.skipLocationChange),repl...
method urlTree (line 1) | get urlTree(){return this.router.createUrlTree(this.commands,{relative...
method constructor (line 1) | constructor(t,e,n){this.router=t,this.route=e,this.locationStrategy=n,...
method routerLink (line 1) | set routerLink(t){this.commands=null!=t?Array.isArray(t)?t:[t]:[]}
method preserveQueryParams (line 1) | set preserveQueryParams(t){Object(s.T)()&&console&&console.warn&&conso...
method ngOnChanges (line 1) | ngOnChanges(t){this.updateTargetUrlAndHref()}
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method onClick (line 1) | onClick(t,e,n,r){if(0!==t||e||n||r)return!0;if("string"==typeof this.t...
method updateTargetUrlAndHref (line 1) | updateTargetUrlAndHref(){this.href=this.locationStrategy.prepareExtern...
method urlTree (line 1) | get urlTree(){return this.router.createUrlTree(this.commands,{relative...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.element=e,this.renderer=n,th...
method ngAfterContentInit (line 1) | ngAfterContentInit(){this.links.changes.subscribe(t=>this.update()),th...
method routerLinkActive (line 1) | set routerLinkActive(t){const e=Array.isArray(t)?t:t.split(" ");this.c...
method ngOnChanges (line 1) | ngOnChanges(t){this.update()}
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method update (line 1) | update(){this.links&&this.linksWithHrefs&&this.router.navigated&&Promi...
method isLinkActive (line 1) | isLinkActive(t){return e=>t.isActive(e.urlTree,this.routerLinkActiveOp...
method hasActiveLinks (line 1) | hasActiveLinks(){const t=this.isLinkActive(this.router);return this.li...
method constructor (line 1) | constructor(t,e,n,r,i){this.parentContexts=t,this.location=e,this.reso...
method ngOnDestroy (line 1) | ngOnDestroy(){this.parentContexts.onChildOutletDestroyed(this.name)}
method ngOnInit (line 1) | ngOnInit(){if(!this.activated){const t=this.parentContexts.getContext(...
method isActivated (line 1) | get isActivated(){return!!this.activated}
method component (line 1) | get component(){if(!this.activated)throw new Error("Outlet is not acti...
method activatedRoute (line 1) | get activatedRoute(){if(!this.activated)throw new Error("Outlet is not...
method activatedRouteData (line 1) | get activatedRouteData(){return this._activatedRoute?this._activatedRo...
method detach (line 1) | detach(){if(!this.activated)throw new Error("Outlet is not activated")...
method attach (line 1) | attach(t,e){this.activated=t,this._activatedRoute=e,this.location.inse...
method deactivate (line 1) | deactivate(){if(this.activated){const t=this.component;this.activated....
method activateWith (line 1) | activateWith(t,e){if(this.isActivated)throw new Error("Cannot activate...
method constructor (line 1) | constructor(t,e,n,r,s){this.router=t,this.injector=r,this.preloadingSt...
method setUpPreloading (line 1) | setUpPreloading(){this.subscription=this.router.events.pipe(Object(O.a...
method preload (line 1) | preload(){const t=this.injector.get(s.x);return this.processRoutes(t,t...
method ngOnDestroy (line 1) | ngOnDestroy(){this.subscription.unsubscribe()}
method processRoutes (line 1) | processRoutes(t,e){const n=[];for(const r of e)if(r.loadChildren&&!r.c...
method preloadConfig (line 1) | preloadConfig(t,e){return this.preloadingStrategy.preload(e,()=>this.l...
method constructor (line 1) | constructor(t,e,n={}){this.router=t,this.viewportScroller=e,this.optio...
method init (line 1) | init(){"disabled"!==this.options.scrollPositionRestoration&&this.viewp...
method createScrollEvents (line 1) | createScrollEvents(){return this.router.events.subscribe(t=>{t instanc...
method consumeScrollEvents (line 1) | consumeScrollEvents(){return this.router.events.subscribe(t=>{t instan...
method scheduleScrollEvent (line 1) | scheduleScrollEvent(t,e){this.router.triggerEvent(new Ct(t,"popstate"=...
method ngOnDestroy (line 1) | ngOnDestroy(){this.routerEventsSubscription&&this.routerEventsSubscrip...
method constructor (line 1) | constructor(t,e){}
method forRoot (line 1) | static forRoot(e,n){return{ngModule:t,providers:[Ln,zn(e),{provide:Dn,...
method forChild (line 1) | static forChild(e){return{ngModule:t,providers:[zn(e)]}}
method constructor (line 1) | constructor(t){this.injector=t,this.initNavigation=!1,this.resultOfPre...
method appInitializer (line 1) | appInitializer(){return this.injector.get(r.f,Promise.resolve(null)).t...
method bootstrapListener (line 1) | bootstrapListener(t){const e=this.injector.get(Mn),n=this.injector.get...
method isLegacyEnabled (line 1) | isLegacyEnabled(t){return"legacy_enabled"===t.initialNavigation||!0===...
method isLegacyDisabled (line 1) | isLegacyDisabled(t){return"legacy_disabled"===t.initialNavigation||!1=...
method constructor (line 1) | constructor(t,e){this._zone=e,this._eventNameToPlugin=new Map,t.forEac...
method addEventListener (line 1) | addEventListener(t,e,n){return this._findPluginFor(e).addEventListener...
method addGlobalEventListener (line 1) | addGlobalEventListener(t,e,n){return this._findPluginFor(e).addGlobalE...
method getZone (line 1) | getZone(){return this._zone}
method _findPluginFor (line 1) | _findPluginFor(t){const e=this._eventNameToPlugin.get(t);if(e)return e...
method constructor (line 1) | constructor(){this._stylesSet=new Set}
method addStyles (line 1) | addStyles(t){const e=new Set;t.forEach(t=>{this._stylesSet.has(t)||(th...
method onStylesAdded (line 1) | onStylesAdded(t){}
method getAllStyles (line 1) | getAllStyles(){return Array.from(this._stylesSet)}
method constructor (line 1) | constructor(t){super(),this._doc=t,this._hostNodes=new Set,this._style...
method _addStylesToHost (line 1) | _addStylesToHost(t,e){t.forEach(t=>{const n=this._doc.createElement("s...
method addHost (line 1) | addHost(t){this._addStylesToHost(this._stylesSet,t),this._hostNodes.ad...
method removeHost (line 1) | removeHost(t){this._hostNodes.delete(t)}
method onStylesAdded (line 1) | onStylesAdded(t){this._hostNodes.forEach(e=>this._addStylesToHost(t,e))}
method ngOnDestroy (line 1) | ngOnDestroy(){this._styleNodes.forEach(t=>Object(s.q)().remove(t))}
method constructor (line 1) | constructor(t,e,n){this.eventManager=t,this.sharedStylesHost=e,this.ap...
method createRenderer (line 1) | createRenderer(t,e){if(!t||!e)return this.defaultRenderer;switch(e.enc...
method begin (line 1) | begin(){}
method end (line 1) | end(){}
method constructor (line 1) | constructor(t){super(t)}
method supports (line 1) | supports(t){return!0}
method addEventListener (line 1) | addEventListener(t,e,n){return t.addEventListener(e,n,!1),()=>this.rem...
method removeEventListener (line 1) | removeEventListener(t,e,n){return t.removeEventListener(e,n)}
method constructor (line 1) | constructor(t){super(t)}
method supports (line 1) | supports(e){return null!=t.parseEventName(e)}
method addEventListener (line 1) | addEventListener(e,n,r){const i=t.parseEventName(n),o=t.eventCallback(...
method parseEventName (line 1) | static parseEventName(e){const n=e.toLowerCase().split("."),r=n.shift(...
method getEventFullKey (line 1) | static getEventFullKey(t){let e="",n=function(t){let e=t.key;if(null==...
method eventCallback (line 1) | static eventCallback(e,n,r){return s=>{t.getEventFullKey(s)===e&&r.run...
method _normalizeKey (line 1) | static _normalizeKey(t){switch(t){case"esc":return"escape";default:ret...
met
Copy disabled (too large)
Download .json
Condensed preview — 4488 files, each showing path, character count, and a content snippet. Download the .json file for the full structured content (22,209K chars).
[
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": "02 - Your First Angular App/todo/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "02 - Your First Angular App/todo/angular.json",
"chars": 4279,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "02 - Your First Angular App/todo/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "02 - Your First Angular App/todo/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "02 - Your First Angular App/todo/e2e/src/app.e2e-spec.ts",
"chars": 637,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "02 - Your First Angular App/todo/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "02 - Your First Angular App/todo/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "02 - Your First Angular App/todo/karma.conf.js",
"chars": 1016,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "02 - Your First Angular App/todo/package.json",
"chars": 1308,
"preview": "{\n \"name\": \"todo\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build"
},
{
"path": "02 - Your First Angular App/todo/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "02 - Your First Angular App/todo/src/app/app.component.html",
"chars": 1393,
"preview": "<h3 class=\"bg-primary text-center text-white p-2\">\n {{ username }}'s To Do List\n <h6 class=\"mt-1\">{{ itemCount }} {{ s"
},
{
"path": "02 - Your First Angular App/todo/src/app/app.component.ts",
"chars": 796,
"preview": "import { Component } from '@angular/core';\nimport { TodoList } from \"./todoList\";\nimport { TodoItem } from \"./todoItem\";"
},
{
"path": "02 - Your First Angular App/todo/src/app/app.module.ts",
"chars": 373,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModul"
},
{
"path": "02 - Your First Angular App/todo/src/app/todoItem.ts",
"chars": 206,
"preview": "export class TodoItem {\n\n constructor(taskVal: string, completeVal: boolean = false) {\n this.task = taskVal;\n "
},
{
"path": "02 - Your First Angular App/todo/src/app/todoList.ts",
"chars": 349,
"preview": "import { TodoItem } from \"./todoItem\";\n\nexport class TodoList {\n \n constructor(public user: string, private todoIt"
},
{
"path": "02 - Your First Angular App/todo/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "02 - Your First Angular App/todo/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "02 - Your First Angular App/todo/src/index.html",
"chars": 290,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Todo</title>\n <base href=\"/\">\n <meta name=\"v"
},
{
"path": "02 - Your First Angular App/todo/src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "02 - Your First Angular App/todo/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "02 - Your First Angular App/todo/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "02 - Your First Angular App/todo/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "02 - Your First Angular App/todo/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "02 - Your First Angular App/todo/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "02 - Your First Angular App/todo/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "02 - Your First Angular App/todo/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "04 - HTML and CSS Primer/HtmlCssPrimer/index.html",
"chars": 1733,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <title>ToDo</title>\n <meta charset=\"utf-8\" />\n <link href=\"node_modules/bootstra"
},
{
"path": "04 - HTML and CSS Primer/HtmlCssPrimer/package.json",
"chars": 53,
"preview": "{\n \"dependencies\": {\n \"bootstrap\": \"4.4.1\"\n }\n}\n"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/angular.json",
"chars": 4293,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/src/app.e2e-spec.ts",
"chars": 649,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/karma.conf.js",
"chars": 1028,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/package.json",
"chars": 1295,
"preview": "{\n \"name\": \"java-script-primer\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"bui"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.html",
"chars": 25673,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.component.ts",
"chars": 220,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/app/app.module.ts",
"chars": 314,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppCompon"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/index.html",
"chars": 302,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>JavaScriptPrimer</title>\n <base href=\"/\">\n <"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/main.ts",
"chars": 396,
"preview": "let products = [\n { name: \"Hat\", price: 24.5, stock: 10 },\n { name: \"Kayak\", price: 289.99, stock: 1 },\n { name: \"Soc"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "05 - JavaScript and TypeScript Primer, Part 1/JavaScriptPrimer/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/angular.json",
"chars": 4293,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/src/app.e2e-spec.ts",
"chars": 649,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/karma.conf.js",
"chars": 1028,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/package.json",
"chars": 1295,
"preview": "{\n \"name\": \"java-script-primer\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"bui"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.html",
"chars": 25673,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.component.ts",
"chars": 220,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/app/app.module.ts",
"chars": 314,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppCompon"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/index.html",
"chars": 302,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>JavaScriptPrimer</title>\n <base href=\"/\">\n <"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/main.ts",
"chars": 396,
"preview": "let products = [\n { name: \"Hat\", price: 24.5, stock: 10 },\n { name: \"Kayak\", price: 289.99, stock: 1 },\n { name: \"Soc"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/Beginning of Chapter/JavaScriptPrimer/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/angular.json",
"chars": 4293,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/src/app.e2e-spec.ts",
"chars": 649,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/karma.conf.js",
"chars": 1028,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/package.json",
"chars": 1295,
"preview": "{\n \"name\": \"java-script-primer\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"bui"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.html",
"chars": 25673,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.component.ts",
"chars": 220,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/app/app.module.ts",
"chars": 314,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppCompon"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/index.html",
"chars": 302,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>JavaScriptPrimer</title>\n <base href=\"/\">\n <"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/main.ts",
"chars": 520,
"preview": "import { Name, WeatherLocation } from \"./modules/NameAndWeather\";\nimport { Name as OtherName } from \"./modules/Duplicate"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/modules/DuplicateName.ts",
"chars": 78,
"preview": "export class Name {\n\n get message() {\n return \"Other Name\";\n }\n}\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/modules/NameAndWeather.ts",
"chars": 390,
"preview": "export class Name {\n \n constructor(private first: string, private second: string) {}\n\n get nameMessage() : stri"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/tempConverter.ts",
"chars": 521,
"preview": "export class TempConverter {\n\n static convertFtoC(temp: any): string {\n let value: number;\n if ((temp a"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "06 - JavaScript and TypeScript Primer, Part 2/End of Chapter/JavaScriptPrimer/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/angular.json",
"chars": 4421,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/authMiddleware.js",
"chars": 1285,
"preview": "const jwt = require(\"jsonwebtoken\");\n\nconst APP_SECRET = \"myappsecret\";\nconst USERNAME = \"admin\";\nconst PASSWORD = \"secr"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/data.js",
"chars": 1428,
"preview": "module.exports = function () {\n return { \n products: [\n { id: 1, name: \"Kayak\", category: \"Waterspo"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/e2e/src/app.e2e-spec.ts",
"chars": 644,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/karma.conf.js",
"chars": 1023,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/package.json",
"chars": 1492,
"preview": "{\n \"name\": \"sports-store\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \""
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.component.html",
"chars": 25673,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.component.ts",
"chars": 215,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/app/app.module.ts",
"chars": 314,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppCompon"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/index.html",
"chars": 323,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>SportsStore</title>\n <base href=\"/\">\n <meta "
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "07 - SportsStore/Beginning of Chapter/SportsStore/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/angular.json",
"chars": 4421,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/authMiddleware.js",
"chars": 1285,
"preview": "const jwt = require(\"jsonwebtoken\");\n\nconst APP_SECRET = \"myappsecret\";\nconst USERNAME = \"admin\";\nconst PASSWORD = \"secr"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/data.js",
"chars": 1428,
"preview": "module.exports = function () {\n return { \n products: [\n { id: 1, name: \"Kayak\", category: \"Waterspo"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/e2e/src/app.e2e-spec.ts",
"chars": 644,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/karma.conf.js",
"chars": 1023,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/package.json",
"chars": 1492,
"preview": "{\n \"name\": \"sports-store\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \""
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/app.component.html",
"chars": 25673,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/app.component.ts",
"chars": 143,
"preview": "import { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app\",\n template: \"<store></store>\"\n})\nexport "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/app.module.ts",
"chars": 351,
"preview": "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { AppCompone"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/model/model.module.ts",
"chars": 254,
"preview": "import { NgModule } from \"@angular/core\";\nimport { ProductRepository } from \"./product.repository\";\nimport { StaticDataS"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/model/product.model.ts",
"chars": 207,
"preview": "export class Product {\n\n constructor(\n public id?: number,\n public name?: string,\n public catego"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/model/product.repository.ts",
"chars": 896,
"preview": "import { Injectable } from \"@angular/core\";\nimport { Product } from \"./product.model\";\nimport { StaticDataSource } from "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/model/static.datasource.ts",
"chars": 1556,
"preview": "import { Injectable } from \"@angular/core\";\nimport { Product } from \"./product.model\";\nimport { Observable, from } from "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/store/counter.directive.ts",
"chars": 677,
"preview": "import {\n Directive, ViewContainerRef, TemplateRef, Input, Attribute, SimpleChanges\n} from \"@angular/core\";\n\n@Directi"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/store/store.component.html",
"chars": 1721,
"preview": "<div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col bg-dark text-white\">\n <a class=\"navbar-"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/store/store.component.ts",
"chars": 1431,
"preview": "import { Component } from \"@angular/core\";\nimport { Product } from \"../model/product.model\";\nimport { ProductRepository "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/app/store/store.module.ts",
"chars": 493,
"preview": "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { FormsModul"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/index.html",
"chars": 323,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>SportsStore</title>\n <base href=\"/\">\n <meta "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "07 - SportsStore/End of Chapter/SportsStore/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/angular.json",
"chars": 4421,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/authMiddleware.js",
"chars": 1285,
"preview": "const jwt = require(\"jsonwebtoken\");\n\nconst APP_SECRET = \"myappsecret\";\nconst USERNAME = \"admin\";\nconst PASSWORD = \"secr"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/browserslist",
"chars": 429,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/data.js",
"chars": 1428,
"preview": "module.exports = function () {\n return { \n products: [\n { id: 1, name: \"Kayak\", category: \"Waterspo"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/e2e/protractor.conf.js",
"chars": 808,
"preview": "// @ts-check\n// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/bl"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/e2e/src/app.e2e-spec.ts",
"chars": 644,
"preview": "import { AppPage } from './app.po';\nimport { browser, logging } from 'protractor';\n\ndescribe('workspace-project App', ()"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/e2e/src/app.po.ts",
"chars": 301,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo(): Promise<unknown> {\n return"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/e2e/tsconfig.json",
"chars": 214,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"module\": \"commonjs\",\n "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/karma.conf.js",
"chars": 1023,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/package.json",
"chars": 1492,
"preview": "{\n \"name\": \"sports-store\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \""
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/app.component.html",
"chars": 25673,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/app.component.ts",
"chars": 143,
"preview": "import { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app\",\n template: \"<store></store>\"\n})\nexport "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/app.module.ts",
"chars": 351,
"preview": "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { AppCompone"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/model.module.ts",
"chars": 254,
"preview": "import { NgModule } from \"@angular/core\";\nimport { ProductRepository } from \"./product.repository\";\nimport { StaticDataS"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/product.model.ts",
"chars": 207,
"preview": "export class Product {\n\n constructor(\n public id?: number,\n public name?: string,\n public catego"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/product.repository.ts",
"chars": 896,
"preview": "import { Injectable } from \"@angular/core\";\nimport { Product } from \"./product.model\";\nimport { StaticDataSource } from "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/model/static.datasource.ts",
"chars": 1556,
"preview": "import { Injectable } from \"@angular/core\";\nimport { Product } from \"./product.model\";\nimport { Observable, from } from "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/counter.directive.ts",
"chars": 677,
"preview": "import {\n Directive, ViewContainerRef, TemplateRef, Input, Attribute, SimpleChanges\n} from \"@angular/core\";\n\n@Directi"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/store.component.html",
"chars": 1721,
"preview": "<div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col bg-dark text-white\">\n <a class=\"navbar-"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/store.component.ts",
"chars": 1431,
"preview": "import { Component } from \"@angular/core\";\nimport { Product } from \"../model/product.model\";\nimport { ProductRepository "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/app/store/store.module.ts",
"chars": 493,
"preview": "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { FormsModul"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/environments/environment.ts",
"chars": 662,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build --prod` replaces `environm"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/index.html",
"chars": 323,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>SportsStore</title>\n <base href=\"/\">\n <meta "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/polyfills.ts",
"chars": 2838,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/src/test.ts",
"chars": 753,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/tsconfig.app.json",
"chars": 210,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": "
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/tsconfig.json",
"chars": 543,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\":"
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/tsconfig.spec.json",
"chars": 270,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/spec\",\n \"types\": [\n \"jasmine\","
},
{
"path": "08 - SportsStore - Orders and Checkout/Beginning of Chapter/SportsStore/tslint.json",
"chars": 1953,
"preview": "{\n \"extends\": \"tslint:recommended\",\n \"rules\": {\n \"array-type\": false,\n \"arrow-parens\": false,\n \"deprecation\":"
},
{
"path": "08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/.editorconfig",
"chars": 246,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "08 - SportsStore - Orders and Checkout/End of Chapter/SportsStore/angular.json",
"chars": 4421,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1, \n \"newProjectRoot\": \"projects\",\n "
}
]
// ... and 4288 more files (download for full content)
About this extraction
This page contains the full source code of the Apress/pro-angular-9 GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 4488 files (20.2 MB), approximately 5.6M tokens, and a symbol index with 41126 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.