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


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


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


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* Add application styles & imports to this file! */


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


--------------------------------------------------------------------------------
/src/app/employee-component/employee-component.component.css:
--------------------------------------------------------------------------------
1 | thead {
2 |   color: #337ab7;
3 | }
4 | 


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


--------------------------------------------------------------------------------
/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/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 | 
 8 | 
 9 | @NgModule({
10 |   imports:      [ BrowserModule, FormsModule ],
11 |   declarations: [ AppComponent,EmployeeComponentComponent ],
12 |   bootstrap:    [ AppComponent ]
13 | })
14 | export class AppModule { }
15 | 


--------------------------------------------------------------------------------
/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 |       </thead>
17 |       <tr *ngFor="let employee of filteredEmployees">
18 |         <td>{{employee.id}}</td>
19 |         <td>{{employee.code}}</td>
20 |         <td>{{employee.name}}</td>
21 |         <td>{{employee.salary}}</td>
22 |       </tr>
23 |     </table>
24 |   </div>
25 | </div>


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


--------------------------------------------------------------------------------
/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 |     "rxjs": "^7.1.0",
15 |     "tslib": "^2.3.0",
16 |     "zone.js": "^0.11.4"
17 |   },
18 |   "scripts": {
19 |     "ng": "ng",
20 |     "start": "ng serve",
21 |     "build": "ng build",
22 |     "test": "ng test",
23 |     "lint": "ng lint",
24 |     "e2e": "ng e2e"
25 |   },
26 |   "devDependencies": {
27 |     "@angular-devkit/build-angular": "~0.1100.4",
28 |     "@angular/cli": "~11.0.4",
29 |     "@angular/compiler-cli": "~11.0.4",
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": "~5.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.0.2"
44 |   }
45 | }


--------------------------------------------------------------------------------
/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 |     },
36 |     {
37 |       id: 2,
38 |       code: 'VOD1710',
39 |       name: 'Panth Patel',
40 |       salary: 1500
41 |     },
42 |     {
43 |       id: 2,
44 |       code: 'VOD0408',
45 |       name: 'Satish Patel',
46 |       salary: 5000
47 |     }
48 |   ];
49 | 
50 |   performFilter(filterBy: string): IEmployee[] {
51 |     filterBy = filterBy.toLocaleLowerCase();
52 |     return this.employees.filter((employee: IEmployee) =>
53 |       employee.name.toLocaleLowerCase().includes(filterBy)
54 |     );
55 |   }
56 | }
57 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # angular-arrowfunction
  2 | 
  3 | employee.ts
  4 | 
  5 | ```js
  6 | export interface IEmployee {
  7 |   id: number;
  8 |   code: string;
  9 |   name: string;
 10 |   salary: number;
 11 | }
 12 | ```
 13 | 
 14 | employee-component.component.ts
 15 | 
 16 | ```js
 17 | import { Component, OnInit } from '@angular/core';
 18 | import { IEmployee } from './employee';
 19 | 
 20 | @Component({
 21 |   selector: 'app-employee-component',
 22 |   templateUrl: './employee-component.component.html',
 23 |   styleUrls: ['./employee-component.component.css']
 24 | })
 25 | export class EmployeeComponentComponent implements OnInit {
 26 |   constructor() {}
 27 | 
 28 |   ngOnInit() {
 29 |     this.listFilter = 'Patel';
 30 |   }
 31 | 
 32 |   private _listFilter: string = '';
 33 | 
 34 |   get listFilter(): string {
 35 |     return this._listFilter;
 36 |   }
 37 | 
 38 |   set listFilter(value: string) {
 39 |     this._listFilter = value;
 40 |     console.log('In Setter:', value);
 41 |     this.filteredEmployees = this.performFilter(value);
 42 |   }
 43 | 
 44 |   filteredEmployees: IEmployee[] = [];
 45 |   employees: IEmployee[] = [
 46 |     {
 47 |       id: 1,
 48 |       code: 'VOD1410',
 49 |       name: 'Akshay Patel',
 50 |       salary: 3000
 51 |     },
 52 |     {
 53 |       id: 2,
 54 |       code: 'VOD1710',
 55 |       name: 'Panth Patel',
 56 |       salary: 1500
 57 |     },
 58 |     {
 59 |       id: 2,
 60 |       code: 'VOD0408',
 61 |       name: 'Satish Patel',
 62 |       salary: 5000
 63 |     }
 64 |   ];
 65 | 
 66 |   performFilter(filterBy: string): IEmployee[] {
 67 |     filterBy = filterBy.toLocaleLowerCase();
 68 |     return this.employees.filter((employee: IEmployee) =>
 69 |       employee.name.toLocaleLowerCase().includes(filterBy)
 70 |     );
 71 |   }
 72 | }
 73 | ```
 74 | employee-component.component.html
 75 | 
 76 | ```html
 77 | <div>
 78 |   <div>
 79 |     <input type="text" [(ngModel)]="listFilter" />
 80 |   </div>
 81 |   <br />
 82 |   <div>
 83 |     Filter By: {{listFilter}}
 84 |   </div>
 85 |   <div>
 86 |     <table>
 87 |       <thead>
 88 |         <td>Id</td>
 89 |         <td>Code</td>
 90 |         <td>Name</td>
 91 |         <td>Salary</td>
 92 |       </thead>
 93 |       <tr *ngFor="let employee of filteredEmployees">
 94 |         <td>{{employee.id}}</td>
 95 |         <td>{{employee.code}}</td>
 96 |         <td>{{employee.name}}</td>
 97 |         <td>{{employee.salary}}</td>
 98 |       </tr>
 99 |     </table>
100 |   </div>
101 | </div>
102 | ```
103 | 
104 | app.module.ts
105 | 
106 | ```js
107 | import { NgModule } from '@angular/core';
108 | import { BrowserModule } from '@angular/platform-browser';
109 | import { FormsModule } from '@angular/forms';
110 | 
111 | import { AppComponent } from './app.component';
112 | import { employeeComponentComponent } from './employee-component/employee-component.component';
113 | 
114 | @NgModule({
115 |   imports: [BrowserModule, FormsModule],
116 |   declarations: [AppComponent, employeeComponentComponent],
117 |   bootstrap: [AppComponent]
118 | })
119 | export class AppModule {}
120 | ```
121 | 
122 | app.component.html
123 | 
124 | ```html
125 | <app-employee-component></app-employee-component>
126 | ```
127 | 
128 | 
129 | 


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


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