├── .gitignore
├── .history
    ├── .gitignore_20220329184020
    └── .gitignore_20220329184022
├── .idea
    └── .idea.angularquizapp.dir
    │   └── .idea
    │       ├── .gitignore
    │       ├── encodings.xml
    │       ├── indexLayout.xml
    │       └── vcs.xml
├── README.md
├── angular.json
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── quiz-api.service.spec.ts
    │   ├── quiz-api.service.ts
    │   └── quiz-app
    │   │   ├── quiz-app.component.css
    │   │   ├── quiz-app.component.html
    │   │   ├── quiz-app.component.spec.ts
    │   │   └── quiz-app.component.ts
    ├── assets
    │   └── .gitkeep
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.history/.gitignore_20220329184020:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/angularquizapp/5bf3fdd54aa0a0f4f363ea9052054f26477ce6a1/.history/.gitignore_20220329184020


--------------------------------------------------------------------------------
/.history/.gitignore_20220329184022:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.idea/.idea.angularquizapp.dir/.idea/.gitignore:
--------------------------------------------------------------------------------
 1 | # Default ignored files
 2 | /shelf/
 3 | /workspace.xml
 4 | # Rider ignored files
 5 | /contentModel.xml
 6 | /projectSettingsUpdater.xml
 7 | /modules.xml
 8 | /.idea.angularquizapp.iml
 9 | # Datasource local storage ignored files
10 | /dataSources/
11 | /dataSources.local.xml
12 | # Editor-based HTTP Client requests
13 | /httpRequests/
14 | 


--------------------------------------------------------------------------------
/.idea/.idea.angularquizapp.dir/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
4 | </project>


--------------------------------------------------------------------------------
/.idea/.idea.angularquizapp.dir/.idea/indexLayout.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="UserContentModel">
4 |     <attachedFolders />
5 |     <explicitIncludes />
6 |     <explicitExcludes />
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/.idea.angularquizapp.dir/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AngularQuizApp
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.5.
 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 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | # angularquizapp
