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


--------------------------------------------------------------------------------
/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-nestedcomponent/3c89e7767723384a3671dba547724dd0e258c598/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><app-star [rating]="employee.starRating"></app-star></td>
24 |       </tr>
25 |     </table>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/src/app/employee-component/employee-component.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { IEmployee } from './employee';
 3 | 
 4 | @Component({
 5 |   selector: 'app-employee-component',
 6 |   templateUrl: './employee-component.component.html',
 7 |   styleUrls: ['./employee-component.component.css']
 8 | })
 9 | export class EmployeeComponentComponent implements OnInit {
10 |   constructor() {}
11 | 
12 |   ngOnInit() {
13 |     this.listFilter = 'Patel';
14 |   }
15 | 
16 |   private _listFilter: string = '';
17 | 
18 |   get listFilter(): string {
19 |     return this._listFilter;
20 |   }
21 | 
22 |   set listFilter(value: string) {
23 |     this._listFilter = value;
24 |     console.log('In Setter:', value);
25 |     this.filteredEmployees = this.performFilter(value);
26 |   }
27 | 
28 |   filteredEmployees: IEmployee[] = [];
29 |   employees: IEmployee[] = [
30 |     {
31 |       id: 1,
32 |       code: 'VOD1410',
33 |       name: 'Akshay Patel',
34 |       salary: 3000,
35 |       starRating:3.5
36 |     },
37 |     {
38 |       id: 2,
39 |       code: 'VOD1710',
40 |       name: 'Panth Patel',
41 |       salary: 1500,
42 |       starRating:4
43 |     },
44 |     {
45 |       id: 2,
46 |       code: 'VOD0408',
47 |       name: 'Satish Patel',
48 |       salary: 5000,
49 |       starRating:4.5
50 |     }
51 |   ];
52 | 
53 |   performFilter(filterBy: string): IEmployee[] {
54 |     filterBy = filterBy.toLocaleLowerCase();
55 |     return this.employees.filter((employee: IEmployee) =>
56 |       employee.name.toLocaleLowerCase().includes(filterBy)
57 |     );
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/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';
3 | 


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


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