├── .gitignore ├── .vscode └── settings.json ├── Angular-Demo └── ecomApp │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── .vscode │ └── settings.json │ ├── README.md │ ├── angular.json │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── comment │ │ │ ├── comment.component.html │ │ │ ├── comment.component.scss │ │ │ ├── comment.component.spec.ts │ │ │ ├── comment.component.ts │ │ │ ├── comment.service.spec.ts │ │ │ ├── comment.service.ts │ │ │ └── employee.ts │ │ ├── container │ │ │ ├── container.component.html │ │ │ ├── container.component.scss │ │ │ ├── container.component.spec.ts │ │ │ └── container.component.ts │ │ ├── header │ │ │ ├── header.component.html │ │ │ ├── header.component.scss │ │ │ ├── header.component.spec.ts │ │ │ └── header.component.ts │ │ ├── injection-token │ │ │ ├── app.config.token.ts │ │ │ ├── app.config.ts │ │ │ └── localstorgae.token.ts │ │ ├── logger │ │ │ ├── logger.service.spec.ts │ │ │ └── logger.service.ts │ │ ├── order │ │ │ ├── order.component.html │ │ │ ├── order.component.scss │ │ │ ├── order.component.spec.ts │ │ │ └── order.component.ts │ │ └── product │ │ │ ├── product-list │ │ │ ├── product-list.component.html │ │ │ ├── product-list.component.scss │ │ │ ├── product-list.component.spec.ts │ │ │ └── product-list.component.ts │ │ │ ├── product.component.html │ │ │ ├── product.component.scss │ │ │ ├── product.component.spec.ts │ │ │ ├── product.component.ts │ │ │ ├── product.ts │ │ │ ├── rxjx-demo │ │ │ └── rxjs-demo.ts │ │ │ └── services │ │ │ ├── new-product.service.spec.ts │ │ │ ├── new-product.service.ts │ │ │ ├── product.service.spec.ts │ │ │ └── product.service.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tsconfig.spec.json ├── README.md └── typescript-demo ├── class.ts ├── datatypes.ts ├── decorator.ts ├── function.ts ├── interfaces.ts ├── package-lock.json ├── package.json └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | typescript-demo/*.js 3 | **/dist -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#2f7c47", 4 | "activityBar.activeBorder": "#422c74", 5 | "activityBar.background": "#2f7c47", 6 | "activityBar.foreground": "#e7e7e7", 7 | "activityBar.inactiveForeground": "#e7e7e799", 8 | "activityBarBadge.background": "#422c74", 9 | "activityBarBadge.foreground": "#e7e7e7", 10 | "statusBar.background": "#215732", 11 | "statusBar.foreground": "#e7e7e7", 12 | "statusBarItem.hoverBackground": "#2f7c47", 13 | "titleBar.activeBackground": "#215732", 14 | "titleBar.activeForeground": "#e7e7e7", 15 | "titleBar.inactiveBackground": "#21573299", 16 | "titleBar.inactiveForeground": "#e7e7e799" 17 | }, 18 | "peacock.color": "#215732" 19 | } -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#fa1b49", 4 | "activityBar.activeBorder": "#155e02", 5 | "activityBar.background": "#fa1b49", 6 | "activityBar.foreground": "#e7e7e7", 7 | "activityBar.inactiveForeground": "#e7e7e799", 8 | "activityBarBadge.background": "#155e02", 9 | "activityBarBadge.foreground": "#e7e7e7", 10 | "statusBar.background": "#dd0531", 11 | "statusBar.foreground": "#e7e7e7", 12 | "statusBarItem.hoverBackground": "#fa1b49", 13 | "titleBar.activeBackground": "#dd0531", 14 | "titleBar.activeForeground": "#e7e7e7", 15 | "titleBar.inactiveBackground": "#dd053199", 16 | "titleBar.inactiveForeground": "#e7e7e799" 17 | }, 18 | "peacock.color": "#dd0531" 19 | } -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/README.md: -------------------------------------------------------------------------------- 1 | # EcomApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.0-rc.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "cli": { 4 | "analytics": "87cd09de-98dc-47fd-aa8d-46bc8dd744b7" 5 | }, 6 | "version": 1, 7 | "newProjectRoot": "projects", 8 | "projects": { 9 | "ecomApp": { 10 | "projectType": "application", 11 | "schematics": { 12 | "@schematics/angular:component": { 13 | "style": "scss" 14 | }, 15 | "@schematics/angular:application": { 16 | "strict": true 17 | } 18 | }, 19 | "root": "", 20 | "sourceRoot": "src", 21 | "prefix": "ecom", 22 | "architect": { 23 | "build": { 24 | "builder": "@angular-devkit/build-angular:browser", 25 | "options": { 26 | "outputPath": "dist/ecomApp", 27 | "index": "src/index.html", 28 | "main": "src/main.ts", 29 | "polyfills": "src/polyfills.ts", 30 | "tsConfig": "tsconfig.app.json", 31 | "inlineStyleLanguage": "scss", 32 | "assets": [ 33 | "src/favicon.ico", 34 | "src/assets" 35 | ], 36 | "styles": [ 37 | "src/styles.scss" 38 | ], 39 | "scripts": [] 40 | }, 41 | "configurations": { 42 | "production": { 43 | "budgets": [ 44 | { 45 | "type": "initial", 46 | "maximumWarning": "500kb", 47 | "maximumError": "1mb" 48 | }, 49 | { 50 | "type": "anyComponentStyle", 51 | "maximumWarning": "2kb", 52 | "maximumError": "4kb" 53 | } 54 | ], 55 | "fileReplacements": [ 56 | { 57 | "replace": "src/environments/environment.ts", 58 | "with": "src/environments/environment.prod.ts" 59 | } 60 | ], 61 | "outputHashing": "all" 62 | }, 63 | "development": { 64 | "buildOptimizer": false, 65 | "optimization": false, 66 | "vendorChunk": true, 67 | "extractLicenses": false, 68 | "sourceMap": true, 69 | "namedChunks": true 70 | } 71 | }, 72 | "defaultConfiguration": "production" 73 | }, 74 | "serve": { 75 | "builder": "@angular-devkit/build-angular:dev-server", 76 | "configurations": { 77 | "production": { 78 | "browserTarget": "ecomApp:build:production" 79 | }, 80 | "development": { 81 | "browserTarget": "ecomApp:build:development" 82 | } 83 | }, 84 | "defaultConfiguration": "development" 85 | }, 86 | "extract-i18n": { 87 | "builder": "@angular-devkit/build-angular:extract-i18n", 88 | "options": { 89 | "browserTarget": "ecomApp:build" 90 | } 91 | }, 92 | "test": { 93 | "builder": "@angular-devkit/build-angular:karma", 94 | "options": { 95 | "main": "src/test.ts", 96 | "polyfills": "src/polyfills.ts", 97 | "tsConfig": "tsconfig.spec.json", 98 | "karmaConfig": "karma.conf.js", 99 | "inlineStyleLanguage": "scss", 100 | "assets": [ 101 | "src/favicon.ico", 102 | "src/assets" 103 | ], 104 | "styles": [ 105 | "src/styles.scss" 106 | ], 107 | "scripts": [] 108 | } 109 | } 110 | } 111 | } 112 | }, 113 | "defaultProject": "ecomApp" 114 | } 115 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/ecomApp'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecom-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "~12.0.0-rc.0", 14 | "@angular/common": "~12.0.0-rc.0", 15 | "@angular/compiler": "~12.0.0-rc.0", 16 | "@angular/core": "~12.0.0-rc.0", 17 | "@angular/forms": "~12.0.0-rc.0", 18 | "@angular/localize": "~12.0.0-rc.0", 19 | "@angular/platform-browser": "~12.0.0-rc.0", 20 | "@angular/platform-browser-dynamic": "~12.0.0-rc.0", 21 | "@angular/router": "~12.0.0-rc.0", 22 | "@ng-bootstrap/ng-bootstrap": "^9.1.0", 23 | "bootstrap": "^4.5.0", 24 | "rxjs": "~6.6.0", 25 | "tslib": "^2.1.0", 26 | "zone.js": "~0.11.4" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "~12.0.0-rc.0", 30 | "@angular/cli": "~12.0.0-rc.0", 31 | "@angular/compiler-cli": "~12.0.0-rc.0", 32 | "@types/jasmine": "~3.6.0", 33 | "@types/node": "^12.11.1", 34 | "jasmine-core": "~3.7.0", 35 | "jasmine-spec-reporter": "~7.0.0", 36 | "karma": "~6.3.0", 37 | "karma-chrome-launcher": "~3.1.0", 38 | "karma-coverage": "~2.0.3", 39 | "karma-jasmine": "~4.0.0", 40 | "karma-jasmine-html-reporter": "^1.5.0", 41 | "ts-node": "~9.1.1", 42 | "typescript": "~4.2.3" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