29 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "angular-quiz-app": {
  7 |       "projectType": "application",
  8 |       "schematics": {},
  9 |       "root": "",
 10 |       "sourceRoot": "src",
 11 |       "prefix": "app",
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/angular-quiz-app",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "tsconfig.app.json",
 21 |             "aot": true,
 22 |             "assets": [
 23 |               "src/favicon.ico",
 24 |               "src/assets"
 25 |             ],
 26 |             "styles": [
 27 |               "src/styles.css"
 28 |             ],
 29 |             "scripts": []
 30 |           },
 31 |           "configurations": {
 32 |             "production": {
 33 |               "fileReplacements": [
 34 |                 {
 35 |                   "replace": "src/environments/environment.ts",
 36 |                   "with": "src/environments/environment.prod.ts"
 37 |                 }
 38 |               ],
 39 |               "optimization": true,
 40 |               "outputHashing": "all",
 41 |               "sourceMap": false,
 42 |               "namedChunks": false,
 43 |               "extractLicenses": true,
 44 |               "vendorChunk": false,
 45 |               "buildOptimizer": true,
 46 |               "budgets": [
 47 |                 {
 48 |                   "type": "initial",
 49 |                   "maximumWarning": "2mb",
 50 |                   "maximumError": "5mb"
 51 |                 },
 52 |                 {
 53 |                   "type": "anyComponentStyle",
 54 |                   "maximumWarning": "6kb",
 55 |                   "maximumError": "10kb"
 56 |                 }
 57 |               ]
 58 |             }
 59 |           }
 60 |         },
 61 |         "serve": {
 62 |           "builder": "@angular-devkit/build-angular:dev-server",
 63 |           "options": {
 64 |             "browserTarget": "angular-quiz-app:build"
 65 |           },
 66 |           "configurations": {
 67 |             "production": {
 68 |               "browserTarget": "angular-quiz-app:build:production"
 69 |             }
 70 |           }
 71 |         },
 72 |         "extract-i18n": {
 73 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 74 |           "options": {
 75 |             "browserTarget": "angular-quiz-app:build"
 76 |           }
 77 |         },
 78 |         "test": {
 79 |           "builder": "@angular-devkit/build-angular:karma",
 80 |           "options": {
 81 |             "main": "src/test.ts",
 82 |             "polyfills": "src/polyfills.ts",
 83 |             "tsConfig": "tsconfig.spec.json",
 84 |             "karmaConfig": "karma.conf.js",
 85 |             "assets": [
 86 |               "src/favicon.ico",
 87 |               "src/assets"
 88 |             ],
 89 |             "styles": [
 90 |               "src/styles.css"
 91 |             ],
 92 |             "scripts": []
 93 |           }
 94 |         },
 95 |         "lint": {
 96 |           "builder": "@angular-devkit/build-angular:tslint",
 97 |           "options": {
 98 |             "tsConfig": [
 99 |               "tsconfig.app.json",
100 |               "tsconfig.spec.json",
101 |               "e2e/tsconfig.json"
102 |             ],
103 |             "exclude": [
104 |               "**/node_modules/**"
105 |             ]
106 |           }
107 |         },
108 |         "e2e": {
109 |           "builder": "@angular-devkit/build-angular:protractor",
110 |           "options": {
111 |             "protractorConfig": "e2e/protractor.conf.js",
112 |             "devServerTarget": "angular-quiz-app:serve"
113 |           },
114 |           "configurations": {
115 |             "production": {
116 |               "devServerTarget": "angular-quiz-app:serve:production"
117 |             }
118 |           }
119 |         }
120 |       }
121 |     }
122 |   },
123 |   "defaultProject": "angular-quiz-app"
124 | }
125 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   SELENIUM_PROMISE_MANAGER: false,
20 |   baseUrl: 'http://localhost:4200/',
21 |   framework: 'jasmine',
22 |   jasmineNodeOpts: {
23 |     showColors: true,
24 |     defaultTimeoutInterval: 30000,
25 |     print: function() {}
26 |   },
27 |   onPrepare() {
28 |     require('ts-node').register({
29 |       project: require('path').join(__dirname, './tsconfig.json')
30 |     });
31 |     jasmine.getEnv().addReporter(new SpecReporter({
32 |       spec: {
33 |         displayStacktrace: StacktraceOption.PRETTY
34 |       }
35 |     }));
36 |   }
37 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { browser, logging } from 'protractor';
 2 | import { AppPage } from './app.po';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', async () => {
12 |     await page.navigateTo();
13 |     expect(await page.getTitleText()).toEqual('angular-quiz-app app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   async navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl);
 6 |   }
 7 | 
 8 |   async getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root .content span')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "../out-tsc/e2e",
 6 |     "module": "commonjs",
 7 |     "target": "es2018",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/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'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/angular-quiz-app'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-quiz-app",
 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": "~11.2.6",
