├── README.md
├── angular.json
├── package.json
├── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── employee-component
    │   │   ├── employee-component.component.css
    │   │   ├── employee-component.component.html
    │   │   ├── employee-component.component.ts
    │   │   ├── employee.service.ts
    │   │   └── employee.ts
    │   └── shared
    │   │   └── star
    │   │       ├── star.component.css
    │   │       ├── star.component.html
    │   │       └── star.component.ts
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    └── styles.css
└── tsconfig.json


/README.md:
--------------------------------------------------------------------------------
  1 | # angular-servicecomponentleveldi
  2 | 
  3 | employee.ts (parent)
  4 | 
  5 | ```js
  6 | export interface IEmployee {
  7 |   id: number;
  8 |   code: string;
  9 |   name: string;
 10 |   salary: number;
 11 |   starRating: number;
 12 | }
 13 | ```
 14 | 
 15 | employee.service.ts
 16 | 
 17 | ```js
 18 | import { Injectable } from '@angular/core';
 19 | import { IEmployee } from './employee';
 20 | 
 21 | @Injectable()
 22 | export class EmployeeService {
 23 |   getEmployees(): IEmployee[] {
 24 |     return [
 25 |       {
 26 |         id: 1,
 27 |         code: 'VOD1410',
 28 |         name: 'Akshay Patel',
 29 |         salary: 3000,
 30 |         starRating: 3.5
 31 |       },
 32 |       {
 33 |         id: 2,
 34 |         code: 'VOD1710',
 35 |         name: 'Panth Patel',
 36 |         salary: 1500,
 37 |         starRating: 4
 38 |       },
 39 |       {
 40 |         id: 2,
 41 |         code: 'VOD0408',
 42 |         name: 'Satish Patel',
 43 |         salary: 5000,
 44 |         starRating: 4.5
 45 |       }
 46 |     ];
 47 |   }
 48 | }
 49 | ```
 50 | 
 51 | employee-component.component.ts (parent)
 52 | 
 53 | ```js
 54 | import { Component, OnInit } from '@angular/core';
 55 | import { IEmployee } from './employee';
 56 | import { EmployeeService } from './employee.service';
 57 | 
 58 | @Component({
 59 |   selector: 'app-employee-component',
 60 |   templateUrl: './employee-component.component.html',
 61 |   styleUrls: ['./employee-component.component.css'],
 62 |   providers: [EmployeeService]
 63 | })
 64 | export class EmployeeComponentComponent implements OnInit {
 65 |   private _listFilter: string = '';
 66 |   filteredEmployees: IEmployee[] = [];
 67 |   employees: IEmployee[] = [];
 68 | 
 69 |   constructor(private employeeService: EmployeeService) {}
 70 | 
 71 |   //ALTERNATIVE CODE OF CONSTRUCTOR
 72 |   // private employeeService;
 73 |   // constructor(employeeService: EmployeeService) {
 74 |   //   this.employeeService = employeeService;
 75 |   // }
 76 | 
 77 |   ngOnInit() {
 78 |     this.employees = this.employeeService.getEmployees();
 79 |     this.listFilter = 'Patel';
 80 |   }
 81 | 
 82 |   get listFilter(): string {
 83 |     return this._listFilter;
 84 |   }
 85 | 
 86 |   set listFilter(value: string) {
 87 |     this._listFilter = value;
 88 |     console.log('In Setter:', value);
 89 |     this.filteredEmployees = this.performFilter(value);
 90 |   }
 91 | 
 92 |   performFilter(filterBy: string): IEmployee[] {
 93 |     filterBy = filterBy.toLocaleLowerCase();
 94 |     return this.employees.filter((employee: IEmployee) =>
 95 |       employee.name.toLocaleLowerCase().includes(filterBy)
 96 |     );
 97 |   }
 98 | }
 99 | ```