Hello World!

2 | 3 | 14 | 15 | 16 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/app/app.component.scss -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | }); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'ecomApp'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.componentInstance; 26 | expect(app.title).toEqual('ecomApp'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('ecomApp app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ecom-root', 5 | templateUrl: './app.component.html', 6 | // template: `

Hello World

7 | //
from Template
`, 8 | styleUrls: ['./app.component.scss'] 9 | }) 10 | export class AppComponent { 11 | title = 'ecomApp'; 12 | 13 | 14 | role= 'Admin'; 15 | 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { ProductComponent } from './product/product.component'; 7 | import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 8 | import { ProductListComponent } from './product/product-list/product-list.component'; 9 | import { OrderComponent } from './order/order.component'; 10 | import { ContainerComponent } from './container/container.component'; 11 | import { HeaderComponent } from './header/header.component'; 12 | import { CommentComponent } from './comment/comment.component'; 13 | import { ProductService } from './product/services/product.service'; 14 | import { APPCONFIG, CONFIGVALUES } from './injection-token/app.config.token'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | ProductComponent, 20 | ProductListComponent, 21 | OrderComponent, 22 | ContainerComponent, 23 | HeaderComponent, 24 | CommentComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | AppRoutingModule, 29 | NgbModule 30 | ], 31 | providers: [ 32 | { 33 | provide : APPCONFIG, 34 | useValue : CONFIGVALUES 35 | } 36 | ], 37 | bootstrap: [AppComponent] 38 | }) 39 | export class AppModule { } 40 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/comment.component.html: -------------------------------------------------------------------------------- 1 | 47 | 48 | {{comment}} 49 | 50 | 51 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/comment.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/app/comment/comment.component.scss -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/comment.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CommentComponent } from './comment.component'; 4 | 5 | describe('CommentComponent', () => { 6 | let component: CommentComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CommentComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CommentComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/comment.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, SkipSelf } from '@angular/core'; 2 | import { ProductService } from '../product/services/product.service'; 3 | import { CommentService } from './comment.service'; 4 | import { Util } from './employee'; 5 | 6 | @Component({ 7 | selector: 'ecom-comment', 8 | templateUrl: './comment.component.html', 9 | styleUrls: ['./comment.component.scss'], 10 | host: { 11 | class: 'ecom-comment', 12 | }, 13 | }) 14 | export class CommentComponent implements OnInit { 15 | comments = [1, 2, 3]; 16 | 17 | comment = ''; 18 | 19 | // commentService = new CommentService(); 20 | 21 | constructor( 22 | private commentService: CommentService, 23 | @SkipSelf() private productService: ProductService 24 | ) {} 25 | 26 | ngOnInit(): void { 27 | // this.util.add(10,5); 28 | this.comment = this.commentService.getComment(); 29 | } 30 | 31 | addProduct() { 32 | this.productService.addProduct( 33 | { id: 4, name: 'LG', mfd: new Date('1-Jan-2017'), price: 25000 }, 34 | ) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/comment.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { CommentService } from './comment.service'; 4 | 5 | describe('CommentService', () => { 6 | let service: CommentService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(CommentService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/comment.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root', 5 | }) 6 | export class CommentService { 7 | constructor() {} 8 | 9 | getComment() { 10 | return 'Hi!'; 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/comment/employee.ts: -------------------------------------------------------------------------------- 1 | export class Util { 2 | 3 | constructor(num1: number) { 4 | 5 | } 6 | 7 | add(num1: number, num2: number): number { 8 | return num1 + num2; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/container/container.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/container/container.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/app/container/container.component.scss -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/container/container.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContainerComponent } from './container.component'; 4 | 5 | describe('ContainerComponent', () => { 6 | let component: ContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ContainerComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/container/container.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterContentInit, 3 | Component, 4 | ContentChild, 5 | ContentChildren, 6 | Host, 7 | OnInit, 8 | QueryList, 9 | } from '@angular/core'; 10 | import { OrderComponent } from '../order/order.component'; 11 | import { ProductComponent } from '../product/product.component'; 12 | import { ProductService } from '../product/services/product.service'; 13 | 14 | @Component({ 15 | selector: 'ecom-container', 16 | templateUrl: './container.component.html', 17 | styleUrls: ['./container.component.scss'], 18 | host : { 19 | 'class' : 'ecom-container' 20 | }, 21 | providers: [ProductService] 22 | }) 23 | export class ContainerComponent implements OnInit, AfterContentInit { 24 | @ContentChild(ProductComponent) productComponent!: ProductComponent; 25 | 26 | @ContentChildren(OrderComponent) orderComponent!: QueryList; 27 | 28 | constructor(@Host() private productService: ProductService) {} 29 | 30 | ngOnInit(): void { 31 | console.log(this.productComponent); 32 | } 33 | 34 | ngAfterContentInit() { 35 | console.log('After content is called'); 36 | 37 | console.log(this.productComponent); 38 | console.log(this.orderComponent); 39 | for(let order of this.orderComponent) { 40 | order.orderTitle = 'New Title'; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/header/header.component.html: -------------------------------------------------------------------------------- 1 |

2 | {{header}} 3 |

4 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/header/header.component.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: aqua; 3 | color: black; 4 | } 5 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ecom-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.scss'], 7 | encapsulation: ViewEncapsulation.ShadowDom 8 | }) 9 | export class HeaderComponent implements OnInit { 10 | 11 | header: string =''; 12 | 13 | constructor() { } 14 | 15 | ngOnInit(): void { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/injection-token/app.config.token.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | import { environment } from '../../environments/environment'; 3 | import { AppConfig } from './app.config'; 4 | 5 | export const APPCONFIG = new InjectionToken(''); 6 | 7 | export const CONFIGVALUES: AppConfig = { 8 | apiKey: environment.stripe_api_key, 9 | backendUrl: '', 10 | }; 11 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/injection-token/app.config.ts: -------------------------------------------------------------------------------- 1 | export interface AppConfig { 2 | apiKey : string; 3 | backendUrl: string; 4 | } 5 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/injection-token/localstorgae.token.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export const localStorageToken = new InjectionToken('local storage', { 4 | providedIn: 'root', 5 | factory() { 6 | return localStorage; 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/logger/logger.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { LoggerService } from './logger.service'; 4 | 5 | describe('LoggerService', () => { 6 | let service: LoggerService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(LoggerService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/logger/logger.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class LoggerService { 5 | constructor() {} 6 | 7 | log(log: string) { 8 | console.log(log); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/order/order.component.html: -------------------------------------------------------------------------------- 1 |

order works!

2 |

{{orderTitle}}

3 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/order/order.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/app/order/order.component.scss -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/order/order.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { OrderComponent } from './order.component'; 4 | 5 | describe('OrderComponent', () => { 6 | let component: OrderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ OrderComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(OrderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/order/order.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { NewProductService } from '../product/services/new-product.service'; 3 | 4 | @Component({ 5 | selector: 'ecom-order', 6 | templateUrl: './order.component.html', 7 | styleUrls: ['./order.component.scss'] 8 | }) 9 | export class OrderComponent implements OnInit { 10 | 11 | orderTitle = 'Order Places'; 12 | 13 | constructor(private newProductService: NewProductService) { } 14 | 15 | ngOnInit(): void { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product-list/product-list.component.html: -------------------------------------------------------------------------------- 1 |

{{title}}

2 | 3 |

Total Price : {{productSum}}

4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 |
IndexEvenOddIdNameMfdPriceAction
{{ i + 1 | percent}}{{ e }}{{ o }}{{ product.id }}{{ product.mfd | date: 'medium' | uppercase }}{{ product.price | currency: 'INR' }} 31 | 32 |
36 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product-list/product-list.component.scss: -------------------------------------------------------------------------------- 1 | .even { 2 | background-color: steelblue; 3 | color: white; 4 | } 5 | 6 | .odd { 7 | background-color: blueviolet; 8 | color: white; 9 | } 10 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product-list/product-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductListComponent } from './product-list.component'; 4 | 5 | describe('ProductListComponent', () => { 6 | let component: ProductListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ProductListComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product-list/product-list.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Input, 4 | OnInit, 5 | Output, 6 | EventEmitter, 7 | OnChanges, 8 | SimpleChanges, 9 | ChangeDetectionStrategy, 10 | OnDestroy, 11 | } from '@angular/core'; 12 | import { Product } from '../product'; 13 | 14 | @Component({ 15 | selector: 'ecom-product-list', 16 | templateUrl: './product-list.component.html', 17 | styleUrls: ['./product-list.component.scss'], 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | }) 20 | export class ProductListComponent implements OnInit, OnChanges, OnDestroy { 21 | @Input() products: Product[] = []; 22 | 23 | @Input() title: string = ''; 24 | 25 | @Output() selectProduct = new EventEmitter(); 26 | 27 | productSum = 0; 28 | 29 | constructor() {} 30 | 31 | ngOnChanges(changes: SimpleChanges): void { 32 | if (changes.products) { 33 | this.productSum = changes.products.currentValue 34 | .map((product: Product) => product.price) 35 | .reduce((a: number, b: number) => a + b); 36 | } 37 | } 38 | 39 | ngOnInit(): void {} 40 | 41 | select(product: Product) { 42 | this.selectProduct.emit(product); 43 | } 44 | 45 | trackById(i: number, data: Product) { 46 | return data.id; 47 | } 48 | 49 | ngOnDestroy() { 50 | console.log('this component is destroyed'); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product.component.html: -------------------------------------------------------------------------------- 1 | 2 |

{{ title }}

3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 
23 |   {{ selectedProduct | json }}
24 |
25 | 26 | 27 | 28 | 33 | 34 | 35 | 36 |

This table is hidden click on toggle to see the content

37 | 38 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/app/product/product.component.scss -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductComponent } from './product.component'; 4 | 5 | describe('ProductComponent', () => { 6 | let component: ProductComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ProductComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewChecked, 3 | AfterViewInit, 4 | Component, 5 | DoCheck, 6 | ElementRef, 7 | OnDestroy, 8 | OnInit, 9 | Optional, 10 | QueryList, 11 | Self, 12 | ViewChild, 13 | ViewChildren, 14 | ViewEncapsulation, 15 | } from '@angular/core'; 16 | import { Subscription } from 'rxjs'; 17 | import { HeaderComponent } from '../header/header.component'; 18 | import { LoggerService } from '../logger/logger.service'; 19 | import { Product } from './product'; 20 | import { ProductServiceRxJs } from './rxjx-demo/rxjs-demo'; 21 | import { ProductService } from './services/product.service'; 22 | 23 | @Component({ 24 | // interpolation: ['[', ']'], 25 | selector: 'ecom-product', 26 | templateUrl: './product.component.html', 27 | styleUrls: ['./product.component.scss'], 28 | encapsulation: ViewEncapsulation.None, 29 | host: { 30 | class: 'ecom-product', 31 | }, 32 | // providers: [ProductService], 33 | }) 34 | export class ProductComponent 35 | implements OnInit, DoCheck, AfterViewInit, AfterViewChecked, OnDestroy 36 | { 37 | title = 'Product Information'; 38 | 39 | productName = 'One Plus 9'; 40 | 41 | visible = false; 42 | 43 | hidden = true; 44 | 45 | selectedProduct: Partial = {}; 46 | 47 | productList: Product[] = []; 48 | 49 | header = 'Product List'; 50 | 51 | previousValue = ''; 52 | 53 | currentValue = ''; 54 | 55 | @ViewChild(HeaderComponent) 56 | headerComponent!: HeaderComponent; 57 | 58 | @ViewChildren(HeaderComponent) 59 | headerChildrenComponent!: QueryList; 60 | 61 | subscription!: Subscription; 62 | 63 | @ViewChild('apiError', { static: true }) errorDiv!: ElementRef; 64 | constructor( 65 | private productService: ProductServiceRxJs, 66 | @Optional() private logService: LoggerService 67 | ) {} 68 | 69 | ngOnInit() { 70 | // this.productService.add(10,5); 71 | // this.logService? this.logService.log('test') 72 | console.log(this.headerComponent); 73 | console.log(this.errorDiv); 74 | // this.productList = 75 | this.subscription = this.productService 76 | .getProducts() 77 | .subscribe((data) => console.log(data)); 78 | } 79 | 80 | ngDoCheck() { 81 | // console.log('do check is called'); 82 | } 83 | 84 | ngAfterViewInit(): void { 85 | this.previousValue = this.headerComponent.header; 86 | this.headerChildrenComponent.last.header = 'This is last Header Component'; 87 | } 88 | 89 | ngAfterViewChecked(): void { 90 | this.currentValue = 'New Header'; 91 | if (this.previousValue != this.currentValue) { 92 | this.headerComponent.header = this.currentValue; 93 | } 94 | } 95 | 96 | toggle() { 97 | this.visible = !this.visible; 98 | this.errorDiv.nativeElement.innerText = 99 | 'There is an error making API call, please retry.'; 100 | } 101 | 102 | toggleTable() { 103 | this.hidden = !this.hidden; 104 | this.header = 'New Product List'; 105 | } 106 | 107 | loadProduct() {} 108 | 109 | addProduct() { 110 | this.productList = [ 111 | ...this.productList, 112 | { 113 | id: 4, 114 | name: 'Xiomi', 115 | mfd: new Date('1-Feb-2020'), 116 | price: 20000, 117 | }, 118 | ]; 119 | // this.productList.push({ 120 | // id: 4, 121 | // name: 'Xiomi', 122 | // mfd: new Date('1-Feb-2020'), 123 | // price: 20000, 124 | // }); 125 | } 126 | 127 | deleteProduct(product: Product) { 128 | this.selectedProduct = product; 129 | } 130 | 131 | ngOnDestroy() { 132 | this.subscription?.unsubscribe(); 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/product.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: number; 3 | name: string; 4 | mfd: Date; 5 | price: number; 6 | } 7 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/rxjx-demo/rxjs-demo.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { of } from 'rxjs'; 3 | import { tap } from 'rxjs/operators'; 4 | import { Product } from '../product'; 5 | 6 | @Injectable({ 7 | providedIn: 'root', 8 | }) 9 | export class ProductServiceRxJs { 10 | products: Product[] = [ 11 | { id: 1, name: 'Iphone X', mfd: new Date('1-Jan-2021'), price: 50000 }, 12 | { id: 2, name: 'one plus 8', mfd: new Date('1-Jan-2019'), price: 40000 }, 13 | { id: 3, name: 'Samsung', mfd: new Date('1-Jan-2018'), price: 30000 }, 14 | ]; 15 | 16 | getProducts() { 17 | return of(this.products); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/services/new-product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { NewProductService } from './new-product.service'; 4 | 5 | describe('NewProductService', () => { 6 | let service: NewProductService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(NewProductService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/services/new-product.service.ts: -------------------------------------------------------------------------------- 1 | import { Inject, Injectable } from '@angular/core'; 2 | import { localStorageToken } from 'src/app/injection-token/localstorgae.token'; 3 | import { AppConfig } from '../../injection-token/app.config'; 4 | import { APPCONFIG } from '../../injection-token/app.config.token'; 5 | import { Product } from '../product'; 6 | 7 | @Injectable({ 8 | providedIn: 'root', 9 | }) 10 | export class NewProductService { 11 | products: Product[] = [ 12 | { id: 1, name: 'IPad M1', mfd: new Date('1-Jan-2021'), price: 500000 }, 13 | { id: 2, name: 'ChromeBook', mfd: new Date('1-Jan-2019'), price: 400000 }, 14 | { id: 3, name: 'Duo', mfd: new Date('1-Jan-2018'), price: 300000 }, 15 | ]; 16 | 17 | constructor( 18 | @Inject(APPCONFIG) private apiService: AppConfig, 19 | @Inject(localStorageToken) private localStorage: any 20 | ) { 21 | console.log('new productservice instance'); 22 | console.log(apiService.apiKey); 23 | console.log(localStorage.setItem('apiKey', apiService.apiKey)); 24 | 25 | console.log(localStorage.getItem('apiKey')); 26 | } 27 | 28 | addProduct(product: Product) { 29 | this.products = [...this.products, product]; 30 | } 31 | 32 | getProducts(): Product[] { 33 | return this.products; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/services/product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductService } from './product.service'; 4 | 5 | describe('ProductService', () => { 6 | let service: ProductService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(ProductService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/app/product/services/product.service.ts: -------------------------------------------------------------------------------- 1 | import { Inject, Injectable } from '@angular/core'; 2 | import { Product } from '../product'; 3 | import { NewProductService } from './new-product.service'; 4 | import { APPCONFIG } from '../../injection-token/app.config.token'; 5 | import { AppConfig } from '../../injection-token/app.config'; 6 | 7 | @Injectable({ 8 | providedIn: 'root', 9 | useExisting: NewProductService, 10 | }) 11 | export class ProductService { 12 | products: Product[] = [ 13 | { id: 1, name: 'Iphone X', mfd: new Date('1-Jan-2021'), price: 50000 }, 14 | { id: 2, name: 'one plus 8', mfd: new Date('1-Jan-2019'), price: 40000 }, 15 | { id: 3, name: 'Samsung', mfd: new Date('1-Jan-2018'), price: 30000 }, 16 | ]; 17 | 18 | constructor() { 19 | console.log('new product instance'); 20 | } 21 | 22 | addProduct(product: Product) { 23 | this.products = [...this.products, product]; 24 | } 25 | 26 | // add(num1: number, num2: number): number { 27 | // return num1 + num2; 28 | // } 29 | 30 | getProducts(): Product[] { 31 | return this.products; 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | stripe_api_key: 'gdfgdfgdf' 4 | }; 5 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | stripe_api_key: 'gdfgdfgdf' 8 | }; 9 | 10 | /* 11 | * For easier debugging in development mode, you can import the following file 12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 13 | * 14 | * This import should be commented out in production mode because it will have a negative impact 15 | * on performance if an error is thrown. 16 | */ 17 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 18 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santoshyadavdev/angular-getting-started/247217291dcaba12bc4be99540fb20048c5326ec/Angular-Demo/ecomApp/src/favicon.ico -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EcomApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /*************************************************************************************************** 2 | * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. 3 | */ 4 | import '@angular/localize/init'; 5 | /** 6 | * This file includes polyfills needed by Angular and is loaded before the app. 7 | * You can add your own extra polyfills to this file. 8 | * 9 | * This file is divided into 2 sections: 10 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 11 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 12 | * file. 13 | * 14 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 15 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 16 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 17 | * 18 | * Learn more in https://angular.io/guide/browser-support 19 | */ 20 | 21 | /*************************************************************************************************** 22 | * BROWSER POLYFILLS 23 | */ 24 | 25 | /** 26 | * IE11 requires the following for NgClass support on SVG elements 27 | */ 28 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 29 | 30 | /** 31 | * Web Animations `@angular/platform-browser/animations` 32 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 33 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 34 | */ 35 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 36 | 37 | /** 38 | * By default, zone.js will patch all possible macroTask and DomEvents 39 | * user can disable parts of macroTask/DomEvents patch by setting following flags 40 | * because those flags need to be set before `zone.js` being loaded, and webpack 41 | * will put import in the top of bundle, so user need to create a separate file 42 | * in this directory (for example: zone-flags.ts), and put the following flags 43 | * into that file, and then add the following code before importing zone.js. 44 | * import './zone-flags'; 45 | * 46 | * The flags allowed in zone-flags.ts are listed here. 47 | * 48 | * The following flags will work for all browsers. 49 | * 50 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 51 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 52 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 53 | * 54 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 55 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 56 | * 57 | * (window as any).__Zone_enable_cross_context_check = true; 58 | * 59 | */ 60 | 61 | /*************************************************************************************************** 62 | * Zone JS is required by default for Angular itself. 63 | */ 64 | import 'zone.js'; // Included with Angular CLI. 65 | 66 | 67 | /*************************************************************************************************** 68 | * APPLICATION IMPORTS 69 | */ 70 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | /* Importing Bootstrap SCSS file. */ 4 | @import '~bootstrap/scss/bootstrap'; 5 | h1 { 6 | background-color: tomato; 7 | color: white; 8 | } 9 | 10 | .ecom-product h1 { 11 | background-color: blue; 12 | color: white; 13 | } 14 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "sourceMap": true, 12 | "declaration": false, 13 | "downlevelIteration": true, 14 | "experimentalDecorators": true, 15 | "moduleResolution": "node", 16 | "importHelpers": true, 17 | "target": "es2017", 18 | "module": "es2020", 19 | "lib": [ 20 | "es2018", 21 | "dom" 22 | ] 23 | }, 24 | "angularCompilerOptions": { 25 | "enableI18nLegacyMessageIdFormat": false, 26 | "strictInjectionParameters": true, 27 | "strictInputAccessModifiers": true, 28 | "strictTemplates": true 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Angular-Demo/ecomApp/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Getting Started 2 | 3 | This repository contains the code and contents related to Angular Getting Started Course, available on YouTube Channel. Apart from Angular, the course will contain some basics of Git. 4 | 5 | The Course contains, below Topics: 6 | 7 | 8 | # Setup Development Environment 9 | * Installing Nodejs 10 | * Installing VSCode 11 | * Why Nodejs/npm 12 | * Installing Git 13 | 14 | # Typescript Basics 15 | * Introduction 16 | * Transpilation 17 | * Why Typescript 18 | * Data Types 19 | - Number 20 | - String 21 | - Boolean 22 | - Arrays 23 | - any 24 | - Tuple 25 | - enum 26 | - unknown 27 | * Functions 28 | * Classes 29 | * Interfaces 30 | * Union and Intersection Types 31 | * Generics 32 | * Literal Types 33 | * ES Modules 34 | * Typescript Config Files 35 | 36 | # Angular 37 | 38 | # Setup 39 | * Installing Angular CLI 40 | * Create New Empty Workspace using CLI 41 | * Create an Workspace with default App 42 | * Workspace Walkthrough 43 | * Introduction to mono-repo 44 | 45 | # Template Syntax Basics 46 | * Component Introduction 47 | * Create your first component 48 | * Binding Syntax 49 | - Interpolation 50 | - Property Binding 51 | - Event Binding 52 | * Directives 53 | - Introduction 54 | - Structural Directives 55 | - Attribute Directives 56 | - Built-in directives 57 | - *ngIf 58 | - *ngFor 59 | - *ngSwitch 60 | - ngClass 61 | - ngStyle 62 | 63 | # Angular Architecture 64 | * Architecture 65 | * Angular Modules 66 | 67 | # Component Lifecycle Hooks and Component Communication 68 | * ngOnInit 69 | * ngOnChanges 70 | - Component Communication using Input/Output 71 | - ChangeDetection Strategy 72 | * ngDoCheck 73 | * ngAfterContentInit 74 | - Content Projection 75 | * ngAfterContentChecked 76 | * ngAfterViewInit 77 | - Component Communication ViewChild and ViewChildren 78 | * ngAfterViewChecked 79 | * ngOnDestroy 80 | 81 | # Built-in Pipes 82 | * lowercase 83 | * uppercase 84 | * titlecase 85 | * date 86 | * currency 87 | * json 88 | * percent 89 | * slice 90 | * async 91 | 92 | # View Encapsulation 93 | * Emulated 94 | * None 95 | * ShadowDom 96 | 97 | # Dependency Injection 98 | 99 | * Introduction 100 | * Provider Types 101 | - Class Bases Providers 102 | - Value Proider 103 | - factory 104 | * Creating your First Service 105 | * providedIn: 'root' | 'any' 106 | * Component Interaction using Service 107 | * Dependency Resolution 108 | * Resolution Modifiers 109 | * Injection Tokens 110 | * factories 111 | 112 | # RxJs in Angular 113 | * Introduction 114 | * Introduction to streams 115 | * Creating Observables using from operator 116 | * Subject and BehaviorSubject 117 | * pipe in RxJs 118 | * map, filter, tap, fromEvent operators 119 | * Async pipe 120 | 121 | # Angular HTTP and Observables 122 | * Introduction 123 | * Setting up HttpClient 124 | * Using HttpClient Service 125 | - get 126 | - post 127 | - delete 128 | - put 129 | - request 130 | * shareReplay RxJs operator 131 | * Handling Error using catchError RxJs operator 132 | * Centralized ErrorHandling using ErrorHandler 133 | * Adding header to http request 134 | * Using HttpInterceptors 135 | * using APP_INITIALIZER 136 | 137 | # Angular Forms 138 | 139 | * Template Driven Forms 140 | - Setting up Template Driven Forms 141 | - Validating Forms 142 | - Submit and reset forms 143 | - Custom Pipe demo with Forms 144 | - Writing a custom directive 145 | - Writing Custom validator 146 | 147 | * Reactive Forms 148 | - Setting up Reactive Forms 149 | - Creating Form 150 | - Adding controls dynamically 151 | - Built-in validations 152 | - Submitting and reset 153 | - patchValue. setValue 154 | - valueChanges form property 155 | - Using mergeMap, switchMap, exhaustMap RxJs operators 156 | - Writing Custom validations 157 | 158 | # Angular Modules 159 | * Creating Angular Modules 160 | * Sharing component/directives/pipes using Modules 161 | 162 | # Angular Router 163 | 164 | * Introduction 165 | * Setup Router 166 | * Default Route 167 | * Wild card route 168 | * Configure Dynamic Routes 169 | * Pass data to Route config 170 | * Using ActivateRoute Service 171 | * Using pluck RxJs operators 172 | * Using Router Service for Naviagtion 173 | * Splitting Route config to feature 174 | * Nested Routing with Child routes 175 | * Lazy loading/code splitting 176 | * Route Guards 177 | - canActivate 178 | - canActivateChild 179 | - canDeactivate 180 | - canLoad 181 | - Resolve 182 | 183 | # Angular Libraries 184 | * Creating an Angular Library 185 | * Building and using it in App 186 | * Publishing an Library 187 | * Using an published library 188 | 189 | # Anguar CLI 190 | * tslint 191 | * tslint to eslint migration 192 | * Running tests 193 | * Creating builds 194 | * Configure build for multiple configuration 195 | * ng update 196 | * Deploying your Angular App 197 | 198 | # PWA 199 | * Introduction 200 | * Making your App PWA 201 | * Deploying and Testing the PWA 202 | -------------------------------------------------------------------------------- /typescript-demo/class.ts: -------------------------------------------------------------------------------- 1 | import { AddressUtil, Address } from "./interfaces"; 2 | 3 | // import * as addr from './interfaces'; 4 | 5 | class Product implements AddressUtil { 6 | private _id: number; 7 | name: string; 8 | price: number; 9 | categoty: string; 10 | address: Address; 11 | 12 | set id(id: number) { 13 | this._id = id; 14 | } 15 | 16 | get id(): number { 17 | return this._id; 18 | } 19 | 20 | constructor(name: string, price: number, category: string) { 21 | this._id = 0; 22 | this.name = name; 23 | this.price = price; 24 | this.categoty = category; 25 | this.address = { id: 0 }; 26 | } 27 | add(num1: number, num2: number): number { 28 | return num1 + num2; 29 | } 30 | 31 | getproductWithPrice() { 32 | return `${this.name} costs ${this.price}`; 33 | } 34 | } 35 | 36 | let mobilePhone = new Product("One Plus 9", 50000, "Mobile Phones"); 37 | 38 | mobilePhone.id = 10; 39 | 40 | console.log(mobilePhone); 41 | console.log(mobilePhone.getproductWithPrice()); 42 | 43 | class Mobile extends Product { 44 | // constructor(name: string, price: number, category: string) { 45 | // super(name, price, category); 46 | // } 47 | 48 | getproductWithPrice() { 49 | return super.getproductWithPrice(); 50 | } 51 | } 52 | 53 | let applePhones = new Mobile("Apple 11", 10000, "Mobile Phones"); 54 | console.log(applePhones.getproductWithPrice()); 55 | console.log(applePhones); 56 | 57 | 58 | class Base { 59 | data: T[]; 60 | 61 | constructor() { 62 | this.data = []; 63 | } 64 | } 65 | 66 | class Department extends Base
{ 67 | data: Address[]; 68 | 69 | constructor() { 70 | super(); 71 | this.data = []; 72 | } 73 | 74 | } 75 | -------------------------------------------------------------------------------- /typescript-demo/datatypes.ts: -------------------------------------------------------------------------------- 1 | import { Employees } from "./interfaces"; 2 | 3 | let fname: string; 4 | 5 | fname = "test"; 6 | 7 | console.log(fname.length); 8 | 9 | console.log(fname.startsWith("e")); 10 | 11 | let age: number; 12 | 13 | age = 10; 14 | 15 | // let result = parseInt(fname); 16 | 17 | // console.log(result); 18 | 19 | let isHidden: boolean = false; 20 | 21 | console.log(isHidden); 22 | 23 | // let employee; 24 | 25 | // employee = "test"; 26 | // employee = 10; 27 | // employee = ["a"]; 28 | 29 | let employee: string[]; 30 | 31 | employee = ["test", "test1", "test2", "test1"]; 32 | 33 | let employeeJoin = employee.join(","); 34 | 35 | console.log(employeeJoin); 36 | 37 | let emp = employee.find((emp) => emp === "tests"); 38 | 39 | let emps = employee.filter((emp) => emp === "test1"); 40 | 41 | let testEmp = employee.filter((emp) => emp.includes("test")); 42 | 43 | console.log(emp); 44 | 45 | console.log(emps); 46 | 47 | console.table(testEmp); 48 | 49 | let numbers: number[]; 50 | 51 | numbers = [2, 4, 8]; 52 | 53 | numbers.push(6); 54 | console.log(numbers); 55 | 56 | let sortedNumbers = numbers.sort(); 57 | 58 | console.table(sortedNumbers); 59 | 60 | let numberOp = numbers.map((num) => num * 2).filter((num) => num > 4); 61 | 62 | let numberSum = numberOp.reduce((a, b) => a + b); 63 | 64 | console.table(numberOp); 65 | 66 | console.log(numberSum); 67 | 68 | for (let emp of employee) { 69 | console.log(emp); 70 | } 71 | 72 | numbers = [...numbers, 6]; 73 | 74 | console.log(numbers); 75 | 76 | numbers = [6, ...numbers]; 77 | console.log(numbers); 78 | 79 | // Array destructuring 80 | 81 | // let emp1 = employee[0]; 82 | // let emp2 = employee[1]; 83 | 84 | // let emp3 = employee.slice(2); 85 | 86 | // console.table(emp1); 87 | 88 | // console.table(emp2); 89 | 90 | // console.table(emp3); 91 | 92 | let [emp1, emp2, ...restEmp] = employee; 93 | 94 | console.table(emp1); 95 | 96 | console.table(emp2); 97 | 98 | console.table(restEmp); 99 | 100 | const enum Color { 101 | Red, 102 | Green, 103 | Blue, 104 | } 105 | 106 | let color = Color.Blue; 107 | 108 | let newNumbers: [firstNumber: number, secondNumber: number]; 109 | 110 | newNumbers = swap(10, 20); 111 | 112 | newNumbers[0]; 113 | newNumbers[1]; 114 | 115 | function swap(num1: number, num2: number): [number, number] { 116 | return [num2, num1]; 117 | } 118 | 119 | type names = string | string[]; 120 | 121 | let newName: names = ["a", "b"]; 122 | 123 | type taskStatus = "In Progress" | "Open" | "Closed"; 124 | 125 | let newTask: taskStatus = "Open"; 126 | 127 | let adam: Readonly = { 128 | id: 1, 129 | email: "test1@gmail.com", 130 | dob: new Date("11-Mar-1986"), 131 | department: "IT", 132 | name: "test1", 133 | salary: 10000, 134 | data: "", 135 | }; 136 | 137 | let { email: empemail, dob: empdbo } = adam; 138 | 139 | console.log(empemail); 140 | console.log(empdbo); 141 | 142 | // adam.salary = 20000; 143 | 144 | adam = { ...adam, salary: 20000 }; 145 | 146 | // let empemail = adam.email; 147 | // let dob = adam.dob; 148 | 149 | let ramesh: Partial = { 150 | id: 1, 151 | email: "test1@gmail.com", 152 | dob: new Date("11-Mar-1986"), 153 | department: "IT", 154 | name: "test1", 155 | // salary: 10000, 156 | data: "", 157 | }; 158 | 159 | type newEmployee = Pick; 160 | 161 | type newDepartment = Omit; 162 | 163 | -------------------------------------------------------------------------------- /typescript-demo/decorator.ts: -------------------------------------------------------------------------------- 1 | class Greeter { 2 | greeting: string; 3 | constructor(message: string) { 4 | this.greeting = message; 5 | } 6 | 7 | @enumerable(false) 8 | greet() { 9 | return "Hello, " + this.greeting; 10 | } 11 | } 12 | 13 | function enumerable(value: boolean) { 14 | return function ( 15 | target: any, 16 | propertyKey: string, 17 | descriptor: PropertyDescriptor 18 | ) { 19 | console.log(target); 20 | console.log(propertyKey); 21 | descriptor.enumerable = value; 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /typescript-demo/function.ts: -------------------------------------------------------------------------------- 1 | // named function 2 | function add(num1: number, num2: number, num3?: number): number { 3 | return num3 ? num1 + num2 + num3 : num1 + num2; 4 | } 5 | 6 | console.log(add(1, 1)); 7 | 8 | console.log(add(1, 1, 5)); 9 | 10 | // function expression 11 | const sub = function (num1: number, num2: number, num3 = 2): number { 12 | return num1 - num2 - num3; 13 | }; 14 | 15 | console.log(sub(10, 5)); 16 | 17 | console.log(sub(100, 5, 10)); 18 | 19 | // arrow function 20 | const mul = (num1: number, num2: number) => num1 * num2; 21 | 22 | console.log(mul(10, 5)); 23 | 24 | // type addition = (num1: T, num2: T) => T; 25 | 26 | // let addNumber : addition; 27 | 28 | // addNumber() 29 | 30 | // function addition(num1: T , num2: T) : T { 31 | 32 | // } 33 | 34 | -------------------------------------------------------------------------------- /typescript-demo/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface Address { 2 | id: number; 3 | addr1?: string; 4 | addr2?: string; 5 | city?: string; 6 | pin?: number; 7 | country?: string; 8 | data: T; 9 | } 10 | 11 | let address: Required> = { 12 | id: 1, 13 | addr1: "Pune", 14 | addr2: "test", 15 | city: "Pune", 16 | country: "India", 17 | pin: 400000, 18 | data: 10, 19 | }; 20 | 21 | export interface Employees extends Address { 22 | id: number; 23 | name: string; 24 | department: string; 25 | salary: number; 26 | email: string; 27 | dob: Date; 28 | addressId: Pick, "id" | "addr1">; 29 | } 30 | 31 | interface Department { 32 | id: number; 33 | name: string; 34 | } 35 | 36 | let empList: Readonly = [ 37 | { 38 | id: 1, 39 | email: "test1@gmail.com", 40 | dob: new Date("11-Mar-1986"), 41 | department: "IT", 42 | name: "test1", 43 | salary: 10000, 44 | data: "", 45 | }, 46 | { 47 | id: 2, 48 | email: "test2@gmail.com", 49 | dob: new Date("11-Mar-1980"), 50 | department: "IT", 51 | name: "test2", 52 | salary: 15000, 53 | data: "", 54 | }, 55 | { 56 | id: 3, 57 | email: "test1@gmail.com", 58 | dob: new Date("11-Mar-1990"), 59 | department: "IT", 60 | name: "test3", 61 | salary: 20000, 62 | data: "", 63 | }, 64 | ]; 65 | 66 | let newEmp = { 67 | id: 4, 68 | email: "test1@gmail.com", 69 | dob: new Date("11-Mar-1990"), 70 | department: "IT", 71 | name: "test3", 72 | salary: 20000, 73 | data: "", 74 | }; 75 | empList = [...empList, newEmp]; 76 | 77 | let findEmp = empList.filter((emp) => emp.salary > 10000); 78 | 79 | console.table(findEmp); 80 | 81 | let salarysum = empList.map((emp) => emp.salary).reduce((a, b) => a + b); 82 | 83 | console.log(salarysum); 84 | 85 | export interface AddressUtil { 86 | add(num1: number, num2: number): number; 87 | } 88 | 89 | let testUnion: Employees[] | Department; 90 | 91 | testUnion = empList; 92 | 93 | type empIntersection = Employees & Department; 94 | 95 | // let empType : empIntersection = { 96 | 97 | // } 98 | -------------------------------------------------------------------------------- /typescript-demo/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-demo", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "typescript": { 8 | "version": "4.2.4", 9 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz", 10 | "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /typescript-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "typescript": "^4.2.4" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /typescript-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Basic Options */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | "target": "ES2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, 8 | "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, 9 | // "lib": [], /* Specify library files to be included in the compilation. */ 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 15 | "sourceMap": true /* Generates corresponding '.map' file. */, 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | "outDir": "./dist" /* Redirect output structure to the directory. */, 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | // "composite": true, /* Enable project compilation */ 20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 21 | // "removeComments": true, /* Do not emit comments to output. */ 22 | // "noEmit": true, /* Do not emit outputs. */ 23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 26 | 27 | /* Strict Type-Checking Options */ 28 | "strict": true /* Enable all strict type-checking options. */, 29 | "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */, 30 | // "strictNullChecks": true, /* Enable strict null checks. */ 31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 36 | 37 | /* Additional Checks */ 38 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 43 | 44 | /* Module Resolution Options */ 45 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 46 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 47 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 48 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 49 | // "typeRoots": [], /* List of folders to include type definitions from. */ 50 | // "types": [], /* Type declaration files to be included in compilation. */ 51 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 52 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, 53 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 54 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 55 | 56 | /* Source Map Options */ 57 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 58 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 59 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 60 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 61 | 62 | /* Experimental Options */ 63 | "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */, 64 | "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */, 65 | 66 | /* Advanced Options */ 67 | "skipLibCheck": true /* Skip type checking of declaration files. */, 68 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 69 | } 70 | } 71 | --------------------------------------------------------------------------------