├── .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 | ![Cover image](9781484254332.jpg) 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 |
6 | 7 |
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 | 14 | 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 | 10 | 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 |
2 | 3 |
4 | 5 | Add a cape to the hero? 6 | 7 | 10 |
11 |
12 | 13 | 14 | Superhero Name 15 | 16 | Enter name 17 | 18 |
19 | 20 |
21 |
22 | Rate Superhero 23 |
24 |
25 | {{minRating}} 26 | 27 | 28 | 29 | {{maxRating}} 30 |
31 |
32 | 33 |
34 | 35 | Email 36 | 37 | check_circle 38 | How do I contact the superhero for help? 39 | 40 | 41 |
42 | *Email is a required field 43 |
44 | 45 |
46 | *Invalid email. Use YourEMail@DomainName.com 47 |
48 | 49 |
50 | 51 |
52 | 53 | Schedule an appointment with Superhero 54 | 55 | 56 | 57 | 58 | 59 | 60 |
61 | 62 | 63 |
64 | 65 | Powers 66 | 67 | Explain superhero powers 68 | 69 |
70 | 71 |
72 | 73 |
74 | Select Superhero's jurisdiction 75 |
76 |
77 | 78 | {{cities[i].name}} 79 | 80 |
81 | 82 | 87 | 88 | 101 | 102 | 103 |
104 | 105 |
106 | 107 | 108 | Special Powers 109 | 110 | None 111 | fly 112 | wield hammer 113 | grow powerful 114 | 115 | 116 | 117 |
118 | 119 |
120 | 121 | 122 |
123 | 124 |
-------------------------------------------------------------------------------- /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 | 109 | 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 | 42 | 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 | 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 | menu 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 |
3 | 11 | 12 | 13 |
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 | 27 | 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 | --------------------------------------------------------------------------------