├── .editorconfig
├── .gitattributes
├── .vscode
└── settings.json
├── 9781484254332.jpg
├── Author_README.md
├── Contributing.md
├── LICENSE.txt
├── README.md
├── angular.json
├── dist
└── superheroes
│ ├── assets
│ ├── Superhero-logo.png
│ ├── Superhero-logo.xcf
│ ├── angular-image.png
│ ├── batman.jpg
│ ├── batman.png
│ ├── bheem.png
│ ├── chhottabheem.png
│ └── spiderman.jpg
│ ├── favicon.ico
│ ├── index.html
│ ├── main.js
│ ├── main.js.map
│ ├── polyfills.js
│ ├── polyfills.js.map
│ ├── runtime.js
│ ├── runtime.js.map
│ ├── styles.js
│ ├── styles.js.map
│ ├── vendor.js
│ └── vendor.js.map
├── e2e
├── protractor.conf.js
├── src
│ ├── app.e2e-spec.ts
│ └── app.po.ts
└── tsconfig.e2e.json
├── errata.md
├── package-lock.json
├── package.json
├── src
├── app
│ ├── app-http-calls
│ │ ├── app-http-calls.module.ts
│ │ ├── superhero-data.service.spec.ts
│ │ └── superhero-data.service.ts
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── data-services
│ │ ├── superhero-data.service.spec.ts
│ │ └── superhero-data.service.ts
│ └── superheroes-material-design
│ │ ├── actions-bottomsheet
│ │ ├── actions-bottomsheet.component.css
│ │ ├── actions-bottomsheet.component.html
│ │ ├── actions-bottomsheet.component.spec.ts
│ │ └── actions-bottomsheet.component.ts
│ │ ├── cancel-confirm-bottomsheet
│ │ ├── cancel-confirm-bottomsheet.component.css
│ │ ├── cancel-confirm-bottomsheet.component.html
│ │ ├── cancel-confirm-bottomsheet.component.spec.ts
│ │ └── cancel-confirm-bottomsheet.component.ts
│ │ ├── cancel-confirm-dialog
│ │ ├── cancel-confirm-dialog.component.css
│ │ ├── cancel-confirm-dialog.component.html
│ │ ├── cancel-confirm-dialog.component.spec.ts
│ │ └── cancel-confirm-dialog.component.ts
│ │ ├── create-superhero-reactive-form
│ │ ├── create-superhero-reactive-form.component.css
│ │ ├── create-superhero-reactive-form.component.html
│ │ ├── create-superhero-reactive-form.component.spec.ts
│ │ └── create-superhero-reactive-form.component.ts
│ │ ├── create-superhero
│ │ ├── create-superhero.component.css
│ │ ├── create-superhero.component.html
│ │ ├── create-superhero.component.spec.ts
│ │ └── create-superhero.component.ts
│ │ ├── error-page
│ │ ├── error-page.component.css
│ │ ├── error-page.component.html
│ │ ├── error-page.component.spec.ts
│ │ └── error-page.component.ts
│ │ ├── home
│ │ ├── home.component.css
│ │ ├── home.component.html
│ │ ├── home.component.spec.ts
│ │ └── home.component.ts
│ │ ├── models
│ │ └── superhero.ts
│ │ ├── software-agreement
│ │ ├── software-agreement.component.css
│ │ ├── software-agreement.component.html
│ │ ├── software-agreement.component.spec.ts
│ │ └── software-agreement.component.ts
│ │ ├── superhero-grid-list
│ │ ├── superhero-grid-list.component.css
│ │ ├── superhero-grid-list.component.html
│ │ ├── superhero-grid-list.component.spec.ts
│ │ └── superhero-grid-list.component.ts
│ │ ├── superhero-list
│ │ ├── superhero-list.component.css
│ │ ├── superhero-list.component.html
│ │ ├── superhero-list.component.spec.ts
│ │ └── superhero-list.component.ts
│ │ ├── superhero-new-list
│ │ ├── superhero-new-list.component.css
│ │ ├── superhero-new-list.component.html
│ │ ├── superhero-new-list.component.spec.ts
│ │ └── superhero-new-list.component.ts
│ │ ├── superhero-profile-footer
│ │ ├── superhero-profile-footer.component.css
│ │ ├── superhero-profile-footer.component.html
│ │ ├── superhero-profile-footer.component.spec.ts
│ │ └── superhero-profile-footer.component.ts
│ │ ├── superhero-profile
│ │ ├── superhero-profile.component.css
│ │ ├── superhero-profile.component.html
│ │ ├── superhero-profile.component.spec.ts
│ │ ├── superhero-profile.component.ts
│ │ └── superhero.ts
│ │ ├── superhero-sidenav-container
│ │ ├── superhero-sidenav-container.component.css
│ │ ├── superhero-sidenav-container.component.html
│ │ ├── superhero-sidenav-container.component.spec.ts
│ │ └── superhero-sidenav-container.component.ts
│ │ ├── superhero-sidenav-content
│ │ ├── superhero-sidenav-content.component.css
│ │ ├── superhero-sidenav-content.component.html
│ │ ├── superhero-sidenav-content.component.spec.ts
│ │ └── superhero-sidenav-content.component.ts
│ │ ├── superhero-sidenav
│ │ ├── superhero-sidenav.component.css
│ │ ├── superhero-sidenav.component.html
│ │ ├── superhero-sidenav.component.spec.ts
│ │ └── superhero-sidenav.component.ts
│ │ ├── superhero-toolbar
│ │ ├── superhero-toolbar.component.css
│ │ ├── superhero-toolbar.component.html
│ │ ├── superhero-toolbar.component.spec.ts
│ │ └── superhero-toolbar.component.ts
│ │ ├── superhero
│ │ ├── superhero.component.css
│ │ ├── superhero.component.html
│ │ ├── superhero.component.spec.ts
│ │ └── superhero.component.ts
│ │ ├── superheroes-expandable-list
│ │ ├── superheroes-expandable-list.component.css
│ │ ├── superheroes-expandable-list.component.html
│ │ ├── superheroes-expandable-list.component.spec.ts
│ │ └── superheroes-expandable-list.component.ts
│ │ ├── superheroes-material-design.module.ts
│ │ ├── tab-sample
│ │ ├── tab-sample.component.css
│ │ ├── tab-sample.component.html
│ │ ├── tab-sample.component.spec.ts
│ │ └── tab-sample.component.ts
│ │ └── utilities
│ │ ├── hit-counter.ts
│ │ └── superhero-text.ts
├── assets
│ ├── .gitkeep
│ ├── Superhero-logo.png
│ ├── Superhero-logo.xcf
│ ├── angular-image.png
│ ├── batman.jpg
│ ├── batman.png
│ ├── bheem.png
│ ├── chhottabheem.png
│ └── spiderman.jpg
├── browserslist
├── data
│ └── data.json
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json
├── tsconfig.json
├── tslint.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "workbench.colorCustomizations": {
3 | "activityBar.background": "#3fe6a3",
4 | "activityBar.foreground": "#15202b",
5 | "activityBar.inactiveForeground": "#15202b99",
6 | "activityBarBadge.background": "#ae56e9",
7 | "activityBarBadge.foreground": "#15202b",
8 | "titleBar.activeBackground": "#1cd68b",
9 | "titleBar.inactiveBackground": "#1cd68b99",
10 | "titleBar.activeForeground": "#15202b",
11 | "titleBar.inactiveForeground": "#15202b99",
12 | "statusBar.background": "#1cd68b",
13 | "statusBarItem.hoverBackground": "#16a96e",
14 | "statusBar.foreground": "#15202b"
15 | },
16 | "peacock.color": "#1cd68b"
17 | }
--------------------------------------------------------------------------------
/9781484254332.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/9781484254332.jpg
--------------------------------------------------------------------------------
/Author_README.md:
--------------------------------------------------------------------------------
1 | # Superheroes
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.0.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 |
--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
1 | # Contributing to Apress Source Code
2 |
3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers.
4 |
5 | ## How to Contribute
6 |
7 | 1. Make sure you have a GitHub account.
8 | 2. Fork the repository for the relevant book.
9 | 3. Create a new branch on which to make your change, e.g.
10 | `git checkout -b my_code_contribution`
11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted.
12 | 5. Submit a pull request.
13 |
14 | Thank you for your contribution!
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Freeware License, some rights reserved
2 |
3 | Copyright (c) 2020 Venkata Keerti Kotaru
4 |
5 | Permission is hereby granted, free of charge, to anyone obtaining a copy
6 | of this software and associated documentation files (the "Software"),
7 | to work with the Software within the limits of freeware distribution and fair use.
8 | This includes the rights to use, copy, and modify the Software for personal use.
9 | Users are also allowed and encouraged to submit corrections and modifications
10 | to the Software for the benefit of other users.
11 |
12 | It is not allowed to reuse, modify, or redistribute the Software for
13 | commercial use in any way, or for a user’s educational materials such as books
14 | or blog articles without prior permission from the copyright holder.
15 |
16 | The above copyright notice and this permission notice need to be included
17 | in all copies or substantial portions of the software.
18 |
19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 | AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25 | SOFTWARE.
26 |
27 |
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Apress Source Code
2 |
3 | This repository accompanies [*Angular for Material Design*](https://www.apress.com/9781484254332) by Venkata Keerti Kotaru (Apress, 2020).
4 |
5 | [comment]: #cover
6 | 
7 |
8 | Download the files as a zip using the green button, or clone the repository to your machine using Git.
9 |
10 | ## Releases
11 |
12 | Release v1.0 corresponds to the code in the published book, without corrections or updates.
13 |
14 | ## Contributions
15 |
16 | See the file Contributing.md for more information on how you can contribute to this repository.
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "superheroes": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {},
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "baseHref": "superheroes/dist/superheroes/",
17 | "outputPath": "dist/superheroes",
18 | "index": "src/index.html",
19 | "main": "src/main.ts",
20 | "polyfills": "src/polyfills.ts",
21 | "tsConfig": "src/tsconfig.app.json",
22 | "assets": [
23 | "src/favicon.ico",
24 | "src/assets"
25 | ],
26 | "styles": [
27 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
28 | "src/styles.css"
29 | ],
30 | "scripts": []
31 | },
32 | "configurations": {
33 | "production": {
34 | "fileReplacements": [
35 | {
36 | "replace": "src/environments/environment.ts",
37 | "with": "src/environments/environment.prod.ts"
38 | }
39 | ],
40 | "optimization": true,
41 | "outputHashing": "all",
42 | "sourceMap": false,
43 | "extractCss": true,
44 | "namedChunks": false,
45 | "aot": true,
46 | "extractLicenses": true,
47 | "vendorChunk": false,
48 | "buildOptimizer": true,
49 | "budgets": [
50 | {
51 | "type": "initial",
52 | "maximumWarning": "2mb",
53 | "maximumError": "5mb"
54 | }
55 | ]
56 | }
57 | }
58 | },
59 | "serve": {
60 | "builder": "@angular-devkit/build-angular:dev-server",
61 | "options": {
62 | "browserTarget": "superheroes:build"
63 | },
64 | "configurations": {
65 | "production": {
66 | "browserTarget": "superheroes:build:production"
67 | }
68 | }
69 | },
70 | "extract-i18n": {
71 | "builder": "@angular-devkit/build-angular:extract-i18n",
72 | "options": {
73 | "browserTarget": "superheroes:build"
74 | }
75 | },
76 | "test": {
77 | "builder": "@angular-devkit/build-angular:karma",
78 | "options": {
79 | "main": "src/test.ts",
80 | "polyfills": "src/polyfills.ts",
81 | "tsConfig": "src/tsconfig.spec.json",
82 | "karmaConfig": "src/karma.conf.js",
83 | "styles": [
84 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
85 | "src/styles.css"
86 | ],
87 | "scripts": [],
88 | "assets": [
89 | "src/favicon.ico",
90 | "src/assets"
91 | ]
92 | }
93 | },
94 | "lint": {
95 | "builder": "@angular-devkit/build-angular:tslint",
96 | "options": {
97 | "tsConfig": [
98 | "src/tsconfig.app.json",
99 | "src/tsconfig.spec.json"
100 | ],
101 | "exclude": [
102 | "**/node_modules/**"
103 | ]
104 | }
105 | }
106 | }
107 | },
108 | "superheroes-e2e": {
109 | "root": "e2e/",
110 | "projectType": "application",
111 | "prefix": "",
112 | "architect": {
113 | "e2e": {
114 | "builder": "@angular-devkit/build-angular:protractor",
115 | "options": {
116 | "protractorConfig": "e2e/protractor.conf.js",
117 | "devServerTarget": "superheroes:serve"
118 | },
119 | "configurations": {
120 | "production": {
121 | "devServerTarget": "superheroes:serve:production"
122 | }
123 | }
124 | },
125 | "lint": {
126 | "builder": "@angular-devkit/build-angular:tslint",
127 | "options": {
128 | "tsConfig": "e2e/tsconfig.e2e.json",
129 | "exclude": [
130 | "**/node_modules/**"
131 | ]
132 | }
133 | }
134 | }
135 | }
136 | },
137 | "defaultProject": "superheroes"
138 | }
--------------------------------------------------------------------------------
/dist/superheroes/assets/Superhero-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/Superhero-logo.png
--------------------------------------------------------------------------------
/dist/superheroes/assets/Superhero-logo.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/Superhero-logo.xcf
--------------------------------------------------------------------------------
/dist/superheroes/assets/angular-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/angular-image.png
--------------------------------------------------------------------------------
/dist/superheroes/assets/batman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/batman.jpg
--------------------------------------------------------------------------------
/dist/superheroes/assets/batman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/batman.png
--------------------------------------------------------------------------------
/dist/superheroes/assets/bheem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/bheem.png
--------------------------------------------------------------------------------
/dist/superheroes/assets/chhottabheem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/chhottabheem.png
--------------------------------------------------------------------------------
/dist/superheroes/assets/spiderman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/assets/spiderman.jpg
--------------------------------------------------------------------------------
/dist/superheroes/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/dist/superheroes/favicon.ico
--------------------------------------------------------------------------------
/dist/superheroes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Superheroes
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/dist/superheroes/runtime.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // install a JSONP callback for chunk loading
3 | /******/ function webpackJsonpCallback(data) {
4 | /******/ var chunkIds = data[0];
5 | /******/ var moreModules = data[1];
6 | /******/ var executeModules = data[2];
7 | /******/
8 | /******/ // add "moreModules" to the modules object,
9 | /******/ // then flag all "chunkIds" as loaded and fire callback
10 | /******/ var moduleId, chunkId, i = 0, resolves = [];
11 | /******/ for(;i < chunkIds.length; i++) {
12 | /******/ chunkId = chunkIds[i];
13 | /******/ if(installedChunks[chunkId]) {
14 | /******/ resolves.push(installedChunks[chunkId][0]);
15 | /******/ }
16 | /******/ installedChunks[chunkId] = 0;
17 | /******/ }
18 | /******/ for(moduleId in moreModules) {
19 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
20 | /******/ modules[moduleId] = moreModules[moduleId];
21 | /******/ }
22 | /******/ }
23 | /******/ if(parentJsonpFunction) parentJsonpFunction(data);
24 | /******/
25 | /******/ while(resolves.length) {
26 | /******/ resolves.shift()();
27 | /******/ }
28 | /******/
29 | /******/ // add entry modules from loaded chunk to deferred list
30 | /******/ deferredModules.push.apply(deferredModules, executeModules || []);
31 | /******/
32 | /******/ // run deferred modules when all chunks ready
33 | /******/ return checkDeferredModules();
34 | /******/ };
35 | /******/ function checkDeferredModules() {
36 | /******/ var result;
37 | /******/ for(var i = 0; i < deferredModules.length; i++) {
38 | /******/ var deferredModule = deferredModules[i];
39 | /******/ var fulfilled = true;
40 | /******/ for(var j = 1; j < deferredModule.length; j++) {
41 | /******/ var depId = deferredModule[j];
42 | /******/ if(installedChunks[depId] !== 0) fulfilled = false;
43 | /******/ }
44 | /******/ if(fulfilled) {
45 | /******/ deferredModules.splice(i--, 1);
46 | /******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
47 | /******/ }
48 | /******/ }
49 | /******/ return result;
50 | /******/ }
51 | /******/
52 | /******/ // The module cache
53 | /******/ var installedModules = {};
54 | /******/
55 | /******/ // object to store loaded and loading chunks
56 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
57 | /******/ // Promise = chunk loading, 0 = chunk loaded
58 | /******/ var installedChunks = {
59 | /******/ "runtime": 0
60 | /******/ };
61 | /******/
62 | /******/ var deferredModules = [];
63 | /******/
64 | /******/ // The require function
65 | /******/ function __webpack_require__(moduleId) {
66 | /******/
67 | /******/ // Check if module is in cache
68 | /******/ if(installedModules[moduleId]) {
69 | /******/ return installedModules[moduleId].exports;
70 | /******/ }
71 | /******/ // Create a new module (and put it into the cache)
72 | /******/ var module = installedModules[moduleId] = {
73 | /******/ i: moduleId,
74 | /******/ l: false,
75 | /******/ exports: {}
76 | /******/ };
77 | /******/
78 | /******/ // Execute the module function
79 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
80 | /******/
81 | /******/ // Flag the module as loaded
82 | /******/ module.l = true;
83 | /******/
84 | /******/ // Return the exports of the module
85 | /******/ return module.exports;
86 | /******/ }
87 | /******/
88 | /******/
89 | /******/ // expose the modules object (__webpack_modules__)
90 | /******/ __webpack_require__.m = modules;
91 | /******/
92 | /******/ // expose the module cache
93 | /******/ __webpack_require__.c = installedModules;
94 | /******/
95 | /******/ // define getter function for harmony exports
96 | /******/ __webpack_require__.d = function(exports, name, getter) {
97 | /******/ if(!__webpack_require__.o(exports, name)) {
98 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
99 | /******/ }
100 | /******/ };
101 | /******/
102 | /******/ // define __esModule on exports
103 | /******/ __webpack_require__.r = function(exports) {
104 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
105 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
106 | /******/ }
107 | /******/ Object.defineProperty(exports, '__esModule', { value: true });
108 | /******/ };
109 | /******/
110 | /******/ // create a fake namespace object
111 | /******/ // mode & 1: value is a module id, require it
112 | /******/ // mode & 2: merge all properties of value into the ns
113 | /******/ // mode & 4: return value when already ns object
114 | /******/ // mode & 8|1: behave like require
115 | /******/ __webpack_require__.t = function(value, mode) {
116 | /******/ if(mode & 1) value = __webpack_require__(value);
117 | /******/ if(mode & 8) return value;
118 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
119 | /******/ var ns = Object.create(null);
120 | /******/ __webpack_require__.r(ns);
121 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
122 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
123 | /******/ return ns;
124 | /******/ };
125 | /******/
126 | /******/ // getDefaultExport function for compatibility with non-harmony modules
127 | /******/ __webpack_require__.n = function(module) {
128 | /******/ var getter = module && module.__esModule ?
129 | /******/ function getDefault() { return module['default']; } :
130 | /******/ function getModuleExports() { return module; };
131 | /******/ __webpack_require__.d(getter, 'a', getter);
132 | /******/ return getter;
133 | /******/ };
134 | /******/
135 | /******/ // Object.prototype.hasOwnProperty.call
136 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
137 | /******/
138 | /******/ // __webpack_public_path__
139 | /******/ __webpack_require__.p = "";
140 | /******/
141 | /******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
142 | /******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
143 | /******/ jsonpArray.push = webpackJsonpCallback;
144 | /******/ jsonpArray = jsonpArray.slice();
145 | /******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
146 | /******/ var parentJsonpFunction = oldJsonpFunction;
147 | /******/
148 | /******/
149 | /******/ // run deferred modules from other chunks
150 | /******/ checkDeferredModules();
151 | /******/ })
152 | /************************************************************************/
153 | /******/ ([]);
154 | //# sourceMappingURL=runtime.js.map
--------------------------------------------------------------------------------
/dist/superheroes/runtime.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,yBAAiB,4BAA4B;AAC7C;AACA;AACA,0BAAkB,2BAA2B;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;AACA;AACA;AACA,wBAAgB,uBAAuB;AACvC;;;AAGA;AACA","file":"runtime.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"runtime\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}
--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: require('path').join(__dirname, './tsconfig.e2e.json')
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('workspace-project App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getTitleText()).toEqual('Welcome to superheroes!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getTitleText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/errata.md:
--------------------------------------------------------------------------------
1 | # Errata for *Book Title*
2 |
3 | On **page xx** [Summary of error]:
4 |
5 | Details of error here. Highlight key pieces in **bold**.
6 |
7 | ***
8 |
9 | On **page xx** [Summary of error]:
10 |
11 | Details of error here. Highlight key pieces in **bold**.
12 |
13 | ***
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "superheroes",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~7.1.0",
15 | "@angular/cdk": "^7.3.1",
16 | "@angular/common": "~7.1.0",
17 | "@angular/compiler": "~7.1.0",
18 | "@angular/core": "~7.1.0",
19 | "@angular/forms": "~7.1.0",
20 | "@angular/material": "^7.1.0",
21 | "@angular/material-moment-adapter": "^8.0.1",
22 | "@angular/platform-browser": "~7.1.0",
23 | "@angular/platform-browser-dynamic": "~7.1.0",
24 | "@angular/router": "~7.1.0",
25 | "core-js": "^2.5.4",
26 | "global": "^4.4.0",
27 | "hammerjs": "^2.0.8",
28 | "json-server": "^0.15.0",
29 | "module": "^1.2.5",
30 | "moment": "^2.24.0",
31 | "rxjs": "~6.3.3",
32 | "tslib": "^1.9.0",
33 | "zone.js": "~0.8.26"
34 | },
35 | "devDependencies": {
36 | "@angular-devkit/build-angular": "~0.11.0",
37 | "@angular/cli": "~7.1.0",
38 | "@angular/compiler-cli": "~7.1.0",
39 | "@angular/language-service": "~7.1.0",
40 | "@types/jasmine": "~2.8.8",
41 | "@types/jasminewd2": "~2.0.3",
42 | "@types/node": "~8.9.4",
43 | "codelyzer": "~4.5.0",
44 | "jasmine-core": "~2.99.1",
45 | "jasmine-spec-reporter": "~4.2.1",
46 | "karma": "~3.1.1",
47 | "karma-chrome-launcher": "~2.2.0",
48 | "karma-coverage-istanbul-reporter": "~2.0.1",
49 | "karma-jasmine": "~1.1.2",
50 | "karma-jasmine-html-reporter": "^0.2.2",
51 | "protractor": "~5.4.0",
52 | "ts-node": "~7.0.0",
53 | "tslint": "~5.11.0",
54 | "typescript": "~3.1.6"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/app-http-calls/app-http-calls.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { HttpClientModule, HttpClient } from '@angular/common/http';
4 |
5 | @NgModule({
6 | declarations: [],
7 | imports: [
8 | CommonModule,
9 | HttpClientModule
10 | ],
11 | providers: [HttpClient]
12 |
13 | })
14 | export class AppHttpCallsModule { }
15 |
--------------------------------------------------------------------------------
/src/app/app-http-calls/superhero-data.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroDataService } from './superhero-data.service';
4 |
5 | describe('SuperheroDataService', () => {
6 | beforeEach(() => TestBed.configureTestingModule({}));
7 |
8 | it('should be created', () => {
9 | const service: SuperheroDataService = TestBed.get(SuperheroDataService);
10 | expect(service).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/app/app-http-calls/superhero-data.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpErrorResponse } from '@angular/common/http';
3 | import { Superhero, Superhero2 } from '../superheroes-material-design/models/superhero';
4 | import { Observable, Observer, throwError } from 'rxjs';
5 | import { catchError } from 'rxjs/operators';
6 |
7 | const URL_PREFIX = "http://localhost:3000";
8 |
9 | @Injectable({
10 | providedIn: 'root',
11 | })
12 | export class SuperheroDataService {
13 |
14 | errorHandler = {
15 | log: (message, error) => console.log(message, error),
16 | alertFriendlyInfo: (message, observer: Observer) => observer.error(message)
17 | };
18 |
19 | constructor(private httpClient: HttpClient) { }
20 |
21 | getHeroes():Observable>{
22 | return this.httpClient.get>(`${URL_PREFIX}/heroes`)
23 | .pipe(
24 | catchError( (error: HttpErrorResponse) => {
25 | this.errorHandler.log("Error while getting heroes", error);
26 | return throwError("Error while getting heroes");
27 | }));
28 | }
29 |
30 | // getHeroes(): Promise>{
31 | // return new Promise>( (resolve /*, reject */)=> {
32 | // let results: Array = [];
33 | // this.httpClient.get>(`${URL_PREFIX}/heroes`)
34 | // .subscribe(
35 | // (data: Array) => {
36 | // data.map( i => {
37 | // // perform additional processing and transformation of data obtained from the service.
38 | // results.push(i)
39 |
40 | // });
41 | // resolve(results);
42 | // },
43 | // () => ({/** Error handling code goes here */}),
44 | // () => ({/** Observable complete */})
45 | // );
46 | // });
47 | // }
48 |
49 | // getHeroes():Observable>{
50 | // return Observable.create((observer) => {
51 | // let results: Array = [];
52 | // this.httpClient.get>(`${URL_PREFIX}/heroes`)
53 | // .subscribe(
54 | // (data: Array) => {
55 | // data.map( i => {
56 | // // perform additional processing and transformation of data obtained from the service.
57 | // results.push(i)
58 | // });
59 |
60 | // observer.next(results);
61 | // observer.complete();
62 |
63 | // },
64 | // (error) => {
65 | // this.errorHandler.log("Error while getting heroes", error);
66 | // this.errorHandler.alertFriendlyInfo("Error while getting heroes", observer)
67 | // },
68 | // () => ({/** Observable complete */})
69 | // );
70 | // });
71 | // }
72 |
73 | createHero(hero: Superhero2){
74 | return this.httpClient
75 | .post(`${URL_PREFIX}/heroes`, hero)
76 | .pipe(
77 | catchError( (error: HttpErrorResponse) => {
78 | this.errorHandler.log("Error while creating a hero", error);
79 | return throwError("Error while creating a hero");
80 | }));
81 | }
82 |
83 | updateHero(hero: Superhero, heroId: string){
84 | return this.httpClient
85 | .patch(`${URL_PREFIX}/heroes/${heroId}`, hero)
86 | .pipe(
87 | catchError( (error: HttpErrorResponse) => {
88 | this.errorHandler.log("Error while updating a hero", error);
89 | return throwError("Error while updating a hero");
90 | }));
91 | }
92 |
93 | deleteHero(heroId: string){
94 | return this.httpClient
95 | .delete(`${URL_PREFIX}/heroes/${heroId}`)
96 | .pipe(
97 | catchError( (error: HttpErrorResponse) => {
98 | this.errorHandler.log("Error while deleting a hero", error);
99 | return throwError("Error while deleting a hero");
100 | }));
101 | }
102 |
103 | }
104 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { SuperheroListComponent } from './superheroes-material-design/superhero-list/superhero-list.component';
5 | import { CreateSuperheroReactiveFormComponent } from './superheroes-material-design/create-superhero-reactive-form/create-superhero-reactive-form.component';
6 | import { SuperheroComponent } from './superheroes-material-design/superhero/superhero.component';
7 | import { ErrorPageComponent } from './superheroes-material-design/error-page/error-page.component';
8 | import { CreateSuperheroComponent } from './superheroes-material-design/create-superhero/create-superhero.component';
9 | import { SuperheroesExpandableListComponent } from './superheroes-material-design/superheroes-expandable-list/superheroes-expandable-list.component';
10 | import { SuperheroNewListComponent } from './superheroes-material-design/superhero-new-list/superhero-new-list.component';
11 | import { SuperheroGridListComponent } from './superheroes-material-design/superhero-grid-list/superhero-grid-list.component';
12 | import { HomeComponent } from './superheroes-material-design/home/home.component';
13 |
14 | let routes: Routes = [
15 | {
16 | path: "superhero-home",
17 | component: HomeComponent
18 | },
19 | {
20 | path: "heroes-accordion",
21 | component: SuperheroesExpandableListComponent
22 | },
23 | {
24 | path: "heroes",
25 | component: SuperheroListComponent
26 | },
27 | {
28 | path: "hero-list",
29 | component: SuperheroNewListComponent
30 | },
31 | {
32 | path: "hero-grid-list",
33 | component: SuperheroGridListComponent
34 | },
35 | {
36 | path: "create-hero",
37 | component: CreateSuperheroComponent
38 | },
39 | {
40 | path: "hero/:heroName",
41 | component: SuperheroComponent
42 | },
43 | {
44 | path: "list",
45 | redirectTo: "/heroes"
46 | }
47 | ];
48 |
49 | routes = routes.concat([{
50 | path: "",
51 | redirectTo: "/heroes-accordion",
52 | pathMatch: "full"
53 | },
54 | {
55 | path: "**",
56 | component: ErrorPageComponent
57 | }
58 | ]);
59 |
60 | @NgModule({
61 | imports: [RouterModule.forRoot(routes)],
62 | exports: [RouterModule]
63 | })
64 | export class AppRoutingModule { }
65 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | a{
2 | margin: 0px 15px 0px 15px;
3 | color: white;
4 | text-decoration: none
5 | }
6 |
7 | div.container-padding{
8 | margin: 10px 55px 10px 55px;
9 | }
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | }));
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.debugElement.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'superheroes'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.debugElement.componentInstance;
26 | expect(app.title).toEqual('superheroes');
27 | });
28 |
29 | it('should render title in a h1 tag', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.debugElement.nativeElement;
33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to superheroes!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, ViewChild } from '@angular/core';
2 | import { Superhero } from './superheroes-material-design/superhero-profile/superhero-profile.component';
3 | import { Router } from '@angular/router';
4 | import { SuperheroSidenavComponent } from './superheroes-material-design/superhero-sidenav/superhero-sidenav.component';
5 |
6 | @Component({
7 | selector: 'app-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css']
10 | })
11 | export class AppComponent {
12 | title: string = "Superheroes";
13 | switchTabsOrSidenav: boolean;
14 | @ViewChild("sidenav") sidenav: SuperheroSidenavComponent;
15 |
16 | constructor(private router: Router){
17 | }
18 |
19 | toggleSidenav(evt: EventEmitter){
20 | evt ? this.sidenav.open() : this.sidenav.close();
21 | }
22 |
23 | switchToTabs(value: boolean){
24 | this.switchTabsOrSidenav = value;
25 | }
26 |
27 | navigateToCreate(){
28 | this.router.navigate(['/create-hero']);
29 | }
30 |
31 | heroListDescending(){
32 | this.router.navigate(['/heroes'], {queryParams:{sortOrder: 'descending'}});
33 | }
34 |
35 | superpowers:Array = [
36 | "Can fly",
37 | "Strength and Stamina",
38 | "Kids love him"
39 | ];
40 |
41 | address: {
42 | firstLine: string,
43 | city: string
44 | } = {
45 | firstLine: "Road # 4",
46 | city: "Bengaluru"
47 | };
48 |
49 | printSuperhero(hero: Superhero){
50 | console.log(hero);
51 | }
52 |
53 | moveSuperhero(){
54 | this.address = {
55 | firstLine: this.address.firstLine,
56 | city: "Hyderabad"
57 | };
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 |
4 | import {SuperheroesMaterialDesignModule} from './superheroes-material-design/superheroes-material-design.module';
5 |
6 | import { AppRoutingModule } from './app-routing.module';
7 | import { AppComponent } from './app.component';
8 | import { AppHttpCallsModule } from './app-http-calls/app-http-calls.module';
9 |
10 | @NgModule({
11 | declarations: [
12 | AppComponent
13 | ],
14 | imports: [
15 | BrowserModule,
16 | AppRoutingModule,
17 | SuperheroesMaterialDesignModule,
18 | AppHttpCallsModule
19 | ],
20 | bootstrap: [AppComponent]
21 | })
22 | export class AppModule { }
23 |
--------------------------------------------------------------------------------
/src/app/data-services/superhero-data.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroDataService } from './superhero-data.service';
4 |
5 | describe('SuperheroDataService', () => {
6 | beforeEach(() => TestBed.configureTestingModule({}));
7 |
8 | it('should be created', () => {
9 | const service: SuperheroDataService = TestBed.get(SuperheroDataService);
10 | expect(service).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/app/data-services/superhero-data.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Superhero } from '../superheroes-material-design/models/superhero';
3 | import { Observable } from 'rxjs';
4 |
5 | @Injectable()
6 | export class SuperheroDataService {
7 |
8 | constructor() { }
9 |
10 | getSuperheroes(): Observable>{
11 | return new Observable>( observer => {
12 | observer.next([
13 | {
14 | name: "Chhotta Bheem",
15 | email: "ChhottaBheem@angularsample.com",
16 | details: "A hero in Dholakpur village",
17 | country: "India",
18 | cardImage: "/assets/chhottabheem.png",
19 | specialPowers: ["a very strong boy!"],
20 | favFood: ["Laddu"]
21 | },
22 | {
23 | name: "Spiderman",
24 | email: "spiderman@angularsample.com",
25 | details: "A hero in New York city",
26 | country: "United States",
27 | specialPowers: ["Shoots web"],
28 | cardImage: "/assets/spiderman.jpg",
29 | favFood: ["Cheese burger"]
30 | },
31 | {
32 | name: "Batman",
33 | email: "batman@angularsample.com",
34 | details: "A hero in Gotham city",
35 | country: "United Kingdom",
36 | cardImage: "/assets/batman.png",
37 | specialPowers: ["Martial Arts"],
38 | favFood: ["Spaghetti"]
39 | }
40 | ]);
41 | observer.complete();
42 | })
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/actions-bottomsheet/actions-bottomsheet.component.css:
--------------------------------------------------------------------------------
1 | strong{
2 | margin-left: 20px;
3 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/actions-bottomsheet/actions-bottomsheet.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | share
4 | Share
5 |
6 |
7 | print
8 | Print
9 |
10 |
11 | message
12 | Send a message
13 |
14 |
15 | delete
16 | Delete
17 |
18 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/actions-bottomsheet/actions-bottomsheet.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ActionsBottomsheetComponent } from './actions-bottomsheet.component';
4 |
5 | describe('ActionsBottomsheetComponent', () => {
6 | let component: ActionsBottomsheetComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ ActionsBottomsheetComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ActionsBottomsheetComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/actions-bottomsheet/actions-bottomsheet.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-actions-bottomsheet',
5 | templateUrl: './actions-bottomsheet.component.html',
6 | styleUrls: ['./actions-bottomsheet.component.css']
7 | })
8 | export class ActionsBottomsheetComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-bottomsheet/cancel-confirm-bottomsheet.component.css:
--------------------------------------------------------------------------------
1 | div{
2 | padding: 15px 0px 15px 0px;
3 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-bottomsheet/cancel-confirm-bottomsheet.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Are you sure?
4 |
5 |
6 | Are you sure to cancel without saving the data?
7 |
8 | {{message}}
9 |
10 |
11 |
12 |
13 | Ok
14 | Cancel
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-bottomsheet/cancel-confirm-bottomsheet.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CancelConfirmBottomsheetComponent } from './cancel-confirm-bottomsheet.component';
4 |
5 | describe('CancelConfirmBottomsheetComponent', () => {
6 | let component: CancelConfirmBottomsheetComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ CancelConfirmBottomsheetComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(CancelConfirmBottomsheetComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-bottomsheet/cancel-confirm-bottomsheet.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Inject } from '@angular/core';
2 | import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
3 |
4 | @Component({
5 | selector: 'app-cancel-confirm-bottomsheet',
6 | templateUrl: './cancel-confirm-bottomsheet.component.html',
7 | styleUrls: ['./cancel-confirm-bottomsheet.component.css']
8 | })
9 | export class CancelConfirmBottomsheetComponent implements OnInit {
10 |
11 | message: string;
12 |
13 | constructor(private bottomSheetRef: MatBottomSheetRef,
14 | @Inject(MAT_BOTTOM_SHEET_DATA) bottomsheetData:{ message:string}) {
15 | this.message = bottomsheetData.message;
16 | }
17 |
18 | ngOnInit() {
19 | }
20 |
21 | onOkClick(){
22 | this.bottomSheetRef.dismiss({ clicked: "Ok"});
23 | }
24 |
25 | onCancelClick(){
26 | this.bottomSheetRef.dismiss({ clicked: "Cancel"});
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-dialog/cancel-confirm-dialog.component.css:
--------------------------------------------------------------------------------
1 | div.dialogContent{
2 | padding-bottom: 20px;
3 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-dialog/cancel-confirm-dialog.component.html:
--------------------------------------------------------------------------------
1 |
2 | Are you sure?
3 |
4 |
5 | Are you sure to cancel without saving the data?
6 | {{message}}
7 |
8 |
9 | Ok
10 | Cancel
11 |
12 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-dialog/cancel-confirm-dialog.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CancelConfirmDialogComponent } from './cancel-confirm-dialog.component';
4 |
5 | describe('CancelConfirmDialogComponent', () => {
6 | let component: CancelConfirmDialogComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ CancelConfirmDialogComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(CancelConfirmDialogComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/cancel-confirm-dialog/cancel-confirm-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Inject } from '@angular/core';
2 | import { MatDialogRef, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
3 |
4 | @Component({
5 | selector: 'app-cancel-confirm-dialog',
6 | templateUrl: './cancel-confirm-dialog.component.html',
7 | styleUrls: ['./cancel-confirm-dialog.component.css'],
8 | })
9 | export class CancelConfirmDialogComponent implements OnInit {
10 |
11 | message: string;
12 |
13 | constructor(public dialogRef: MatDialogRef,
14 | @Inject(MAT_DIALOG_DATA) data: { message: string}) {
15 | this.message = (data && data.message) || "";
16 | }
17 |
18 | onOkClick(){
19 | //console.log("I do nothing");
20 | this.dialogRef.close({clicked: "Ok"});
21 | }
22 |
23 | onCancelClick(){
24 | //this.dialogRef.close();
25 | }
26 |
27 | ngOnInit() {
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero-reactive-form/create-superhero-reactive-form.component.css:
--------------------------------------------------------------------------------
1 | div{
2 | margin: 15px 15px 15px 15px;
3 | width:400px;
4 | }
5 |
6 | mat-form-field{
7 | width: 400px;
8 | }
9 |
10 | .pull-right{
11 | text-align: right;
12 | }
13 |
14 | button{
15 | margin: 2px 10px 5px 10px;
16 | }
17 |
18 | .error-message{
19 | padding: 5px 5px 5px 5px;
20 | background-color: silver;
21 | }
22 |
23 | mat-slider{
24 | width: 350px
25 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero-reactive-form/create-superhero-reactive-form.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero-reactive-form/create-superhero-reactive-form.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CreateSuperheroReactiveFormComponent } from './create-superhero-reactive-form.component';
4 |
5 | describe('CreateSuperheroReactiveFormComponent', () => {
6 | let component: CreateSuperheroReactiveFormComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ CreateSuperheroReactiveFormComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(CreateSuperheroReactiveFormComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero-reactive-form/create-superhero-reactive-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, EventEmitter } from '@angular/core';
2 | import { MatSliderChange, MatSlider } from '@angular/material/slider';
3 | import { MatSlideToggleChange } from '@angular/material/slide-toggle';
4 | import { MatCheckboxChange } from '@angular/material/checkbox';
5 | import { FormBuilder, FormControl, FormGroup, FormArray, Validators } from '@angular/forms';
6 | import { Superhero } from '../models/superhero';
7 | import * as moment from 'moment';
8 |
9 | @Component({
10 | selector: 'app-create-superhero-reactive-form',
11 | templateUrl: './create-superhero-reactive-form.component.html',
12 | styleUrls: ['./create-superhero-reactive-form.component.css']
13 | })
14 | export class CreateSuperheroReactiveFormComponent implements OnInit {
15 |
16 |
17 | superheroFormGroup: FormGroup;
18 |
19 | minRating:number = 1;
20 | maxRating:number = 10;
21 | rating: number=8;
22 |
23 | dobMinDate = new Date();
24 | dobMaxDate = new Date();
25 |
26 | onSliderChange(event: MatSliderChange){
27 | console.log(event.value );
28 | }
29 |
30 | onToggleChange(event: MatSlideToggleChange){
31 | console.log(event.checked );
32 | }
33 |
34 | onToggleCheckboxChange(event: MatCheckboxChange){
35 | console.log(event.checked );
36 | }
37 |
38 | filterWeekends(date: Date){
39 | // if(date.day() !== 0 && date.day() !== 6){
40 | return true;
41 | // }
42 | // return false;
43 | }
44 |
45 |
46 | // name: FormControl = new FormControl("Chhotta Bheem by default");
47 | // email: FormControl = this.fb.control("");
48 | // details: FormControl = this.fb.control("");
49 | // powers: FormControl = this.fb.control("");
50 | // country: FormControl = this.fb.control("");
51 | // favFood: FormControl = this.fb.control("");
52 | dob: Date = new Date("05/21/2019");
53 |
54 | cities = [ {
55 | name: "New York",
56 | selectedByDefault: true
57 | },{
58 | name: "Boston",
59 | selectedByDefault: false
60 | },{
61 | name: "Hyderabad",
62 | selectedByDefault: false
63 | }, {
64 | name: "Bengaluru",
65 | selectedByDefault: true
66 | }];
67 |
68 | favs = [];
69 |
70 |
71 | constructor(private fb: FormBuilder) { }
72 |
73 | ngOnInit() {
74 |
75 | let j = this.cities.map( i => new FormControl(i.selectedByDefault));
76 |
77 | this.superheroFormGroup = new FormGroup( {
78 | name: new FormControl('', Validators.required),
79 | email:new FormControl('', [Validators.required, Validators.email]),
80 | details: new FormControl('', [Validators.minLength(5),Validators.maxLength(100)]),
81 | powers: new FormControl(''),
82 | country: new FormControl(''),
83 | dob: new FormControl(new Date('05/20/2019')),
84 | rating: new FormControl(2),
85 | jurisdiction: new FormArray(j)
86 | });
87 |
88 |
89 | // this.superheroFormGroup = this.fb.group({
90 | // name:['', Validators.required],
91 | // email:['', Validators.required, Validators.email],
92 | // details: ['', Validators.minLength(5), Validators.maxLength(100)],
93 | // powers: '',
94 | // country: '',
95 | // dob: new Date(),
96 | // rating: 8
97 | // // jurisdiction: this.fb.array(["New York, Boston, Hyderabad, Bengaluru"])
98 |
99 | // });
100 |
101 | // this.superheroFormGroup
102 | // .valueChanges
103 | // .subscribe(item =>
104 | // console.log("Stream as form changes, ", item as Superhero));
105 |
106 | this.superheroFormGroup
107 | .valueChanges
108 | .subscribe(item => {
109 | item.jurisdiction.map( (value, it)=> console.log(this.cities[it].name, value));
110 | });
111 |
112 |
113 | // setTimeout( () => this.name.setValue("Value set on timeout"), 1000);
114 | }
115 |
116 | get name(){
117 | return this.superheroFormGroup
118 | .get("name");
119 | }
120 |
121 | get email(){
122 | return this.superheroFormGroup
123 | .get('email');
124 | }
125 |
126 | get favFood(){
127 | return this.superheroFormGroup.get('favFood') as FormArray
128 | }
129 |
130 | submitHanlder(){
131 | let superhero = this.superheroFormGroup.value as Superhero;
132 | console.log("Superhero model object ", moment(this.superheroFormGroup.value.dob).toDate());
133 | }
134 |
135 | changeHandler(){
136 | // console.log("Log the snapshot at a point in time, ", this.name.value);
137 | }
138 |
139 | removeHandler(){
140 |
141 | }
142 |
143 | }
144 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero/create-superhero.component.css:
--------------------------------------------------------------------------------
1 | div{
2 | width: 100%;
3 | }
4 |
5 | mat-form-field{
6 | width: 100%;
7 | }
8 |
9 | .pull-right{
10 | text-align: right;
11 | }
12 |
13 | button{
14 | margin: 2px 10px 5px 10px;
15 | }
16 |
17 | .error-message{
18 | padding: 5px 5px 5px 5px;
19 | background-color: silver;
20 | }
21 |
22 | mat-card{
23 | padding: 10px 35px 35px 30px;
24 | margin: 10px 35px 35px 30px;
25 | width: 35%;
26 | }
27 |
28 | mat-card-footer{
29 | font-style: italic;
30 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero/create-superhero.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Create a new superhero
5 |
6 |
7 | A new superhero is born in the system
8 |
9 |
10 |
11 |
12 |
13 |
17 |
18 |
19 |
20 | Superhero Name
21 |
23 | Enter name
24 |
25 |
28 |
29 |
30 |
31 |
32 | Email
33 |
34 | How do I contact the superhero for help?
35 |
36 |
37 |
38 | Please enter a valid email address.
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | Powers
47 |
49 | Explain superhero powers
50 |
51 |
52 |
53 |
54 |
55 |
56 | Country
57 |
58 | None
59 |
60 | India
61 | United States
62 |
63 |
64 | Asgard
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | Special Powers
75 |
76 | None
77 | fly
78 | wield hammer
79 | grow powerful
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | Likes to eat
88 |
89 |
90 |
91 | {{item}}
92 | cancel
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
105 |
106 |
107 |
108 | Cancel
109 | Save
110 |
111 |
112 | * All superheroes can fly
113 |
114 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero/create-superhero.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CreateSuperheroComponent } from './create-superhero.component';
4 |
5 | describe('CreateSuperheroComponent', () => {
6 | let component: CreateSuperheroComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ CreateSuperheroComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(CreateSuperheroComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/create-superhero/create-superhero.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { MatChipEvent } from '@angular/material/chips';
3 | import { Superhero } from '../models/superhero';
4 | import { MatDialog, MatDialogRef, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
5 | import { CancelConfirmDialogComponent } from '../cancel-confirm-dialog/cancel-confirm-dialog.component';
6 | import { MatBottomSheet } from '@angular/material/bottom-sheet';
7 | import { CancelConfirmBottomsheetComponent } from '../cancel-confirm-bottomsheet/cancel-confirm-bottomsheet.component';
8 | import { SuperheroDataService } from 'src/app/app-http-calls/superhero-data.service';
9 |
10 | @Component({
11 | selector: 'app-create-superhero',
12 | templateUrl: './create-superhero.component.html',
13 | styleUrls: ['./create-superhero.component.css']
14 | })
15 | export class CreateSuperheroComponent implements OnInit {
16 |
17 | superhero: Superhero;
18 |
19 | constructor(private dialog: MatDialog,
20 | private bottomSheet: MatBottomSheet,
21 | private dataService: SuperheroDataService
22 | ) {
23 | this.superhero = new Superhero();
24 | }
25 |
26 | get model(){
27 | return JSON.stringify(this.superhero);
28 | }
29 |
30 | ngOnInit() {
31 | }
32 |
33 | add(event){
34 | this.superhero.favFood.push(event.value);
35 | }
36 |
37 | removeHandler(item: string){
38 | this.superhero.favFood.splice(this.superhero.favFood.indexOf(item), 1);
39 | }
40 |
41 | cancelCreate(){
42 | let ref: MatDialogRef
43 | = this.dialog.open(CancelConfirmDialogComponent, {
44 | width: "800px",
45 | height: "200px",
46 | data: {
47 | message: "Create Superhero action attempted to be cancelled"
48 | },
49 | hasBackdrop: true
50 | });
51 |
52 | // let ref: MatDialogRef
53 | // = this.dialog.open(CancelConfirmDialogComponent,
54 | // { data:
55 | // {
56 | // message: "Create Superhero action attempted to be cancelled"
57 | // }
58 | // });
59 | // ref.afterClosed().subscribe( (data) => {
60 | // if(data.clicked === "Ok"){
61 | // // Reset form here
62 | // }else if(data.clicked === "Cancel"){
63 | // // Do nothing. Cancel any events that navigate away from the component.
64 | // }
65 | // });
66 |
67 | // let ref = this.bottomSheet.open(CancelConfirmBottomsheetComponent,
68 | // {
69 | // data: {
70 | // message: "Create Superhero action attempted to be cancelled"
71 | // }
72 | // });
73 |
74 | // ref.afterDismissed().subscribe(
75 | // data => console.log("user selected to ", data.clicked)
76 | // )
77 |
78 | }
79 |
80 | // let hero = this.superhero;
81 | // this.dataService
82 | // .updateHero (hero, "0.9247175939551284")
83 | // .subscribe(data => console.log(data));
84 | // }
85 |
86 | }
87 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/error-page/error-page.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/app/superheroes-material-design/error-page/error-page.component.css
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/error-page/error-page.component.html:
--------------------------------------------------------------------------------
1 | Attempted route does not exist
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/error-page/error-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ErrorPageComponent } from './error-page.component';
4 |
5 | describe('ErrorPageComponent', () => {
6 | let component: ErrorPageComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ ErrorPageComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ErrorPageComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/error-page/error-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-error-page',
5 | templateUrl: './error-page.component.html',
6 | styleUrls: ['./error-page.component.css']
7 | })
8 | export class ErrorPageComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/home/home.component.css:
--------------------------------------------------------------------------------
1 | .hero{
2 | padding: 10px 10px 10px 10px;
3 | width: 400px;
4 | }
5 |
6 | .specialInput[type="checkbox"] {
7 | width: 20px;
8 | height: 20px;
9 | vertical-align: middle;
10 | }
11 |
12 | div{
13 | padding-top: 5px;
14 | padding-bottom: 5px;
15 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/home/home.component.html:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 |
21 |
26 |
27 |
28 | Bold
29 |
30 |
31 | Italic
32 |
33 |
34 | Strike-through
35 |
36 |
37 |
Chhotta Bheem
38 |
Loves laddu. Grows strong everyday
39 |
40 |
41 | Provide a birth place:
42 |
43 |
44 |
45 | Earthling
46 | Alien
47 | Alien
48 | Earthling
49 | Earthling
50 | Provide a known birthplace
51 |
52 |
53 |
54 |
57 |
58 |
59 | Show contact details
60 |
61 |
62 |
63 |
64 | Contact Details
65 | Email: ChhottaBheem@angularsample.com
66 | Meet him in Dholakpur Villege in India.
67 |
68 |
69 |
70 |
71 | *Contact information is hidden.
72 |
73 |
74 |
75 | {{i+1}}. {{hero}}
76 | (first)
77 | (last)
78 | (even)
79 | (odd)
80 |
81 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ HomeComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(HomeComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { promise } from 'protractor';
3 | import { Observable } from 'rxjs';
4 |
5 | @Component({
6 | selector: 'app-home',
7 | templateUrl: './home.component.html',
8 | styleUrls: ['./home.component.css']
9 | })
10 | export class HomeComponent implements OnInit {
11 |
12 | isItalic = false;
13 | isBold = false;
14 | isStrikeThrough = false;
15 |
16 | superheroes =[
17 | "Spiderman",
18 | "Chhota Bheem",
19 | "Superman",
20 | "Batman"
21 | ];
22 |
23 | get titleStyle(){
24 | return {
25 | 'text-decoration': this.isStrikeThrough ? 'line-through' : 'none',
26 | 'font-weight': this.isBold ? 'bold': 'normal',
27 | 'font-style': this.isItalic ? 'italic': 'normal',
28 | 'font-size': '24px'
29 | };
30 | }
31 |
32 |
33 | constructor() {
34 | let promiseRef: Promise = this.promiseSample(false);
35 | promiseRef.then(
36 | (result) => {
37 | console.log(result);
38 | // throw new Error("error in success handler");
39 | },
40 | (error) => {
41 | console.log("error handler", error)
42 | // throw new Error("error in failure handler");
43 | })
44 | .catch((error) => console.log("catch", error));
45 |
46 | let observableRef: Observable = this.observableSample(true);
47 | observableRef.subscribe(
48 | (result) => console.log(result),
49 | (error) => console.log(error),
50 | () => console.log("complete")
51 | );
52 | }
53 |
54 | ngOnChanges(){ }
55 |
56 | promiseSample(input){
57 | return new Promise( (resolve, reject) => {
58 | if(input){
59 | resolve("job well done");
60 | }else{
61 | //throw new Error("exception thrown")
62 | reject("job failed");
63 | }
64 | })
65 | }
66 |
67 | observableSample(input): Observable{
68 | return new Observable((observer) => {
69 | let values = ["value1", "value2", "value3", "value4"];
70 | if(input){
71 | values.map( value => observer.next(value));
72 | }else{
73 | observer.error("error");
74 | }
75 |
76 | observer.complete();
77 | });
78 | }
79 |
80 | ngOnInit() { }
81 |
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/models/superhero.ts:
--------------------------------------------------------------------------------
1 | export class Superhero {
2 | name: string;
3 | email: string;
4 | details: string;
5 | country: string;
6 | specialPowers: Array = [];
7 | favFood: Array = [];
8 | cardImage: string;
9 | isExpanded?: boolean;
10 | }
11 |
12 | export class Superhero2 extends Superhero{
13 | id: number;
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/software-agreement/software-agreement.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/app/superheroes-material-design/software-agreement/software-agreement.component.css
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/software-agreement/software-agreement.component.html:
--------------------------------------------------------------------------------
1 | Usage Agreement
2 |
3 |
4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
5 |
6 | Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
7 |
8 |
9 |
10 |
11 | "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
12 |
13 |
14 |
15 | 1914 translation by H. Rackham
16 |
17 |
18 |
19 | "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
20 |
21 |
22 |
23 | Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
24 |
25 |
26 |
27 | "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
28 |
29 |
30 |
31 | Contract signed by
32 |
34 | Provide your full name for the contract
35 |
36 |
37 |
38 |
39 |
40 |
41 | Agree
42 | Cancel
43 |
44 |
45 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/software-agreement/software-agreement.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SoftwareAgreementComponent } from './software-agreement.component';
4 |
5 | describe('SoftwareAgreementComponent', () => {
6 | let component: SoftwareAgreementComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SoftwareAgreementComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SoftwareAgreementComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/software-agreement/software-agreement.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { MatDialogRef } from '@angular/material/dialog';
3 |
4 | @Component({
5 | selector: 'app-software-agreement',
6 | templateUrl: './software-agreement.component.html',
7 | styleUrls: ['./software-agreement.component.css']
8 | })
9 | export class SoftwareAgreementComponent implements OnInit {
10 | fullname: string;
11 |
12 | constructor(public dialogRef: MatDialogRef) {
13 | }
14 |
15 | ngOnInit() {
16 | }
17 |
18 | onAgree(){
19 | this.dialogRef.close({
20 | clicked: "agree",
21 | fullname: this.fullname
22 | });
23 | }
24 |
25 | onCancel(){
26 | this.dialogRef.close({
27 | clicked: "cancel"
28 | })
29 | }
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-grid-list/superhero-grid-list.component.css:
--------------------------------------------------------------------------------
1 | mat-grid-tile{
2 | margin: 1px 1px 1px 1px;
3 | background-color: lightblue;
4 | }
5 |
6 | app-superhero-profile{
7 | width: 80%;
8 | }
9 |
10 | .grid-list{
11 | margin: -10px -55px -10px -55px;
12 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-grid-list/superhero-grid-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-grid-list/superhero-grid-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroGridListComponent } from './superhero-grid-list.component';
4 |
5 | describe('SuperheroGridListComponent', () => {
6 | let component: SuperheroGridListComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroGridListComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroGridListComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-grid-list/superhero-grid-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Superhero } from '../models/superhero';
3 | import { SuperheroDataService } from 'src/app/app-http-calls/superhero-data.service';
4 | import { Observable } from 'rxjs';
5 |
6 | @Component({
7 | selector: 'app-superhero-grid-list',
8 | templateUrl: './superhero-grid-list.component.html',
9 | styleUrls: ['./superhero-grid-list.component.css'],
10 | providers: [SuperheroDataService]
11 | })
12 | export class SuperheroGridListComponent implements OnInit {
13 |
14 | private heroes: Array;
15 |
16 | constructor(private heroService: SuperheroDataService) { }
17 |
18 | ngOnInit() {
19 | //this.heroService.getHeroes().then( data => this.heroes = data);
20 | this.heroService
21 | .getHeroes()
22 | .subscribe(
23 | data => this.heroes = data,
24 | error => console.log("Error returned", error)
25 | );
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-list/superhero-list.component.css:
--------------------------------------------------------------------------------
1 | mat-card{
2 | margin-left: 5px;
3 | margin-top: 5px;
4 | margin-bottom: 10px;
5 | width: 50%;
6 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-list/superhero-list.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-list/superhero-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroListComponent } from './superhero-list.component';
4 |
5 | describe('SuperheroListComponent', () => {
6 | let component: SuperheroListComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroListComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroListComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-list/superhero-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import * as _ from 'lodash';
4 |
5 | @Component({
6 | selector: 'app-superhero-list',
7 | templateUrl: './superhero-list.component.html',
8 | styleUrls: ['./superhero-list.component.css']
9 | })
10 | export class SuperheroListComponent implements OnInit {
11 |
12 | heroes = [
13 | {
14 | name: "Chhota Bheem",
15 | livesIn: "Dholakpur",
16 | power: "Strong"
17 | },
18 | {
19 | name: "Spiderman",
20 | livesIn: "New York",
21 | power: "Shoot web"
22 | },
23 | {
24 | name: "Batman",
25 | livesIn: "Gotham",
26 | power: "Technology"
27 | }
28 | ];
29 |
30 | constructor(private route: ActivatedRoute,
31 | private router: Router) { }
32 |
33 | navigateToHeroDetails(heroName: string){
34 | this.router.navigate(["/hero", heroName]);
35 | }
36 |
37 | ngOnInit() {
38 |
39 | // let sortOrder = this.route.snapshot.queryParams.sortOrder;
40 |
41 | // if(sortOrder && sortOrder === "descending"){
42 | // this.heroes= _.sortBy(this.heroes, 'name').reverse()
43 | // }else{
44 | // this.heroes= _.sortBy(this.heroes, 'name');
45 |
46 | // }
47 |
48 | this.route
49 | .queryParams
50 | .subscribe( (p) => {
51 | if(p.sortOrder && p.sortOrder === "descending"){
52 | this.heroes= _.sortBy(this.heroes, 'name').reverse()
53 | }else{
54 | this.heroes= _.sortBy(this.heroes, 'name');
55 | }
56 | });
57 | }
58 |
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-new-list/superhero-new-list.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/app/superheroes-material-design/superhero-new-list/superhero-new-list.component.css
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-new-list/superhero-new-list.component.html:
--------------------------------------------------------------------------------
1 |
11 |
12 |
22 |
23 |
24 |
25 |
26 | {{hero.name}}
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-new-list/superhero-new-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroNewListComponent } from './superhero-new-list.component';
4 |
5 | describe('SuperheroNewListComponent', () => {
6 | let component: SuperheroNewListComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroNewListComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroNewListComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-new-list/superhero-new-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { Superhero } from '../models/superhero';
3 | import { SelectionModel } from '@angular/cdk/collections';
4 | import { MatListOption, MatSelectionListChange } from '@angular/material/list';
5 | import { MatBottomSheet } from '@angular/material/bottom-sheet';
6 | import { ActionsBottomsheetComponent } from '../actions-bottomsheet/actions-bottomsheet.component';
7 | import { SuperheroDataService } from 'src/app/data-services/superhero-data.service';
8 |
9 | @Component({
10 | selector: 'app-superhero-new-list',
11 | templateUrl: './superhero-new-list.component.html',
12 | styleUrls: ['./superhero-new-list.component.css'],
13 | providers: [SuperheroDataService]
14 | })
15 | export class SuperheroNewListComponent implements OnInit {
16 |
17 | @ViewChild("selected") selected: any;
18 |
19 | private heroes: Array;
20 |
21 | listItemSelected(data){
22 | this.bottomsheet.open(ActionsBottomsheetComponent);
23 | //console.log(data);
24 | }
25 |
26 | selectionChangeHandler(event: MatSelectionListChange){
27 | console.log(event.option.value, event.option.selected);
28 | }
29 |
30 | constructor(private bottomsheet: MatBottomSheet,
31 | private heroData: SuperheroDataService) { }
32 |
33 | ngOnInit() {
34 | this.heroData
35 | .getSuperheroes()
36 | .subscribe( data => this.heroes = data);
37 |
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile-footer/superhero-profile-footer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/app/superheroes-material-design/superhero-profile-footer/superhero-profile-footer.component.css
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile-footer/superhero-profile-footer.component.html:
--------------------------------------------------------------------------------
1 |
2 | A superhero, made in Hollywood!
3 |
4 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile-footer/superhero-profile-footer.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroProfileFooterComponent } from './superhero-profile-footer.component';
4 |
5 | describe('SuperheroProfileFooterComponent', () => {
6 | let component: SuperheroProfileFooterComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroProfileFooterComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroProfileFooterComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile-footer/superhero-profile-footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import SuperheroText from '../utilities/superhero-text';
3 |
4 | @Component({
5 | selector: 'superhero-profile-footer',
6 | templateUrl: './superhero-profile-footer.component.html',
7 | styleUrls: ['./superhero-profile-footer.component.css']
8 | })
9 | export class SuperheroProfileFooterComponent implements OnInit {
10 |
11 | constructor(private superheroText: SuperheroText) { }
12 |
13 | ngOnInit() {
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile/superhero-profile.component.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | mat-card-footer{
4 | font-style: italic;
5 | }
6 |
7 | .example-header-image {
8 | background-image: url('/assets/spiderman.jpg');
9 | background-size: cover;
10 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile/superhero-profile.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{name}}
7 | A superhero, who lives in {{livesIn}}.
8 |
9 |
10 |
11 | Appeared in the year {{firstAppearance}}
12 | Lives in {{livesIn}}
13 |
14 | {{power}}
15 |
16 |
17 | Meet the superhero at
18 |
19 | {{address.firstLine}}
20 |
21 |
22 | {{address.city}}
23 |
24 |
25 |
26 |
27 | Delete
28 |
29 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile/superhero-profile.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroProfileComponent } from './superhero-profile.component';
4 |
5 | describe('SuperheroProfileComponent', () => {
6 | let component: SuperheroProfileComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroProfileComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroProfileComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile/superhero-profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, OnChanges, SimpleChanges, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
2 | import HitCounter from "../utilities/hit-counter"
3 | import SuperheroText from '../utilities/superhero-text';
4 |
5 | import superheroes, {getSuperheroCreators as customName, getSuperheroLocation} from './superhero'
6 | import { SuperheroDataService } from 'src/app/app-http-calls/superhero-data.service';
7 |
8 | export type Superhero = {
9 | name: string;
10 | firstAppearance: number;
11 | livesIn: string;
12 |
13 | }
14 |
15 | @Component({
16 | selector: 'app-superhero-profile',
17 | templateUrl: './superhero-profile.component.html',
18 | styleUrls: ['./superhero-profile.component.css'],
19 | providers:[ HitCounter ],
20 | viewProviders:[ SuperheroText ],
21 | changeDetection: ChangeDetectionStrategy.OnPush
22 | })
23 | export class SuperheroProfileComponent implements OnInit, OnChanges {
24 |
25 | @Input() name: string;
26 | @Input("lives-in") livesIn: string;
27 | @Input() superpowers: Array = [];
28 | @Input() address: {
29 | firstLine: string,
30 | city: string
31 | };
32 |
33 | @Input() showCardImage: boolean = true;
34 |
35 | @Input("card-image") cardImage: string;
36 |
37 | @Output() flyWithSuperhero = new EventEmitter();
38 |
39 | // create a private field
40 | private _firstAppearance: number;
41 |
42 | // use a public setter
43 | @Input()
44 | set firstAppearance(val: number){
45 | if(val > 1950){
46 | this._firstAppearance = val;
47 | }else{
48 | console.error("Superhero is too old");
49 | }
50 | }
51 |
52 | get image(){
53 | return `/assets/${this.cardImage}`;
54 | }
55 | returnSuperheroData(){
56 | let hero = {
57 | name: this.name,
58 | livesIn: this.livesIn,
59 | firstAppearance: this._firstAppearance
60 | };
61 | this.flyWithSuperhero.emit(hero);
62 | }
63 |
64 | // getter for the use of template.
65 | get firstAppearance(){
66 | return this._firstAppearance;
67 | }
68 |
69 | ngOnChanges(changes: SimpleChanges){
70 | // console.log(changes);
71 | }
72 |
73 |
74 | constructor(private hitCounter: HitCounter, private dataService: SuperheroDataService) {
75 | this.hitCounter.counter;
76 | }
77 |
78 |
79 | deleteHero(){
80 | this.dataService.deleteHero("001").subscribe((data) => console.log(data));
81 | }
82 |
83 | ngOnInit() {
84 |
85 | }
86 |
87 | }
88 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-profile/superhero.ts:
--------------------------------------------------------------------------------
1 | const superheroes = [
2 | {
3 | name: "batman",
4 | creators: ["Bob Kane", "Bill Finger"],
5 | firstAppearance: "Year 1939",
6 | livesIn: "Gotham City",
7 |
8 | },
9 | {
10 | name: "Chhota Bheem",
11 | creators: [
12 | "Raj Viswanadha",
13 | "Arun Shendurnikar",
14 | "Nidhi Anand"],
15 | firstAppearance: "Year 2008",
16 | livesIn: "India",
17 | },
18 |
19 | ];
20 |
21 | export default superheroes;
22 |
23 | function filterSuperhero(name: string): any{
24 | return superheroes.find( x => x.name === name);
25 | }
26 |
27 | export function getSuperheroLocation(name: string): string{
28 | return filterSuperhero(name).livesIn;
29 | }
30 |
31 | function getSuperheroCreators(name: string): Array{
32 | return filterSuperhero(name).creators;
33 | }
34 |
35 | export {getSuperheroCreators};
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-container/superhero-sidenav-container.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/app/superheroes-material-design/superhero-sidenav-container/superhero-sidenav-container.component.css
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-container/superhero-sidenav-container.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-container/superhero-sidenav-container.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroSidenavContainerComponent } from './superhero-sidenav-container.component';
4 |
5 | describe('SuperheroSidenavContainerComponent', () => {
6 | let component: SuperheroSidenavContainerComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroSidenavContainerComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroSidenavContainerComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-container/superhero-sidenav-container.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-superhero-sidenav-container',
5 | templateUrl: './superhero-sidenav-container.component.html',
6 | styleUrls: ['./superhero-sidenav-container.component.css']
7 | })
8 | export class SuperheroSidenavContainerComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-content/superhero-sidenav-content.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/app/superheroes-material-design/superhero-sidenav-content/superhero-sidenav-content.component.css
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-content/superhero-sidenav-content.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-content/superhero-sidenav-content.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroSidenavContentComponent } from './superhero-sidenav-content.component';
4 |
5 | describe('SuperheroSidenavContentComponent', () => {
6 | let component: SuperheroSidenavContentComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroSidenavContentComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroSidenavContentComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav-content/superhero-sidenav-content.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-superhero-sidenav-content',
5 | templateUrl: './superhero-sidenav-content.component.html',
6 | styleUrls: ['./superhero-sidenav-content.component.css']
7 | })
8 | export class SuperheroSidenavContentComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav/superhero-sidenav.component.css:
--------------------------------------------------------------------------------
1 | div{
2 | padding: 10px 20px 10px 5px;
3 | }
4 |
5 | .container{
6 | padding: 40px;
7 | }
8 |
9 | a:link{
10 | font-weight: bold;
11 | text-decoration: none;
12 | color: black;
13 | font-size: 14;
14 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav/superhero-sidenav.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
12 |
13 |
18 |
19 |
24 |
25 |
30 |
31 |
36 |
37 |
42 |
43 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav/superhero-sidenav.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroSidenavComponent } from './superhero-sidenav.component';
4 |
5 | describe('SuperheroSidenavComponent', () => {
6 | let component: SuperheroSidenavComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroSidenavComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroSidenavComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-sidenav/superhero-sidenav.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, ViewChild } from '@angular/core';
2 | import { MatSidenav } from '@angular/material/sidenav';
3 |
4 | @Component({
5 | selector: 'app-superhero-sidenav',
6 | templateUrl: './superhero-sidenav.component.html',
7 | styleUrls: ['./superhero-sidenav.component.css']
8 | })
9 | export class SuperheroSidenavComponent implements OnInit {
10 |
11 | @ViewChild("sidenav") sidenav: MatSidenav;
12 | @Input("position") position: string="start";
13 |
14 | constructor() { }
15 |
16 | open(){
17 | this.sidenav.open();
18 | }
19 |
20 | close(){
21 | this.sidenav.close();
22 | }
23 |
24 | ngOnInit() {
25 |
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-toolbar/superhero-toolbar.component.css:
--------------------------------------------------------------------------------
1 | .central-stretchable-space{
2 | flex: 1 1 auto;
3 | }
4 |
5 | .action{
6 | margin: 1px 5px 1px 5px;
7 | }
8 |
9 | .menu {
10 | margin: 0px 10px 0px 5px;
11 | font-size: 20pt;
12 | }
13 |
14 | .icon-padding{
15 | padding-top: 10px;
16 | }
17 |
18 | mat-icon{
19 | cursor: default;
20 | }
21 |
22 |
23 | .toggle-span{
24 | padding-left: 10px;
25 | width: 100px;
26 | font-size: 9pt;
27 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-toolbar/superhero-toolbar.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Superheroes
7 |
8 |
9 |
10 |
11 | {{toggleMessage}}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | User Agreement
22 | - {{fullname}}
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-toolbar/superhero-toolbar.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroToolbarComponent } from './superhero-toolbar.component';
4 |
5 | describe('SuperheroToolbarComponent', () => {
6 | let component: SuperheroToolbarComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroToolbarComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroToolbarComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero-toolbar/superhero-toolbar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
2 | import { MatDialogRef, MatDialog } from '@angular/material/dialog';
3 | import { SoftwareAgreementComponent } from '../software-agreement/software-agreement.component';
4 | import { MatSlideToggleChange } from '@angular/material/slide-toggle';
5 |
6 | @Component({
7 | selector: 'app-superhero-toolbar',
8 | templateUrl: './superhero-toolbar.component.html',
9 | styleUrls: ['./superhero-toolbar.component.css']
10 | })
11 | export class SuperheroToolbarComponent implements OnInit {
12 |
13 | @Input() showSecondRow = false;
14 | @Output() menuClick: EventEmitter = new EventEmitter();
15 | @Output() switchToTabs: EventEmitter = new EventEmitter();
16 | toggleMessage: string = "Click to Use Tabs";
17 | isTabs: boolean = false;
18 |
19 | toggleValue: boolean=true;
20 | fullname: string;
21 |
22 | toggleForMenuClick(){
23 | this.menuClick.emit(this.toggleValue);
24 | this.toggleValue = !this.toggleValue;
25 | }
26 |
27 | toggleSidenav(event: MatSlideToggleChange){
28 | this.switchToTabs.emit(event.checked);
29 | if(event.checked){
30 | this.isTabs = true;
31 | this.toggleMessage = "Click to Use Sidenav";
32 | }else{
33 | this.isTabs = false;
34 | this.toggleMessage = "Click to Use Tabs";
35 | }
36 |
37 | }
38 |
39 | constructor(public dialog: MatDialog) { }
40 |
41 | ngOnInit() {
42 | }
43 |
44 | agreementClick(){
45 |
46 | let dialogRef = this.dialog
47 | .open(SoftwareAgreementComponent,
48 | {
49 | width: "800px"
50 | });
51 |
52 | dialogRef.afterClosed()
53 | .subscribe(
54 | (data) => this.fullname = data.fullname
55 | );
56 |
57 | }
58 |
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero/superhero.component.css:
--------------------------------------------------------------------------------
1 | .profile{
2 | padding: 10px 35px 35px 30px;
3 | margin: 10px 35px 35px 30px;
4 | width: 35%;
5 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero/superhero.component.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero/superhero.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroComponent } from './superhero.component';
4 |
5 | describe('SuperheroComponent', () => {
6 | let component: SuperheroComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superhero/superhero.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy, } from '@angular/core';
2 | import { ActivatedRoute, ParamMap } from '@angular/router';
3 | import { Superhero } from '../models/superhero';
4 | import { switchMap} from 'rxjs/operators';
5 |
6 | @Component({
7 | selector: 'app-superhero',
8 | templateUrl: './superhero.component.html',
9 | styleUrls: ['./superhero.component.css']
10 | })
11 | export class SuperheroComponent implements OnInit, OnDestroy {
12 |
13 | hero: Superhero;
14 | private heroes: Array = [
15 | {
16 | name: "Chhotta Bheem",
17 | email: "ChhottaBheem@angularsample.com",
18 | details: "A hero in Dholakpur village",
19 | country: "India",
20 | cardImage: "spiderman.jpg",
21 | specialPowers: ["Strong"],
22 | favFood: ["Laddu"]
23 | },
24 | {
25 | name: "Spiderman",
26 | email: "spiderman@angularsample.com",
27 | details: "A hero in New York city",
28 | country: "United States",
29 | specialPowers: ["Shoots web"],
30 | cardImage: "spiderman.jpg",
31 | favFood: ["Cheese burger"]
32 | },
33 | {
34 | name: "Batman",
35 | email: "batman@angularsample.com",
36 | details: "A hero in Gotham city",
37 | country: "United Kingdom",
38 | cardImage: "spiderman.jpg",
39 | specialPowers: ["Martial Arts"],
40 | favFood: ["Spaghetti"]
41 | }
42 | ];
43 |
44 | get heroProp(){
45 | return JSON.stringify(this.hero);
46 | }
47 |
48 | constructor(private route: ActivatedRoute) {
49 |
50 | }
51 |
52 | ngOnInit() {
53 | function sumOfTwoNumbersInArray(a: [number, number]) { // parameter declared as a tuple
54 | return a[0] + a[1];
55 | }
56 |
57 | console.log("works " , sumOfTwoNumbersInArray(((): [number, number] => ([2,2]))())); // no error.
58 |
59 | let foo: [number, number] = [1, 2]; // variable explicitely defined as a tuple
60 | console.log("works " , sumOfTwoNumbersInArray(foo)); // no error.
61 | // sumOfTwoNumbersInArray(foo); // Error
62 | console.log("ngOnInit Called");
63 |
64 | // Using Snpashot
65 | // let heroNameParam = this.route.snapshot.params.heroName;
66 | // this.hero = this.heroes.find( i => i.name.toLowerCase() === heroNameParam.toLowerCase());
67 |
68 |
69 |
70 | // Using Observable
71 | let heroNameParam: string;
72 | this.route
73 | .params
74 | .subscribe ( r => {
75 | this.hero = this.heroes.find( i => i.name.toLowerCase() === r.heroName.toLowerCase());
76 | });
77 |
78 | }
79 |
80 | ngOnDestroy(){
81 | console.log("ngOnDestory called");
82 | }
83 |
84 |
85 |
86 | }
87 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superheroes-expandable-list/superheroes-expandable-list.component.css:
--------------------------------------------------------------------------------
1 | mat-expansion-panel{
2 | width: 60%;
3 | }
4 |
5 | mat-panel-title{
6 | width:80px
7 | }
8 |
9 | button{
10 | margin : auto 5px auto 5px;
11 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superheroes-expandable-list/superheroes-expandable-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{hero.name}}
6 |
7 |
8 | {{hero.details}}
9 |
10 |
11 | Lives in {{hero.country}}
12 |
13 | Superhero
14 |
15 | {{power}}
16 |
17 |
18 |
19 |
20 | Likes to eat
21 |
22 | {{food}}
23 |
24 |
25 |
26 | Fly
27 | Shoot lazers
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superheroes-expandable-list/superheroes-expandable-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SuperheroesExpandableListComponent } from './superheroes-expandable-list.component';
4 |
5 | describe('SuperheroesExpandableListComponent', () => {
6 | let component: SuperheroesExpandableListComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SuperheroesExpandableListComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SuperheroesExpandableListComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superheroes-expandable-list/superheroes-expandable-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Superhero } from '../models/superhero';
3 |
4 | @Component({
5 | selector: 'app-superheroes-expandable-list',
6 | templateUrl: './superheroes-expandable-list.component.html',
7 | styleUrls: ['./superheroes-expandable-list.component.css']
8 | })
9 | export class SuperheroesExpandableListComponent implements OnInit {
10 |
11 | private heroes: Array = [
12 | {
13 | name: "Chhotta Bheem",
14 | email: "ChhottaBheem@angularsample.com",
15 | details: "A hero in Dholakpur village",
16 | country: "India",
17 | cardImage: "spiderman.jpg",
18 | specialPowers: ["is strong"],
19 | favFood: ["Laddu"],
20 | isExpanded: true,
21 | },
22 | {
23 | name: "Spiderman",
24 | email: "spiderman@angularsample.com",
25 | details: "A hero in New York city",
26 | country: "United States",
27 | specialPowers: ["shoots web"],
28 | cardImage: "spiderman.jpg",
29 | favFood: ["Cheese burger"],
30 | isExpanded: false,
31 | },
32 | {
33 | name: "Batman",
34 | email: "batman@angularsample.com",
35 | details: "A hero in Gotham city",
36 | country: "United Kingdom",
37 | cardImage: "spiderman.jpg",
38 | specialPowers: ["is good at martial arts"],
39 | favFood: ["Spaghetti"],
40 | isExpanded: true,
41 |
42 | }
43 | ];
44 |
45 | constructor() { }
46 |
47 | ngOnInit() {
48 | }
49 |
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/superheroes-material-design.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { MatToolbarModule } from '@angular/material/toolbar';
4 | import { MatCardModule } from '@angular/material/card';
5 | import { MatFormFieldModule } from '@angular/material/form-field'
6 | import { MatInputModule } from '@angular/material/input';
7 | import { MatSelectModule } from '@angular/material/select';
8 | import { MatChipsModule } from '@angular/material/chips';
9 | import { MatIconModule } from '@angular/material/icon';
10 | import { MatButtonModule } from '@angular/material/button';
11 | import { MatCheckboxModule } from '@angular/material/checkbox';
12 | import { MatDatepickerModule } from '@angular/material/datepicker';
13 | import { MatSliderModule } from '@angular/material/slider';
14 | import { MatMomentDateModule } from '@angular/material-moment-adapter'
15 | import { MatSlideToggleModule } from '@angular/material/slide-toggle'
16 | import { MatSidenavModule, MatSidenavContainer } from '@angular/material/sidenav';
17 | import { MatTabsModule } from '@angular/material/tabs';
18 | import { MatExpansionModule } from '@angular/material/expansion';
19 | import { MatListModule } from '@angular/material/list';
20 | import { MatGridListModule } from '@angular/material/grid-list';
21 | // import { MatNativeDateModule } from '@angular/material/core';
22 | import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
23 | import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS } from '@angular/material/bottom-sheet';
24 |
25 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
26 |
27 | import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
28 | import { SuperheroProfileComponent } from './superhero-profile/superhero-profile.component';
29 | import { SuperheroToolbarComponent } from './superhero-toolbar/superhero-toolbar.component';
30 | import HitCounter from './utilities/hit-counter';
31 | import { SuperheroProfileFooterComponent } from './superhero-profile-footer/superhero-profile-footer.component';
32 | import { SuperheroListComponent } from './superhero-list/superhero-list.component';
33 | import { CreateSuperheroComponent } from './create-superhero/create-superhero.component';
34 | import { CreateSuperheroReactiveFormComponent } from './create-superhero-reactive-form/create-superhero-reactive-form.component';
35 | import { SuperheroComponent } from './superhero/superhero.component';
36 | import { AppRoutingModule } from '../app-routing.module';
37 | import { ErrorPageComponent } from './error-page/error-page.component';
38 | import { SuperheroSidenavComponent } from './superhero-sidenav/superhero-sidenav.component';
39 | import { SuperheroSidenavContainerComponent } from './superhero-sidenav-container/superhero-sidenav-container.component';
40 | import { SuperheroSidenavContentComponent } from './superhero-sidenav-content/superhero-sidenav-content.component';
41 | import { TabSampleComponent } from './tab-sample/tab-sample.component';
42 | import { SuperheroesExpandableListComponent } from './superheroes-expandable-list/superheroes-expandable-list.component';
43 | import { SuperheroNewListComponent } from './superhero-new-list/superhero-new-list.component';
44 | import { SuperheroGridListComponent } from './superhero-grid-list/superhero-grid-list.component';
45 | import { CancelConfirmDialogComponent } from './cancel-confirm-dialog/cancel-confirm-dialog.component';
46 | import { SoftwareAgreementComponent } from './software-agreement/software-agreement.component';
47 | import { CancelConfirmBottomsheetComponent } from './cancel-confirm-bottomsheet/cancel-confirm-bottomsheet.component';
48 | import { ActionsBottomsheetComponent } from './actions-bottomsheet/actions-bottomsheet.component';
49 | import { HomeComponent } from './home/home.component';
50 | import { SuperheroDataService } from '../data-services/superhero-data.service';
51 |
52 | @NgModule({
53 | declarations: [
54 | SuperheroProfileComponent,
55 | SuperheroToolbarComponent,
56 | SuperheroProfileFooterComponent,
57 | SuperheroListComponent,
58 | CreateSuperheroComponent,
59 | CreateSuperheroReactiveFormComponent,
60 | SuperheroComponent,
61 | ErrorPageComponent,
62 | SuperheroSidenavComponent,
63 | SuperheroSidenavContainerComponent,
64 | SuperheroSidenavContentComponent,
65 | TabSampleComponent,
66 | SuperheroesExpandableListComponent,
67 | SuperheroNewListComponent,
68 | SuperheroGridListComponent,
69 | CancelConfirmDialogComponent,
70 | SoftwareAgreementComponent,
71 | CancelConfirmBottomsheetComponent,
72 | ActionsBottomsheetComponent,
73 | HomeComponent,
74 | ],
75 | imports: [
76 | AppRoutingModule,
77 | // NoopAnimationsModule,
78 | BrowserAnimationsModule,
79 | MatSelectModule,
80 | MatInputModule,
81 | MatCardModule,
82 | MatToolbarModule,
83 | MatFormFieldModule,
84 | MatChipsModule,
85 | MatIconModule,
86 | MatButtonModule,
87 | MatCheckboxModule,
88 | MatSliderModule,
89 | MatSlideToggleModule,
90 | MatDatepickerModule,
91 | //MatNativeDateModule,
92 | MatMomentDateModule,
93 | FormsModule,
94 | MatSidenavModule,
95 | MatTabsModule,
96 | MatExpansionModule,
97 | MatListModule,
98 | MatGridListModule,
99 | MatDialogModule,
100 | MatBottomSheetModule,
101 | ReactiveFormsModule
102 | ],
103 | exports: [
104 | SuperheroProfileComponent,
105 | SuperheroToolbarComponent,
106 | SuperheroProfileFooterComponent,
107 | SuperheroSidenavComponent,
108 | CreateSuperheroComponent,
109 | CreateSuperheroReactiveFormComponent,
110 | SuperheroSidenavContainerComponent,
111 | SuperheroSidenavContentComponent,
112 | SuperheroesExpandableListComponent,
113 | SuperheroNewListComponent,
114 | TabSampleComponent,
115 | SuperheroGridListComponent
116 | ],
117 | providers:[HitCounter,
118 | {
119 | provide: MAT_DIALOG_DEFAULT_OPTIONS,
120 | useValue: {
121 | hasBackdrop: true,
122 | disableClose:false
123 | }
124 | },
125 | {
126 | provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,
127 | useValue: {
128 | hasBackdrop: false,
129 | disableClose: true
130 | }
131 | }
132 | ],
133 | entryComponents: [
134 | CancelConfirmDialogComponent,
135 | CancelConfirmBottomsheetComponent,
136 | ActionsBottomsheetComponent,
137 | SoftwareAgreementComponent
138 | ]
139 | })
140 | export class SuperheroesMaterialDesignModule { }
141 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/tab-sample/tab-sample.component.css:
--------------------------------------------------------------------------------
1 | mat-icon{
2 | padding-right: 7px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/tab-sample/tab-sample.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | dns Accordion
6 |
7 |
8 |
9 |
10 |
11 | reorder New List
12 |
13 |
14 |
15 |
16 |
17 | dashboard Grid List
18 |
19 |
20 |
21 |
22 |
23 | check Basic Component Demo
24 |
25 |
26 |
27 |
28 |
29 | list Superheroes
30 |
31 |
32 |
33 |
34 |
35 | create Add Superhero
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/tab-sample/tab-sample.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TabSampleComponent } from './tab-sample.component';
4 |
5 | describe('TabSampleComponent', () => {
6 | let component: TabSampleComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ TabSampleComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(TabSampleComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/tab-sample/tab-sample.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-tab-sample',
5 | templateUrl: './tab-sample.component.html',
6 | styleUrls: ['./tab-sample.component.css']
7 | })
8 | export class TabSampleComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/utilities/hit-counter.ts:
--------------------------------------------------------------------------------
1 | export default class HitCounter{
2 | private _counter: number
3 |
4 | constructor(){
5 | this._counter = 0;
6 | }
7 |
8 | get counter(): number{
9 | return this._counter;
10 | }
11 |
12 | incrementCounter(){
13 | this._counter += 1;
14 | }
15 | }
--------------------------------------------------------------------------------
/src/app/superheroes-material-design/utilities/superhero-text.ts:
--------------------------------------------------------------------------------
1 | export default class SuperheroText{
2 |
3 | private _footerText: string = "A superhero, made in Hollywood";
4 |
5 | get footerText():string{
6 | return this._footerText;
7 | }
8 | }
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/Superhero-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/Superhero-logo.png
--------------------------------------------------------------------------------
/src/assets/Superhero-logo.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/Superhero-logo.xcf
--------------------------------------------------------------------------------
/src/assets/angular-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/angular-image.png
--------------------------------------------------------------------------------
/src/assets/batman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/batman.jpg
--------------------------------------------------------------------------------
/src/assets/batman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/batman.png
--------------------------------------------------------------------------------
/src/assets/bheem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/bheem.png
--------------------------------------------------------------------------------
/src/assets/chhottabheem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/chhottabheem.png
--------------------------------------------------------------------------------
/src/assets/spiderman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/assets/spiderman.jpg
--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | #
5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
6 |
7 | > 0.5%
8 | last 2 versions
9 | Firefox ESR
10 | not dead
11 | not IE 9-11
--------------------------------------------------------------------------------
/src/data/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "heroes": [
3 | {
4 | "name": "Batman",
5 | "email": "batman@angularsample.com",
6 | "details": "A hero in Gotham city",
7 | "livesIn": "United Kingdom",
8 | "cardImage": "batman.jpg",
9 | "firstAppearance": 1950,
10 | "specialPowers": [
11 | "Martial Arts"
12 | ],
13 | "favFood": [
14 | "Spaghetti"
15 | ]
16 | },
17 | {
18 | "name": "Chhotta Bheem",
19 | "email": "ChhottaBheem@angularsample.com",
20 | "details": "A hero in Dholakpur village",
21 | "livesIn": "India",
22 | "firstAppearance": 2008,
23 | "cardImage": "bheem.png",
24 | "specialPowers": [
25 | "Strong"
26 | ],
27 | "favFood": [
28 | "Laddu"
29 | ]
30 | },
31 | {
32 | "name": "Spiderman",
33 | "email": "spiderman@angularsample.com",
34 | "details": "Friendly neighbourhood superhero",
35 | "livesIn": "New York",
36 | "cardImage": "spiderman.jpg",
37 | "firstAppearance": 1950,
38 | "specialPowers": [
39 | "Can Crawn", "Shoot Web", "Fly"
40 | ],
41 | "favFood": [
42 | "Pizza"
43 | ]
44 | },
45 | {
46 | "name": "Antman",
47 | "email": "antman@angularsample.com",
48 | "details": "Being small is a superpower too",
49 | "livesIn": "New York",
50 | "firstAppearance": 1950,
51 | "cardImage": "spiderman.jpg",
52 | "specialPowers": [
53 | "Can get too small"
54 | ],
55 | "favFood": [
56 | "Sugar"
57 | ]
58 | },
59 | {
60 | "name": "Thor",
61 | "email": "thor@angularsample.com",
62 | "details": "God of Thunder",
63 | "livesIn": "Asgard",
64 | "firstAppearance": 2000,
65 | "cardImage": "spiderman.jpg",
66 | "specialPowers": [
67 | "Strong", "Can throw a powerful hammer"
68 | ],
69 | "favFood": [
70 | "Veggie Burger"
71 | ]
72 | },
73 | {
74 | "name": "Wonder Woman",
75 | "email": "ww@angularsample.com",
76 | "details": "Powerful super woman",
77 | "livesIn": "SFO",
78 | "firstAppearance": 1950,
79 | "cardImage": "spiderman.jpg",
80 | "specialPowers": [
81 | "Strong"
82 | ],
83 | "favFood": [
84 |
85 | ]
86 | }
87 | ]
88 | }
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/angular-for-material-design/6f2472998cd1818eb627fb6e777b149a8633ca15/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Superheroes
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import 'hammerjs';
2 | import { enableProdMode } from '@angular/core';
3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4 |
5 | import { AppModule } from './app/app.module';
6 | import { environment } from './environments/environment';
7 |
8 | if (environment.production) {
9 | enableProdMode();
10 | }
11 |
12 | platformBrowserDynamic().bootstrapModule(AppModule)
13 | .catch(err => console.error(err));
14 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /**
38 | * If the application will be indexed by Google Search, the following is required.
39 | * Googlebot uses a renderer based on Chrome 41.
40 | * https://developers.google.com/search/docs/guides/rendering
41 | **/
42 | // import 'core-js/es6/array';
43 |
44 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
45 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
46 |
47 | /** IE10 and IE11 requires the following for the Reflect API. */
48 | // import 'core-js/es6/reflect';
49 |
50 | /**
51 | * Web Animations `@angular/platform-browser/animations`
52 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
53 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
54 | **/
55 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
56 |
57 | /**
58 | * By default, zone.js will patch all possible macroTask and DomEvents
59 | * user can disable parts of macroTask/DomEvents patch by setting following flags
60 | */
61 |
62 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
63 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
64 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
65 |
66 | /*
67 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
68 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
69 | */
70 | // (window as any).__Zone_enable_cross_context_check = true;
71 |
72 | /***************************************************************************************************
73 | * Zone JS is required by default for Angular itself.
74 | */
75 | import 'zone.js/dist/zone'; // Included with Angular CLI.
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | html, body { height: 100%; }
4 |
5 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
6 |
7 | mat-sidenav-container{
8 | height: 100%;
9 | }
10 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "exclude": [
8 | "test.ts",
9 | "**/*.spec.ts"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "module": "es2015",
9 | "moduleResolution": "node",
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "importHelpers": true,
13 | "target": "es5",
14 | "typeRoots": [
15 | "node_modules/@types"
16 | ],
17 | "lib": [
18 | "es2018",
19 | "dom"
20 | ]
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-redundant-jsdoc": true,
69 | "no-shadowed-variable": true,
70 | "no-string-literal": false,
71 | "no-string-throw": true,
72 | "no-switch-case-fall-through": true,
73 | "no-trailing-whitespace": true,
74 | "no-unnecessary-initializer": true,
75 | "no-unused-expression": true,
76 | "no-use-before-declare": true,
77 | "no-var-keyword": true,
78 | "object-literal-sort-keys": false,
79 | "one-line": [
80 | true,
81 | "check-open-brace",
82 | "check-catch",
83 | "check-else",
84 | "check-whitespace"
85 | ],
86 | "prefer-const": true,
87 | "quotemark": [
88 | true,
89 | "single"
90 | ],
91 | "radix": true,
92 | "semicolon": [
93 | true,
94 | "always"
95 | ],
96 | "triple-equals": [
97 | true,
98 | "allow-null-check"
99 | ],
100 | "typedef-whitespace": [
101 | true,
102 | {
103 | "call-signature": "nospace",
104 | "index-signature": "nospace",
105 | "parameter": "nospace",
106 | "property-declaration": "nospace",
107 | "variable-declaration": "nospace"
108 | }
109 | ],
110 | "unified-signatures": true,
111 | "variable-name": false,
112 | "whitespace": [
113 | true,
114 | "check-branch",
115 | "check-decl",
116 | "check-operator",
117 | "check-separator",
118 | "check-type"
119 | ],
120 | "no-output-on-prefix": true,
121 | "use-input-property-decorator": true,
122 | "use-output-property-decorator": true,
123 | "use-host-property-decorator": true,
124 | "no-input-rename": true,
125 | "no-output-rename": true,
126 | "use-life-cycle-interface": true,
127 | "use-pipe-transform-interface": true,
128 | "component-class-suffix": true,
129 | "directive-class-suffix": true
130 | }
131 | }
132 |
--------------------------------------------------------------------------------