100 | employee-component.component.html (parent)
101 | 
102 | ```html
103 | <div>
104 |   <div>
105 |     <input type="text" [(ngModel)]="listFilter" />
106 |   </div>
107 |   <br />
108 |   <div>
109 |     Filter By: {{listFilter}}
110 |   </div>
111 |   <div>
112 |     <table>
113 |       <thead>
114 |         <td>Id</td>
115 |         <td>Code</td>
116 |         <td>Name</td>
117 |         <td>Salary</td>
118 |         <td>Rating</td>
119 |       </thead>
120 |       <tr *ngFor="let employee of filteredEmployees">
121 |         <td>{{employee.id}}</td>
122 |         <td>{{employee.code}}</td>
123 |         <td>{{employee.name}}</td>
124 |         <td>{{employee.salary}}</td>
125 |         <td><app-star [rating]="employee.starRating"></app-star></td>
126 |       </tr>
127 |     </table>
128 |   </div>
129 | </div>
130 | ```
131 | star.component.ts (child)
132 | 
133 | ```js
134 | import { Component, Input, OnChanges, OnInit } from '@angular/core';
135 | 
136 | @Component({
137 |   selector: 'app-star',
138 |   templateUrl: './star.component.html',
139 |   styleUrls: ['./star.component.css']
140 | })
141 | export class StarComponent implements OnChanges {
142 |   constructor() {}
143 | 
144 |   @Input() rating: number = 0;
145 |   cropWidth: number = 75;
146 | 
147 |   ngOnChanges(): void {
148 |     this.cropWidth = this.rating * (75 / 5);
149 |   }
150 | }
151 | ```
152 | 
153 | star.component.html (child)
154 | 
155 | ```html
156 | <div class="crop" [style.width.px]="cropWidth" title="rating">
157 |   <div style="width:75px">
158 |     <span class="fa fa-star"></span>
159 |     <span class="fa fa-star"></span>
160 |     <span class="fa fa-star"></span>
161 |     <span class="fa fa-star"></span>
162 |     <span class="fa fa-star"></span>
163 |   </div>
164 | </div>
165 | ```
166 | 
167 | star.component.css (child)
168 | 
169 | ```css
170 | .crop {
171 |   overflow: hidden;
172 | }
173 | div {
174 |   cursor: pointer;
175 | }
176 | ```
177 | 
178 | style.css
179 | 
180 | Install bootstrap font-awesome and import in style.css
181 | 
182 | ```css
183 | @import '~bootstrap/dist/css/bootstrap.min.css';
184 | @import 'font-awesome/css/font-awesome.min.css';
185 | ```
186 | 
187 | app.module.ts
188 | 
189 | ```js
190 | import { NgModule } from '@angular/core';
191 | import { BrowserModule } from '@angular/platform-browser';
192 | import { FormsModule } from '@angular/forms';
193 | 
194 | import { AppComponent } from './app.component';
195 | import { EmployeeComponentComponent } from './employee-component/employee-component.component';
196 | import { StarComponent } from './shared/star/star.component';
197 | 
198 | @NgModule({
199 |   imports: [BrowserModule, FormsModule],
200 |   declarations: [AppComponent, EmployeeComponentComponent, StarComponent],
201 |   bootstrap: [AppComponent]
202 | })
203 | export class AppModule {}
204 | ```
205 | 
206 | app.component.html
207 | 
208 | ```html
209 | <app-employee-component></app-employee-component>
210 | ```
211 | 
212 | ![image](https://user-images.githubusercontent.com/38757471/130339384-276bc6d4-d8c1-452e-b8d8-2ca23e3e8ff7.png)
213 | 
214 | 
215 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "demo": {
  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 |             "outputPath": "dist/demo",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "src/tsconfig.app.json",
 21 |             "assets": [
 22 |               "src/favicon.ico",
 23 |               "src/assets"
 24 |             ],
 25 |             "styles": [
 26 |               "src/styles.css"
 27 |             ],
 28 |             "scripts": []
 29 |           },
 30 |           "configurations": {
 31 |             "production": {
 32 |               "fileReplacements": [
 33 |                 {
 34 |                   "replace": "src/environments/environment.ts",
 35 |                   "with": "src/environments/environment.prod.ts"
 36 |                 }
 37 |               ],
 38 |               "optimization": true,
 39 |               "outputHashing": "all",
 40 |               "sourceMap": false,
 41 |               "extractCss": true,
 42 |               "namedChunks": false,
 43 |               "aot": true,
 44 |               "extractLicenses": true,
 45 |               "vendorChunk": false,
 46 |               "buildOptimizer": true
 47 |             }
 48 |           }
 49 |         },
 50 |         "serve": {
 51 |           "builder": "@angular-devkit/build-angular:dev-server",
 52 |           "options": {
 53 |             "browserTarget": "demo:build"
 54 |           },
 55 |           "configurations": {
 56 |             "production": {
 57 |               "browserTarget": "demo:build:production"
 58 |             }
 59 |           }
 60 |         },
 61 |         "extract-i18n": {
 62 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 63 |           "options": {
 64 |             "browserTarget": "demo:build"
 65 |           }
 66 |         },
 67 |         "test": {
 68 |           "builder": "@angular-devkit/build-angular:karma",
 69 |           "options": {
 70 |             "main": "src/test.ts",
 71 |             "polyfills": "src/polyfills.ts",
 72 |             "tsConfig": "src/tsconfig.spec.json",
 73 |             "karmaConfig": "src/karma.conf.js",
 74 |             "styles": [
 75 |               "styles.css"
 76 |             ],
 77 |             "scripts": [],
 78 |             "assets": [
 79 |               "src/favicon.ico",
 80 |               "src/assets"
 81 |             ]
 82 |           }
 83 |         },
 84 |         "lint": {
 85 |           "builder": "@angular-devkit/build-angular:tslint",
 86 |           "options": {
 87 |             "tsConfig": [
 88 |               "src/tsconfig.app.json",
 89 |               "src/tsconfig.spec.json"
 90 |             ],
 91 |             "exclude": [
 92 |               "**/node_modules/**"
 93 |             ]
 94 |           }
 95 |         }
 96 |       }
 97 |     }
 98 |   },
 99 |   "defaultProject": "demo"