15 |     "@angular/common": "~11.2.6",
16 |     "@angular/compiler": "~11.2.6",
17 |     "@angular/core": "~11.2.6",
18 |     "@angular/forms": "~11.2.6",
19 |     "@angular/platform-browser": "~11.2.6",
20 |     "@angular/platform-browser-dynamic": "~11.2.6",
21 |     "@angular/router": "~11.2.6",
22 |     "rxjs": "~6.6.0",
23 |     "tslib": "^2.0.0",
24 |     "zone.js": "~0.11.3"
25 |   },
26 |   "devDependencies": {
27 |     "@angular-devkit/build-angular": "~0.1102.5",
28 |     "@angular/cli": "~11.2.5",
29 |     "@angular/compiler-cli": "~11.2.6",
30 |     "@types/jasmine": "~3.6.0",
31 |     "@types/node": "^12.11.1",
32 |     "codelyzer": "^6.0.0",
33 |     "jasmine-core": "~3.6.0",
34 |     "jasmine-spec-reporter": "~5.0.0",
35 |     "karma": "~6.1.0",
36 |     "karma-chrome-launcher": "~3.1.0",
37 |     "karma-coverage": "~2.0.3",
38 |     "karma-jasmine": "~4.0.0",
39 |     "karma-jasmine-html-reporter": "^1.5.0",
40 |     "protractor": "~7.0.0",
41 |     "ts-node": "~8.3.0",
42 |     "tslint": "~6.1.0",
43 |     "typescript": "~4.1.5"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
  1 | :host {
  2 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  3 |     font-size: 14px;
  4 |     color: #333;
  5 |     box-sizing: border-box;
  6 |     -webkit-font-smoothing: antialiased;
  7 |     -moz-osx-font-smoothing: grayscale;
  8 |   }
  9 | 
 10 |   h1,
 11 |   h2,
 12 |   h3,
 13 |   h4,
 14 |   h5,
 15 |   h6 {
 16 |     margin: 8px 0;
 17 |   }
 18 | 
 19 |   p {
 20 |     margin: 0;
 21 |   }
 22 | 
 23 |   .spacer {
 24 |     flex: 1;
 25 |   }
 26 | 
 27 |   .toolbar {
 28 |     position: absolute;
 29 |     top: 0;
 30 |     left: 0;
 31 |     right: 0;
 32 |     height: 60px;
 33 |     display: flex;
 34 |     align-items: center;
 35 |     background-color: #1976d2;
 36 |     color: white;
 37 |     font-weight: 600;
 38 |   }
 39 | 
 40 |   .toolbar img {
 41 |     margin: 0 16px;
 42 |   }
 43 | 
 44 |   .toolbar #twitter-logo {
 45 |     height: 40px;
 46 |     margin: 0 8px;
 47 |   }
 48 | 
 49 |   .toolbar #youtube-logo {
 50 |     height: 40px;
 51 |     margin: 0 16px;
 52 |   }
 53 | 
 54 |   .toolbar #twitter-logo:hover,
 55 |   .toolbar #youtube-logo:hover {
 56 |     opacity: 0.8;
 57 |   }
 58 | 
 59 |   .content {
 60 |     display: flex;
 61 |     margin: 82px auto 32px;
 62 |     padding: 0 16px;
 63 |     max-width: 960px;
 64 |     flex-direction: column;
 65 |     align-items: center;
 66 |   }
 67 | 
 68 |   svg.material-icons {
 69 |     height: 24px;
 70 |     width: auto;
 71 |   }
 72 | 
 73 |   svg.material-icons:not(:last-child) {
 74 |     margin-right: 8px;
 75 |   }
 76 | 
 77 |   .card svg.material-icons path {
 78 |     fill: #888;
 79 |   }
 80 | 
 81 |   .card-container {
 82 |     display: flex;
 83 |     flex-wrap: wrap;
 84 |     justify-content: center;
 85 |     margin-top: 16px;
 86 |   }
 87 | 
 88 |   .card {
 89 |     border-radius: 4px;
 90 |     border: 1px solid #eee;
 91 |     background-color: #fafafa;
 92 |     height: 40px;
 93 |     width: 200px;
 94 |     margin: 0 8px 16px;
 95 |     padding: 16px;
 96 |     display: flex;
 97 |     flex-direction: row;
 98 |     justify-content: center;
 99 |     align-items: center;
100 |     transition: all 0.2s ease-in-out;
101 |     line-height: 24px;
102 |   }
103 | 
104 |   .card-container .card:not(:last-child) {
105 |     margin-right: 0;
106 |   }
107 | 
108 |   .card.card-small {
109 |     height: 16px;
110 |     width: 168px;
111 |   }
112 | 
113 |   .card-container .card:not(.highlight-card) {
114 |     cursor: pointer;
115 |   }
116 | 
117 |   .card-container .card:not(.highlight-card):hover {
118 |     transform: translateY(-3px);
119 |     box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
120 |   }
121 | 
122 |   .card-container .card:not(.highlight-card):hover .material-icons path {
123 |     fill: rgb(105, 103, 103);
124 |   }
125 | 
126 |   .card.highlight-card {
127 |     background-color: #1976d2;
128 |     color: white;
129 |     font-weight: 600;
130 |     border: none;
131 |     width: auto;
132 |     min-width: 30%;
133 |     position: relative;
134 |   }
135 | 
136 |   .card.card.highlight-card span {
137 |     margin-left: 60px;
138 |   }
139 | 
140 |   svg#rocket {
141 |     width: 80px;
142 |     position: absolute;
143 |     left: -10px;
144 |     top: -24px;
145 |   }
146 | 
147 |   svg#rocket-smoke {
148 |     height: calc(100vh - 95px);
149 |     position: absolute;
150 |     top: 10px;
151 |     right: 180px;
152 |     z-index: -10;
153 |   }
154 | 
155 |   a,
156 |   a:visited,
157 |   a:hover {
158 |     color: #1976d2;
159 |     text-decoration: none;
160 |   }
161 | 
162 |   a:hover {
163 |     color: #125699;
164 |   }
165 | 
166 |   .terminal {
167 |     position: relative;
168 |     width: 80%;
169 |     max-width: 600px;
170 |     border-radius: 6px;
171 |     padding-top: 45px;
172 |     margin-top: 8px;
173 |     overflow: hidden;
174 |     background-color: rgb(15, 15, 16);
175 |   }
176 | 
177 |   .terminal::before {
178 |     content: "\2022 \2022 \2022";
179 |     position: absolute;
180 |     top: 0;
181 |     left: 0;
182 |     height: 4px;
183 |     background: rgb(58, 58, 58);
184 |     color: #c2c3c4;
185 |     width: 100%;
186 |     font-size: 2rem;
187 |     line-height: 0;
188 |     padding: 14px 0;
189 |     text-indent: 4px;
190 |   }
191 | 
192 |   .terminal pre {
193 |     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
194 |     color: white;
195 |     padding: 0 1rem 1rem;
196 |     margin: 0;
197 |   }
198 | 
199 |   .circle-link {
200 |     height: 40px;
201 |     width: 40px;
202 |     border-radius: 40px;
203 |     margin: 8px;
204 |     background-color: white;
205 |     border: 1px solid #eeeeee;
206 |     display: flex;
207 |     justify-content: center;
208 |     align-items: center;
209 |     cursor: pointer;
210 |     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
211 |     transition: 1s ease-out;
212 |   }
213 | 
214 |   .circle-link:hover {
215 |     transform: translateY(-0.25rem);
216 |     box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
217 |   }
218 | 
219 |   footer {
220 |     margin-top: 8px;
221 |     display: flex;
222 |     align-items: center;
223 |     line-height: 20px;
224 |   }
225 | 
226 |   footer a {
227 |     display: flex;
228 |     align-items: center;
229 |   }
230 | 
231 |   .github-star-badge {
232 |     color: #24292e;
233 |     display: flex;
234 |     align-items: center;
235 |     font-size: 12px;
236 |     padding: 3px 10px;
237 |     border: 1px solid rgba(27,31,35,.2);
238 |     border-radius: 3px;
239 |     background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
240 |     margin-left: 4px;
241 |     font-weight: 600;
242 |     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
243 |   }
244 | 
245 |   .github-star-badge:hover {
246 |     background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
247 |     border-color: rgba(27,31,35,.35);
248 |     background-position: -.5em;
249 |   }
250 | 
251 |   .github-star-badge .material-icons {
252 |     height: 16px;
253 |     width: 16px;
254 |     margin-right: 4px;
255 |   }
256 | 
257 |   svg#clouds {
258 |     position: fixed;
259 |     bottom: -160px;
260 |     left: -230px;
261 |     z-index: -10;
262 |     width: 1920px;
263 |   }
264 | 
265 | 
266 |   /* Responsive Styles */
267 |   @media screen and (max-width: 767px) {
268 | 
269 |     .card-container > *:not(.circle-link) ,
270 |     .terminal {
271 |       width: 100%;
272 |     }
273 | 
274 |     .card:not(.highlight-card) {
275 |       height: 16px;
276 |       margin: 8px 0;
277 |     }
278 | 
279 |     .card.highlight-card span {
280 |       margin-left: 72px;
281 |     }
282 | 
283 |     svg#rocket-smoke {
284 |       right: 120px;
285 |       transform: rotate(-5deg);
286 |     }
287 |   }
288 | 
289 |   @media screen and (max-width: 575px) {
290 |     svg#rocket-smoke {
291 |       display: none;
292 |       visibility: hidden;
293 |     }
294 |   }


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <style>
 4 |  
 5 | </style>
 6 | 
 7 | 
 8 | <!-- Toolbar -->
 9 | <div class="toolbar" role="banner">
