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


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


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


--------------------------------------------------------------------------------
/src/app/employee-component/employee-component.component.css:
--------------------------------------------------------------------------------
1 | 


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


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


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


--------------------------------------------------------------------------------
/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/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/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/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/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 | 


--------------------------------------------------------------------------------
/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 | }


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


--------------------------------------------------------------------------------
/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/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 | })
10 | export class EmployeeComponentComponent implements OnInit {
11 |   private _listFilter: string = '';
12 |   filteredEmployees: IEmployee[] = [];
13 |   employees: IEmployee[] = [];
14 | 
15 |   constructor(private employeeService: EmployeeService) {}
16 | 
17 |   //ALTERNATIVE CODE OF CONSTRUCTOR
18 |   // private employeeService;
19 |   // constructor(employeeService: EmployeeService) {
20 |   //   this.employeeService = employeeService;
21 |   // }
22 | 
23 |   ngOnInit() {
24 |     this.employees = this.employeeService.getEmployees();
25 |     this.listFilter = 'Patel';
26 |   }
27 | 
28 |   get listFilter(): string {
29 |     return this._listFilter;
30 |   }
31 | 
32 |   set listFilter(value: string) {
33 |     this._listFilter = value;
34 |     console.log('In Setter:', value);
35 |     this.filteredEmployees = this.performFilter(value);
36 |   }
37 | 
38 |   performFilter(filterBy: string): IEmployee[] {
39 |     filterBy = filterBy.toLocaleLowerCase();
40 |     return this.employees.filter((employee: IEmployee) =>
41 |       employee.name.toLocaleLowerCase().includes(filterBy)
42 |     );
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/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`.


--------------------------------------------------------------------------------
/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 | }


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


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