100 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@angular/animations": "^12.1.0",
 7 |     "@angular/common": "^12.1.0",
 8 |     "@angular/compiler": "^12.1.0",
 9 |     "@angular/core": "^12.1.0",
10 |     "@angular/forms": "^12.1.0",
11 |     "@angular/platform-browser": "^12.1.0",
12 |     "@angular/platform-browser-dynamic": "^12.1.0",
13 |     "@angular/router": "^12.1.0",
14 |     "@popperjs/core": "^2.9.3",
15 |     "bootstrap": "^5.1.0",
16 |     "font-awesome": "^4.7.0",
17 |     "rxjs": "^7.1.0",
18 |     "tslib": "^2.3.0",
19 |     "zone.js": "^0.11.4"
20 |   },
21 |   "scripts": {
22 |     "ng": "ng",
23 |     "start": "ng serve",
24 |     "build": "ng build",
25 |     "test": "ng test",
26 |     "lint": "ng lint",
27 |     "e2e": "ng e2e"
28 |   },
29 |   "devDependencies": {
30 |     "@angular-devkit/build-angular": "~0.1100.4",
31 |     "@angular/cli": "~11.0.4",
32 |     "@angular/compiler-cli": "~11.0.4",
33 |     "@types/jasmine": "~3.6.0",
34 |     "@types/node": "^12.11.1",
35 |     "codelyzer": "^6.0.0",
36 |     "jasmine-core": "~3.6.0",
37 |     "jasmine-spec-reporter": "~5.0.0",
38 |     "karma": "~5.1.0",
39 |     "karma-chrome-launcher": "~3.1.0",
40 |     "karma-coverage": "~2.0.3",
41 |     "karma-jasmine": "~4.0.0",
42 |     "karma-jasmine-html-reporter": "^1.5.0",
43 |     "protractor": "~7.0.0",
44 |     "ts-node": "~8.3.0",
45 |     "tslint": "~6.1.0",
46 |     "typescript": "~4.0.2"
47 |   }
48 | }


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | p {
2 |   font-family: Lato;
3 | }


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-employee-component></app-employee-component>


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


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { FormsModule } from '@angular/forms';
 4 | 
 5 | import { AppComponent } from './app.component';
 6 | import { EmployeeComponentComponent } from './employee-component/employee-component.component';
 7 | import { StarComponent } from './shared/star/star.component';
 8 | 
 9 | @NgModule({
10 |   imports: [BrowserModule, FormsModule],
11 |   declarations: [AppComponent, EmployeeComponentComponent, StarComponent],
12 |   bootstrap: [AppComponent]
13 | })
14 | export class AppModule {}
15 | 


--------------------------------------------------------------------------------
/src/app/employee-component/employee-component.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akshayblevel/angular-servicecomponentleveldi/15fabb509d248147918fbb46e7df1df2195dedd4/src/app/employee-component/employee-component.component.css


--------------------------------------------------------------------------------
/src/app/employee-component/employee-component.component.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <div>
 3 |     <input type="text" [(ngModel)]="listFilter" />
 4 |   </div>
 5 |   <br />
 6 |   <div>
 7 |     Filter By: {{listFilter}}
 8 |   </div>
 9 |   <div>
10 |     <table>
11 |       <thead>
12 |         <td>Id</td>
13 |         <td>Code</td>
14 |         <td>Name</td>
15 |         <td>Salary</td>
16 |         <td>Rating</td>
17 |       </thead>
18 |       <tr *ngFor="let employee of filteredEmployees">
19 |         <td>{{employee.id}}</td>
20 |         <td>{{employee.code}}</td>
21 |         <td>{{employee.name}}</td>
22 |         <td>{{employee.salary}}</td>
23 |         <td>
24 |           <app-star [rating]="employee.starRating"></app-star>
25 |         </td>
26 |       </tr>
27 |     </table>
28 |   </div>
29 | </div>


--------------------------------------------------------------------------------
/src/app/employee-component/employee-component.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { IEmployee } from './employee';
 3 | import { EmployeeService } from './employee.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-employee-component',
 7 |   templateUrl: './employee-component.component.html',
 8 |   styleUrls: ['./employee-component.component.css'],
 9 |   providers: [EmployeeService]