10 |   <img
11 |     width="40"
12 |     alt="Angular Logo"
13 |     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
14 |   />
15 |   <span>Welcome</span>
16 |     <div class="spacer"></div>
17 |     <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
18 |       <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
19 |         <rect width="400" height="400" fill="none"/>
20 |         <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
21 |       </svg>
22 |     </a>
23 |     <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
24 |       <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
25 |         <path d="M0 0h24v24H0V0z" fill="none"/>
26 |         <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
27 |       </svg>
28 |     </a>
29 | </div>
30 | 
31 | <div class="content" role="main">
32 | 
33 |   <!-- Highlight Card -->
34 |   <div class="card highlight-card card-small">
35 | 
36 |     <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
37 |       <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
38 |         <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
39 |         <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
40 |           <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
41 |           <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
42 |         </g>
43 |       </g>
44 |     </svg>
45 | 
46 |     <span>{{ title }} is running!</span>
47 | 
48 | 
49 |     <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
50 |       <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
51 |     </svg>
52 | 
53 |   </div>
54 |   <div id  = "quiz">
55 |     <app-quiz-app></app-quiz-app>
56 | 
57 |   </div>
58 |   <!-- Footer -->
59 |   <footer>
60 |       Love Angular?&nbsp;
61 |       <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
62 |         <div class="github-star-badge">
63 |             <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
64 |           Star
65 |         </div>
66 |       </a>
67 |       <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
68 |         <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
69 |       </a>
70 |   </footer>
71 | 
72 |   <svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
73 |     <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
74 |   </svg>
75 | 
76 | </div>
77 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(async () => {
 6 |     await TestBed.configureTestingModule({
 7 |       declarations: [
 8 |         AppComponent
 9 |       ],
10 |     }).compileComponents();
11 |   });
12 | 
13 |   it('should create the app', () => {
14 |     const fixture = TestBed.createComponent(AppComponent);
15 |     const app = fixture.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   });
18 | 
19 |   it(`should have as title 'angular-quiz-app'`, () => {
20 |     const fixture = TestBed.createComponent(AppComponent);
21 |     const app = fixture.componentInstance;
22 |     expect(app.title).toEqual('angular-quiz-app');
23 |   });
24 | 
25 |   it('should render title', () => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.nativeElement;
29 |     expect(compiled.querySelector('.content span').textContent).toContain('angular-quiz-app app is running!');
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'angular-quiz-app';
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | 
 4 | import { AppComponent } from './app.component';
 5 | import { QuizAppComponent } from './quiz-app/quiz-app.component';
 6 | import{HttpClientModule} from '@angular/common/http'
 7 | 
 8 | @NgModule({
 9 |   declarations: [
10 |     AppComponent,
11 |     QuizAppComponent
12 |   ],
13 |   imports: [
14 |     BrowserModule,
15 |     HttpClientModule,
16 |     
17 |   ],
18 |   providers: [],
19 |   bootstrap: [AppComponent]
20 | })
21 | export class AppModule { }
22 | 


--------------------------------------------------------------------------------
/src/app/quiz-api.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { QuizApiService } from './quiz-api.service';
 4 | 
 5 | describe('QuizApiService', () => {
 6 |   let service: QuizApiService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(QuizApiService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/quiz-api.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import{ HttpClient } from '@angular/common/http';
 3 | import{ Observable } from 'rxjs';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class QuizApiService {
 9 | 
10 |   constructor(private http: HttpClient) {
11 | 
12 | 
13 |    }
14 |    getQuiz(): Observable<object> {
15 |      return this.http.get('https://opentdb.com/api.php?amount=10&type=multiple')
16 |    }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/quiz-app/quiz-app.component.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     max-width: 640px;
 3 |     margin: 10px auto;
 4 |     width: 100%;
 5 |     background: #333;
 6 |     color: #fff;
 7 |     padding: 10px;
 8 |     border-radius: 10px;
 9 |     border: 2px solid #333;
10 |     text-align: center;
11 | }
12 | 
13 | ul {
14 |     list-style: none;
15 |     text-align: center;
16 | }
17 | 
18 | button {
19 |     outline: none;
20 |     box-shadow: none;
21 |     max-width: 150px;
22 |     width: 100%;
23 |     padding: 10px 0;
24 |     margin: 10px 0;
25 | }


--------------------------------------------------------------------------------
/src/app/quiz-app/quiz-app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <div id = "questions" *ngIf= "questions.length > 0 && num < questions.length; else elseBlock">
 3 |         <h2>Current Score: {{points}}</h2>
 4 |         <h2 [innerHtml]="questions[num].question"> </h2>
 5 |         <ul>
 6 |             <li *ngFor = " let ans of questions[num].incorrect_answers"> 
 7 |                 <button [innerHtml]="ans" (click) = "checkAnswer(questions[num].correct_answer,ans)"></button>
 8 |             </li>
 9 |             
10 |         </ul>
11 |     </div>
12 |         <ng-template #elseBlock>
13 |              <h2> You Scored: {{points}}</h2>
14 |              <button (click)="start()">Restart Quiz </button>
15 |         </ng-template>
16 |     
17 | </div>


--------------------------------------------------------------------------------
/src/app/quiz-app/quiz-app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { QuizAppComponent } from './quiz-app.component';
 4 | 
 5 | describe('QuizAppComponent', () => {
 6 |   let component: QuizAppComponent;
 7 |   let fixture: ComponentFixture<QuizAppComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ QuizAppComponent ]
12 |     })
13 |     .compileComponents();
14 |   });
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(QuizAppComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/quiz-app/quiz-app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import {QuizApiService} from '../quiz-api.service'
 3 | @Component({
 4 |   selector: 'app-quiz-app',
 5 |   templateUrl: './quiz-app.component.html',
 6 |   styleUrls: ['./quiz-app.component.css']
 7 | })
 8 | export class QuizAppComponent implements OnInit {
 9 |   questions = [];
10 |   answer = false;
11 |   num = 0;
12 |   points =0;
13 | 
14 |   constructor(private api:QuizApiService) { }
15 | 
16 |   ngOnInit(): void {
17 |     this.start();
18 |   }
19 | 
20 |   checkAnswer( correct_answer:String ,your_answer :String){
21 |     this.answer = correct_answer == your_answer?true:false;
22 |     this.answer?this.points +=1:this.points -=1;
23 |     this.num<this.questions.length?this.num+=1:null;
24 | 
25 |   }
26 |   start(){
27 |     this.questions = [];
28 |     this.api.getQuiz().subscribe(async res => {
29 |       let quiz = res['results'];
30 |       quiz.forEach(element => {
31 |         element.incorrect_answers.push(element.correct_answer);
32 |         element.incorrect_answers.sort(()=>.5 -Math.random());
33 | 
34 |         
35 |       });
36 |       this.questions =await quiz;
37 |       this.num = 0;
38 |       this.points = 0;
39 |     });
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/angularquizapp/5bf3fdd54aa0a0f4f363ea9052054f26477ce6a1/src/assets/.gitkeep


--------------------------------------------------------------------------------
/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/nirzaf/angularquizapp/5bf3fdd54aa0a0f4f363ea9052054f26477ce6a1/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>AngularQuizApp</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/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 | /**
22 |  * IE11 requires the following for NgClass support on SVG elements
23 |  */
24 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
25 | 
26 | /**
27 |  * Web Animations `@angular/platform-browser/animations`
28 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 |  */
31 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
32 | 
33 | /**
34 |  * By default, zone.js will patch all possible macroTask and DomEvents
35 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
36 |  * because those flags need to be set before `zone.js` being loaded, and webpack
37 |  * will put import in the top of bundle, so user need to create a separate file
38 |  * in this directory (for example: zone-flags.ts), and put the following flags
39 |  * into that file, and then add the following code before importing zone.js.
40 |  * import './zone-flags';
41 |  *
42 |  * The flags allowed in zone-flags.ts are listed here.
43 |  *
44 |  * The following flags will work for all browsers.
45 |  *
46 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 |  *
50 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
52 |  *
53 |  *  (window as any).__Zone_enable_cross_context_check = true;
54 |  *
55 |  */
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/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: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "sourceMap": true,
 8 |     "declaration": false,
 9 |     "downlevelIteration": true,
10 |     "experimentalDecorators": true,
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "module": "es2020",
15 |     "lib": [
16 |       "es2018",
17 |       "dom"
18 |     ]
19 |   },
20 |   "angularCompilerOptions": {
21 |     "enableI18nLegacyMessageIdFormat": false
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rulesDirectory": [
  4 |     "codelyzer"
  5 |   ],
  6 |   "rules": {
  7 |     "align": {
  8 |       "options": [
  9 |         "parameters",
 10 |         "statements"
 11 |       ]
 12 |     },
 13 |     "array-type": false,
 14 |     "arrow-return-shorthand": true,
 15 |     "curly": true,
 16 |     "deprecation": {
 17 |       "severity": "warning"
 18 |     },
 19 |     "eofline": true,
 20 |     "import-blacklist": [
 21 |       true,
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": {
 26 |       "options": [
 27 |         "spaces"
 28 |       ]
 29 |     },
 30 |     "max-classes-per-file": false,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 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-console": [
 47 |       true,
 48 |       "debug",
 49 |       "info",
 50 |       "time",
 51 |       "timeEnd",
 52 |       "trace"
 53 |     ],
 54 |     "no-empty": false,
 55 |     "no-inferrable-types": [
 56 |       true,
 57 |       "ignore-params"
 58 |     ],
 59 |     "no-non-null-assertion": true,
 60 |     "no-redundant-jsdoc": true,
 61 |     "no-switch-case-fall-through": true,
 62 |     "no-var-requires": false,
 63 |     "object-literal-key-quotes": [
 64 |       true,
 65 |       "as-needed"
 66 |     ],
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "semicolon": {
 72 |       "options": [
 73 |         "always"
 74 |       ]
 75 |     },
 76 |     "space-before-function-paren": {
 77 |       "options": {
 78 |         "anonymous": "never",
 79 |         "asyncArrow": "always",
 80 |         "constructor": "never",
 81 |         "method": "never",
 82 |         "named": "never"
 83 |       }
 84 |     },
 85 |     "typedef": [
 86 |       true,
 87 |       "call-signature"
 88 |     ],
 89 |     "typedef-whitespace": {
 90 |       "options": [
 91 |         {
 92 |           "call-signature": "nospace",
 93 |           "index-signature": "nospace",
 94 |           "parameter": "nospace",
 95 |           "property-declaration": "nospace",
 96 |           "variable-declaration": "nospace"
 97 |         },
 98 |         {
 99 |           "call-signature": "onespace",
100 |           "index-signature": "onespace",
101 |           "parameter": "onespace",
102 |           "property-declaration": "onespace",
103 |           "variable-declaration": "onespace"
104 |         }
105 |       ]
106 |     },
107 |     "variable-name": {
108 |       "options": [
109 |         "ban-keywords",
110 |         "check-format",
111 |         "allow-pascal-case"
112 |       ]
113 |     },
114 |     "whitespace": {
115 |       "options": [
116 |         "check-branch",
117 |         "check-decl",
118 |         "check-operator",
119 |         "check-separator",
120 |         "check-type",
121 |         "check-typecast"
122 |       ]
123 |     },
124 |     "component-class-suffix": true,
125 |     "contextual-lifecycle": true,
126 |     "directive-class-suffix": true,
127 |     "no-conflicting-lifecycle": true,
128 |     "no-host-metadata-property": true,
129 |     "no-input-rename": true,
130 |     "no-inputs-metadata-property": true,
131 |     "no-output-native": true,
132 |     "no-output-on-prefix": true,
133 |     "no-output-rename": true,
134 |     "no-outputs-metadata-property": true,
135 |     "template-banana-in-box": true,
136 |     "template-no-negated-async": true,
137 |     "use-lifecycle-interface": true,
138 |     "use-pipe-transform-interface": true,
139 |     "directive-selector": [
140 |       true,
141 |       "attribute",
142 |       "app",
143 |       "camelCase"
144 |     ],
145 |     "component-selector": [
146 |       true,
147 |       "element",
148 |       "app",
149 |       "kebab-case"
150 |     ]
151 |   }
152 | }
153 | 


--------------------------------------------------------------------------------