10 | })
11 | export class EmployeeComponentComponent implements OnInit {
12 |   private _listFilter: string = '';
13 |   filteredEmployees: IEmployee[] = [];
14 |   employees: IEmployee[] = [];
15 | 
16 |   constructor(private employeeService: EmployeeService) {}
17 | 
18 |   //ALTERNATIVE CODE OF CONSTRUCTOR
19 |   // private employeeService;
20 |   // constructor(employeeService: EmployeeService) {
21 |   //   this.employeeService = employeeService;
22 |   // }
23 | 
24 |   ngOnInit() {
25 |     this.employees = this.employeeService.getEmployees();
26 |     this.listFilter = 'Patel';
27 |   }
28 | 
29 |   get listFilter(): string {
30 |     return this._listFilter;
31 |   }
32 | 
33 |   set listFilter(value: string) {
34 |     this._listFilter = value;
35 |     console.log('In Setter:', value);
36 |     this.filteredEmployees = this.performFilter(value);
37 |   }
38 | 
39 |   performFilter(filterBy: string): IEmployee[] {
40 |     filterBy = filterBy.toLocaleLowerCase();
41 |     return this.employees.filter((employee: IEmployee) =>
42 |       employee.name.toLocaleLowerCase().includes(filterBy)
43 |     );
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/app/employee-component/employee.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { IEmployee } from './employee';
 3 | 
 4 | @Injectable()
 5 | export class EmployeeService {
 6 |   getEmployees(): IEmployee[] {
 7 |     return [
 8 |       {
 9 |         id: 1,
10 |         code: 'VOD1410',
11 |         name: 'Akshay Patel',
12 |         salary: 3000,
13 |         starRating: 3.5
14 |       },
15 |       {
16 |         id: 2,
17 |         code: 'VOD1710',
18 |         name: 'Panth Patel',
19 |         salary: 1500,
20 |         starRating: 4
21 |       },
22 |       {
23 |         id: 2,
24 |         code: 'VOD0408',
25 |         name: 'Satish Patel',
26 |         salary: 5000,
27 |         starRating: 4.5
28 |       }
29 |     ];
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/employee-component/employee.ts:
--------------------------------------------------------------------------------
1 | export interface IEmployee {
2 |   id: number;
3 |   code: string;
4 |   name: string;
5 |   salary: number;
6 |   starRating: number;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/shared/star/star.component.css:
--------------------------------------------------------------------------------
1 | .crop {
2 |   overflow: hidden;
3 | }
4 | div {
5 |   cursor: pointer;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/shared/star/star.component.html:
--------------------------------------------------------------------------------
 1 | <div class="crop" [style.width.px]="cropWidth" title="rating">
 2 |   <div style="width:75px">
 3 |     <span class="fa fa-star"></span>
 4 |     <span class="fa fa-star"></span>
 5 |     <span class="fa fa-star"></span>
 6 |     <span class="fa fa-star"></span>
 7 |     <span class="fa fa-star"></span>
 8 |   </div>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/src/app/shared/star/star.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnChanges, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-star',
 5 |   templateUrl: './star.component.html',
 6 |   styleUrls: ['./star.component.css']
 7 | })
 8 | export class StarComponent implements OnChanges {
 9 |   constructor() {}
10 | 
11 |   @Input() rating: number = 0;
12 |   cropWidth: number = 75;
13 | 
14 |   ngOnChanges(): void {
15 |     this.cropWidth = this.rating * (75 / 5);
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 | <my-app>loading</my-app>


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import './polyfills';
 2 | 
 3 | import { enableProdMode } from '@angular/core';
 4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 5 | 
 6 | import { AppModule } from './app/app.module';
 7 | 
 8 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
 9 |   // Ensure Angular destroys itself on hot reloads.
10 |   if (window['ngRef']) {
11 |     window['ngRef'].destroy();
12 |   }
13 |   window['ngRef'] = ref;
14 | 
15 |   // Otherwise, log the boot error
16 | }).catch(err => console.error(err));


--------------------------------------------------------------------------------
/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/docs/ts/latest/guide/browser-support.html
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/set';
35 | 
36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
37 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
38 | 
39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */
40 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
41 | 
42 | 
43 | /** Evergreen browsers require these. **/
44 | // import 'core-js/es6/reflect';
45 | // import 'core-js/es7/reflect';
46 | 
47 | 
48 | /**
49 |  * Web Animations `@angular/platform-browser/animations`
50 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
51 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
52 |  */
53 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
54 | 
55 | 
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 
67 | /**
68 |  * Date, currency, decimal and percent pipes.
69 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
70 |  */
71 | // import 'intl';  // Run `npm install --save intl`.


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @import '~bootstrap/dist/css/bootstrap.min.css';
2 | @import 'font-awesome/css/font-awesome.min.css';


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   },
22 |   "angularCompilerOptions": {
23 |     "enableIvy": true,
24 |     "fullTemplateTypeCheck": true,
25 |     "strictInjectionParameters": true
26 |   }
27 | }


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