├── angular-basics ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-component ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── Container │ │ │ ├── container.component.css │ │ │ ├── container.component.html │ │ │ └── container.component.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── header │ │ │ ├── header.component.css │ │ │ ├── header.component.html │ │ │ ├── header.component.spec.ts │ │ │ └── header.component.ts │ │ ├── nav │ │ │ ├── nav.component.css │ │ │ ├── nav.component.html │ │ │ ├── nav.component.spec.ts │ │ │ └── nav.component.ts │ │ ├── notification │ │ │ ├── notification.component.spec.ts │ │ │ └── notification.component.ts │ │ ├── products │ │ │ ├── products.component.css │ │ │ ├── products.component.html │ │ │ ├── products.component.spec.ts │ │ │ └── products.component.ts │ │ └── search │ │ │ ├── search.component.css │ │ │ ├── search.component.html │ │ │ ├── search.component.spec.ts │ │ │ └── search.component.ts │ ├── assets │ │ ├── products │ │ │ ├── product-image-1.jpeg │ │ │ ├── product-image-2.jpeg │ │ │ ├── product-image-3.jpeg │ │ │ ├── product-image-4.jpeg │ │ │ ├── product-image-5.jpeg │ │ │ └── product-image-6.jpeg │ │ └── shopping.jpg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-form ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-http ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── Service │ │ │ └── products.service.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── model │ │ │ └── products.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ └── theme │ │ └── variables.css ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-observables ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── comp1 │ │ │ ├── comp1.component.css │ │ │ ├── comp1.component.html │ │ │ └── comp1.component.ts │ │ ├── comp2 │ │ │ ├── comp2.component.css │ │ │ ├── comp2.component.html │ │ │ └── comp2.component.ts │ │ └── data.service.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-pipe ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── filter.pipe.ts │ │ ├── percentage.pipe.ts │ │ ├── student.ts │ │ └── students.service.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── angular-routing ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── Services │ │ │ └── courses.service.ts │ │ ├── about │ │ │ ├── about.component.css │ │ │ ├── about.component.html │ │ │ ├── about.component.spec.ts │ │ │ └── about.component.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── contact │ │ │ ├── contact.component.css │ │ │ ├── contact.component.html │ │ │ ├── contact.component.spec.ts │ │ │ └── contact.component.ts │ │ ├── courses │ │ │ ├── course │ │ │ │ ├── course.component.css │ │ │ │ ├── course.component.html │ │ │ │ ├── course.component.spec.ts │ │ │ │ └── course.component.ts │ │ │ ├── courses.component.css │ │ │ ├── courses.component.html │ │ │ ├── courses.component.spec.ts │ │ │ └── courses.component.ts │ │ └── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ ├── assets │ │ ├── courses │ │ │ ├── course-image-1.jpeg │ │ │ ├── course-image-2.jpeg │ │ │ ├── course-image-3.jpeg │ │ │ ├── course-image-4.jpeg │ │ │ ├── course-image-5.jpeg │ │ │ ├── course-image-6.jpeg │ │ │ ├── course-image-7.jpeg │ │ │ ├── course-image-8.jpeg │ │ │ └── course-image-9.jpeg │ │ └── images │ │ │ ├── courses.jpg │ │ │ ├── team1.jpg │ │ │ ├── team2.jpg │ │ │ └── team3.jpg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── content-child ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── demo │ │ │ ├── demo.component.css │ │ │ ├── demo.component.html │ │ │ ├── demo.component.spec.ts │ │ │ └── demo.component.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── custom-binding ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── courses │ │ │ ├── courses.component.css │ │ │ ├── courses.component.html │ │ │ ├── courses.component.spec.ts │ │ │ └── courses.component.ts │ │ ├── filter │ │ │ ├── filter.component.css │ │ │ ├── filter.component.html │ │ │ ├── filter.component.spec.ts │ │ │ └── filter.component.ts │ │ ├── header │ │ │ ├── header.component.css │ │ │ ├── header.component.html │ │ │ ├── header.component.spec.ts │ │ │ └── header.component.ts │ │ └── search │ │ │ ├── search.component.css │ │ │ ├── search.component.html │ │ │ ├── search.component.spec.ts │ │ │ └── search.component.ts │ ├── assets │ │ └── courses │ │ │ ├── course-image-1.jpeg │ │ │ ├── course-image-2.jpeg │ │ │ ├── course-image-3.jpeg │ │ │ ├── course-image-4.jpeg │ │ │ ├── course-image-5.jpeg │ │ │ ├── course-image-6.jpeg │ │ │ ├── course-image-7.jpeg │ │ │ ├── course-image-8.jpeg │ │ │ └── course-image-9.jpeg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── custom-directives ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── CustomDirective │ │ │ ├── betterhighlight.directive.ts │ │ │ ├── class.directive.ts │ │ │ ├── highlight.directive.ts │ │ │ ├── hover.directive.ts │ │ │ ├── if.directive.ts │ │ │ ├── setbackground.directive.ts │ │ │ └── style.directive.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── directive-example ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── highlight.directive.ts │ ├── assets │ │ └── images │ │ │ ├── image1.jpg │ │ │ ├── image2.jpg │ │ │ └── image3.jpg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── lifecycle-hook ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── demo │ │ │ ├── demo.component.css │ │ │ ├── demo.component.html │ │ │ └── demo.component.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── ng-content ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── product │ │ │ ├── product.component.css │ │ │ ├── product.component.html │ │ │ ├── product.component.spec.ts │ │ │ └── product.component.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── subscribe-service ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── Services │ │ │ └── enroll.service.ts │ │ ├── angular │ │ │ ├── angular.component.css │ │ │ ├── angular.component.html │ │ │ ├── angular.component.spec.ts │ │ │ └── angular.component.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── javascript │ │ │ ├── javascript.component.css │ │ │ ├── javascript.component.html │ │ │ ├── javascript.component.spec.ts │ │ │ └── javascript.component.ts │ ├── assets │ │ └── images │ │ │ ├── angular.jpeg │ │ │ └── javascript.jpeg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── template-reference ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer-list │ │ │ ├── customer-list.component.css │ │ │ ├── customer-list.component.html │ │ │ ├── customer-list.component.spec.ts │ │ │ ├── customer-list.component.ts │ │ │ └── customer.ts │ │ └── demo │ │ │ ├── demo.component.css │ │ │ ├── demo.component.html │ │ │ ├── demo.component.spec.ts │ │ │ └── demo.component.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── user-detail-service ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── Services │ │ │ └── user.service.ts │ │ ├── all-users │ │ │ ├── all-users.component.css │ │ │ ├── all-users.component.html │ │ │ ├── all-users.component.spec.ts │ │ │ └── all-users.component.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── user-detail │ │ │ ├── user-detail.component.css │ │ │ ├── user-detail.component.html │ │ │ ├── user-detail.component.spec.ts │ │ │ └── user-detail.component.ts │ ├── assets │ │ └── avatar │ │ │ ├── john.jpeg │ │ │ ├── mark.jpeg │ │ │ ├── merry.jpeg │ │ │ └── steve.jpeg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── user-service ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── Services │ │ │ ├── logger.service.ts │ │ │ └── user.service.ts │ │ ├── adduser │ │ │ ├── adduser.component.css │ │ │ ├── adduser.component.html │ │ │ ├── adduser.component.spec.ts │ │ │ └── adduser.component.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── view-child ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── demo │ │ │ ├── demo.component.css │ │ │ ├── demo.component.html │ │ │ ├── demo.component.spec.ts │ │ │ └── demo.component.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json └── view-encapsulation ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── comp1 │ │ ├── comp1.component.css │ │ ├── comp1.component.html │ │ ├── comp1.component.spec.ts │ │ └── comp1.component.ts │ └── comp2 │ │ ├── comp2.component.css │ │ ├── comp2.component.html │ │ ├── comp2.component.spec.ts │ │ └── comp2.component.ts ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css └── test.ts ├── test.txt ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /angular-basics/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | h2{ 2 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 3 | color: brown; 4 | } 5 | p{ 6 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 7 | font-size: 16px; 8 | } -------------------------------------------------------------------------------- /angular-basics/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

Welcome to {{ title }}

2 |

This is my first Angular app. I am excited to learn more about it.

3 |

{{message}}

-------------------------------------------------------------------------------- /angular-basics/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'AngularApp'; 10 | message = 'Angular is the best JavaSCript framework for building client-side application.'; 11 | } 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-basics/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /angular-basics/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-basics/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-basics/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-basics/src/favicon.ico -------------------------------------------------------------------------------- /angular-basics/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularBasics 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-basics/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-basics/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-basics/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-basics/test.txt: -------------------------------------------------------------------------------- 1 | angular 13: angular basics repo 2 | -------------------------------------------------------------------------------- /angular-basics/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-basics/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 | -------------------------------------------------------------------------------- /angular-component/src/app/Container/container.component.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | margin: 0px auto; 3 | width: 820px; 4 | } -------------------------------------------------------------------------------- /angular-component/src/app/Container/container.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 |
-------------------------------------------------------------------------------- /angular-component/src/app/Container/container.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-container', 5 | templateUrl: './container.component.html', 6 | styleUrls: ['./container.component.css'] 7 | }) 8 | export class ContainerComponent{ 9 | 10 | } -------------------------------------------------------------------------------- /angular-component/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | background-color: #FDEBD0; 3 | } -------------------------------------------------------------------------------- /angular-component/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /angular-component/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'AngularComponent'; 10 | } 11 | -------------------------------------------------------------------------------- /angular-component/src/app/header/header.component.css: -------------------------------------------------------------------------------- 1 | .header{ 2 | height: 280px; 3 | padding:30px 40px; 4 | display: flex; 5 | background-color: #fff; 6 | } 7 | .site-slogan{ 8 | width: 420px; 9 | margin-left: 50px; 10 | text-align: center; 11 | } 12 | h2{ 13 | font-size: 45px; 14 | } -------------------------------------------------------------------------------- /angular-component/src/app/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |

{{ slogan }}

7 |
8 |
9 | -------------------------------------------------------------------------------- /angular-component/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-component/src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.css'] 7 | }) 8 | export class HeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | slogan: string = 'Your one stop shop for everything.'; 15 | source: string = "/assets/shopping.jpg"; 16 | 17 | getSlogan(){ 18 | return 'This is a new slogan for this web application'; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /angular-component/src/app/nav/nav.component.css: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | display: flex; 3 | background-color: #F5B041; 4 | } 5 | .site-name{ 6 | padding: 0px 30px; 7 | color:#E74C3C; 8 | } 9 | .site-menu{ 10 | padding: 0px 30px; 11 | margin-left: 100px; 12 | } 13 | a{ 14 | text-decoration: none; 15 | color:#212F3D; 16 | margin: 0px 10px; 17 | } -------------------------------------------------------------------------------- /angular-component/src/app/nav/nav.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{ sitename }}

4 |
5 |
6 | HOME 7 | ABOUT 8 | CONTACT 9 | CART 10 | PRODUCTS 11 |
12 |
13 | -------------------------------------------------------------------------------- /angular-component/src/app/nav/nav.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NavComponent } from './nav.component'; 4 | 5 | describe('NavComponent', () => { 6 | let component: NavComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ NavComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-component/src/app/nav/nav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: '.app-nav', 5 | templateUrl: './nav.component.html', 6 | styleUrls: ['./nav.component.css'] 7 | }) 8 | export class NavComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | sitename: string = 'eShopping'; 15 | } 16 | -------------------------------------------------------------------------------- /angular-component/src/app/notification/notification.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotificationComponent } from './notification.component'; 4 | 5 | describe('NotificationComponent', () => { 6 | let component: NotificationComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ NotificationComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NotificationComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-component/src/app/notification/notification.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-notification', 5 | template: `
6 | This website uses cookies to provide better user experience. 7 |
8 |
`, 9 | styles: ["div{margin: 10px 0px; padding: 10px 20px; text-align:center;}", 10 | "p{font-size: 14px;}", ".close{float: right; margin-top: -15px;}", 11 | ".fadeOut {visibility: hidden;opacity: 0; transition: visibility 0s 2s, opacity 2s linear;}"] 12 | }) 13 | export class NotificationComponent implements OnInit { 14 | 15 | constructor() { } 16 | 17 | ngOnInit(): void { 18 | } 19 | displayNotification:boolean = false; 20 | 21 | closeNotification(){ 22 | this.displayNotification = true; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /angular-component/src/app/products/products.component.css: -------------------------------------------------------------------------------- 1 | .product-container{ 2 | display: flex; 3 | margin: 15px 0px; 4 | padding: 5px 5px; 5 | border-radius: 5px; 6 | } 7 | .image-container{ 8 | background-color: #fff; 9 | height: 70px; 10 | width: 70px; 11 | padding: 10px 0px; 12 | text-align: center; 13 | } 14 | .detailContainer{ 15 | display: flex; 16 | margin: 0px 20px; 17 | } 18 | .name-container{ 19 | margin: 0px 20px 20 | } 21 | .details{ 22 | width: 140px; 23 | } 24 | .options{ 25 | width: 220px; 26 | margin-left: 80px; 27 | } 28 | .btn{ 29 | border-radius: none; 30 | margin: 0px 5px; 31 | padding: 2px 10px; 32 | font-size: 12px; 33 | } 34 | .changeBackground{ 35 | background-color: #D5F5E3; 36 | } -------------------------------------------------------------------------------- /angular-component/src/app/products/products.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductsComponent } from './products.component'; 4 | 5 | describe('ProductsComponent', () => { 6 | let component: ProductsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ProductsComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-component/src/app/search/search.component.css: -------------------------------------------------------------------------------- 1 | .search-div{ 2 | margin: 10px 0px; 3 | padding: 10px 20px; 4 | } 5 | input[type=text]{ 6 | width: 240px; 7 | height: 30px; 8 | margin-left: 20px; 9 | border: none; 10 | padding: 0 20px; 11 | } 12 | .changeBackground{ 13 | background-color: #FAD7A0; 14 | } -------------------------------------------------------------------------------- /angular-component/src/app/search/search.component.html: -------------------------------------------------------------------------------- 1 |
2 | Search: 3 | 4 | 5 | You searched for "{{ searchValue }}" 6 |
7 | -------------------------------------------------------------------------------- /angular-component/src/app/search/search.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SearchComponent } from './search.component'; 4 | 5 | describe('SearchComponent', () => { 6 | let component: SearchComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ SearchComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SearchComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-component/src/app/search/search.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-search', 5 | templateUrl: './search.component.html', 6 | styleUrls: ['./search.component.css'] 7 | }) 8 | export class SearchComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | searchValue: string = ''; 15 | 16 | changeSearchValue(eventData: Event){ 17 | console.log((eventData.target).value); 18 | this.searchValue = (eventData.target).value; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /angular-component/src/assets/products/product-image-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/products/product-image-1.jpeg -------------------------------------------------------------------------------- /angular-component/src/assets/products/product-image-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/products/product-image-2.jpeg -------------------------------------------------------------------------------- /angular-component/src/assets/products/product-image-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/products/product-image-3.jpeg -------------------------------------------------------------------------------- /angular-component/src/assets/products/product-image-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/products/product-image-4.jpeg -------------------------------------------------------------------------------- /angular-component/src/assets/products/product-image-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/products/product-image-5.jpeg -------------------------------------------------------------------------------- /angular-component/src/assets/products/product-image-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/products/product-image-6.jpeg -------------------------------------------------------------------------------- /angular-component/src/assets/shopping.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/assets/shopping.jpg -------------------------------------------------------------------------------- /angular-component/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-component/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-component/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-component/src/favicon.ico -------------------------------------------------------------------------------- /angular-component/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularComponent 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-component/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-component/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | *{ 3 | margin: 0px 0px; 4 | padding: 0px 0px; 5 | box-sizing: border-box; 6 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 7 | } -------------------------------------------------------------------------------- /angular-component/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-component/test.txt: -------------------------------------------------------------------------------- 1 | Angular 13: Angular 13 concepts 2 | -------------------------------------------------------------------------------- /angular-component/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-component/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 | -------------------------------------------------------------------------------- /angular-form/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | input[type=text],[type=email], select { 2 | width: 100%; 3 | padding: 12px 20px; 4 | margin: 8px 0; 5 | display: inline-block; 6 | border: 1px solid #ccc; 7 | border-radius: 4px; 8 | box-sizing: border-box; 9 | } 10 | 11 | input[type=submit] { 12 | width: 100%; 13 | background-color: #4CAF50; 14 | color: white; 15 | padding: 14px 20px; 16 | margin: 8px 0; 17 | border: none; 18 | border-radius: 4px; 19 | cursor: pointer; 20 | } 21 | 22 | input[type=submit]:hover { 23 | background-color: #45a049; 24 | } 25 | 26 | .form, .form-data{ 27 | border-radius: 5px; 28 | background-color: #f2f2f2; 29 | padding: 20px; 30 | width: 400px; 31 | margin: 30px auto; 32 | } 33 | 34 | input.ng-invalid.ng-touched{ 35 | border: red 1px solid; 36 | } 37 | small{ 38 | color: red; 39 | } -------------------------------------------------------------------------------- /angular-form/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | FormsModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /angular-form/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-form/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-form/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-form/src/favicon.ico -------------------------------------------------------------------------------- /angular-form/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularForms 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-form/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-form/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-form/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-form/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /angular-form/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-form/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 | -------------------------------------------------------------------------------- /angular-http/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { IonicModule } from '@ionic/angular'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent 12 | ], 13 | imports: [ 14 | BrowserModule, 15 | FormsModule, 16 | HttpClientModule, 17 | IonicModule.forRoot() 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /angular-http/src/app/model/products.ts: -------------------------------------------------------------------------------- 1 | export class Product{ 2 | pName: string; 3 | desc: string; 4 | price: string 5 | id?: string; 6 | } -------------------------------------------------------------------------------- /angular-http/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-http/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-http/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-http/src/favicon.ico -------------------------------------------------------------------------------- /angular-http/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularHttpRequest 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-http/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-http/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Open+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&family=VT323&display=swap'); 3 | 4 | *{ 5 | margin: 0px 0px; 6 | padding: 0px 0px; 7 | box-sizing: border-box; 8 | } 9 | 10 | body{ 11 | font-family: 'Open Sans', sans-serif; 12 | } 13 | -------------------------------------------------------------------------------- /angular-http/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-http/src/theme/variables.css: -------------------------------------------------------------------------------- 1 | /* Ionic Variables and Theming. */ 2 | /* This is just a placeholder file For more info, please see: */ 3 | /* https://ionicframework.com/docs/theming/basics */ 4 | 5 | /* To quickly generate your own theme, check out the color generator */ 6 | /* https://ionicframework.com/docs/theming/color-generator */ 7 | -------------------------------------------------------------------------------- /angular-http/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /angular-http/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-http/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 | -------------------------------------------------------------------------------- /angular-observables/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-observables/src/app/app.component.css -------------------------------------------------------------------------------- /angular-observables/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /angular-observables/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { Comp1Component } from './comp1/comp1.component'; 7 | import { Comp2Component } from './comp2/comp2.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | Comp1Component, 13 | Comp2Component 14 | ], 15 | imports: [ 16 | BrowserModule, 17 | FormsModule 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /angular-observables/src/app/comp1/comp1.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 300px; 3 | margin: 30px auto; 4 | padding: 20px 20px; 5 | background-color: aliceblue; 6 | } 7 | button{ 8 | border: none; 9 | width: 80px; 10 | height:30px; 11 | margin-left: 10px; 12 | } 13 | input{ 14 | width: 180px; 15 | height: 24px; 16 | padding: 0px 10px; 17 | } -------------------------------------------------------------------------------- /angular-observables/src/app/comp1/comp1.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 | -------------------------------------------------------------------------------- /angular-observables/src/app/comp1/comp1.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { DataService } from '../data.service'; 3 | 4 | @Component({ 5 | selector: 'app-comp1', 6 | templateUrl: './comp1.component.html', 7 | styleUrls: ['./comp1.component.css'] 8 | }) 9 | export class Comp1Component implements OnInit { 10 | 11 | constructor(private dataService: DataService) { } 12 | 13 | ngOnInit(): void { 14 | } 15 | 16 | enteredText: string; 17 | 18 | OnBtnClick(){ 19 | //console.log(this.enteredText); 20 | this.dataService.raiseDataEmitterEvent(this.enteredText); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /angular-observables/src/app/comp2/comp2.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 300px; 3 | margin: 10px auto; 4 | padding: 10px 20px; 5 | text-align: center; 6 | border: #333 2px solid; 7 | } -------------------------------------------------------------------------------- /angular-observables/src/app/comp2/comp2.component.html: -------------------------------------------------------------------------------- 1 |
2 |

You entered: {{inputText}}

3 |
4 | 5 | -------------------------------------------------------------------------------- /angular-observables/src/app/comp2/comp2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { DataService } from '../data.service'; 3 | 4 | @Component({ 5 | selector: 'app-comp2', 6 | templateUrl: './comp2.component.html', 7 | styleUrls: ['./comp2.component.css'] 8 | }) 9 | export class Comp2Component implements OnInit { 10 | 11 | constructor(private dataservice: DataService) { } 12 | 13 | ngOnInit(): void { 14 | this.dataservice.dataEmitter.subscribe((value) => { 15 | this.inputText = value; 16 | }) 17 | } 18 | inputText: string; 19 | } 20 | -------------------------------------------------------------------------------- /angular-observables/src/app/data.service.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter, Injectable } from "@angular/core"; 2 | import { Subject } from "rxjs"; 3 | 4 | @Injectable() 5 | export class DataService{ 6 | //dataEmitter = new EventEmitter(); 7 | dataEmitter = new Subject(); 8 | 9 | raiseDataEmitterEvent(data: string){ 10 | this.dataEmitter.next(data); 11 | } 12 | } -------------------------------------------------------------------------------- /angular-observables/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-observables/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-observables/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-observables/src/favicon.ico -------------------------------------------------------------------------------- /angular-observables/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularObservables 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-observables/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-observables/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-observables/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-observables/test.txt: -------------------------------------------------------------------------------- 1 | Angular 13: Congular 13 concept 2 | -------------------------------------------------------------------------------- /angular-observables/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-observables/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 | -------------------------------------------------------------------------------- /angular-pipe/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | #student { 2 | font-family: Arial, Helvetica, sans-serif; 3 | border-collapse: collapse; 4 | width: 100%; 5 | } 6 | 7 | #student td, #student th { 8 | border: 1px solid #ddd; 9 | padding: 8px; 10 | } 11 | 12 | #student tr:nth-child(even){background-color: #f2f2f2;} 13 | 14 | #student tr:hover {background-color: #ddd;} 15 | 16 | #student th { 17 | padding-top: 12px; 18 | padding-bottom: 12px; 19 | text-align: left; 20 | background-color: #04AA6D; 21 | color: white; 22 | } 23 | .container{ 24 | width: 1040px; 25 | margin: 20px auto; 26 | } -------------------------------------------------------------------------------- /angular-pipe/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { FilterPipe } from './filter.pipe'; 7 | import { PercentagePipe } from './percentage.pipe'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | PercentagePipe, 13 | FilterPipe 14 | ], 15 | imports: [ 16 | BrowserModule, 17 | FormsModule 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /angular-pipe/src/app/filter.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from "@angular/core"; 2 | import { Student } from "./student"; 3 | 4 | @Pipe({ 5 | name: 'filterStudent', 6 | pure: false 7 | }) 8 | export class FilterPipe implements PipeTransform{ 9 | transform(students: Student[], filterText: string) { 10 | console.log('Filter pipe called!'); 11 | if(students.length === 0 || filterText === ''){ 12 | return students; 13 | } else { 14 | return students.filter((student) => 15 | { 16 | return student.gender.toLowerCase() === filterText.toLowerCase() 17 | }) 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /angular-pipe/src/app/percentage.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from "@angular/core"; 2 | 3 | @Pipe({ 4 | name: 'percentage', 5 | }) 6 | export class PercentagePipe implements PipeTransform{ 7 | transform(value: number, totalMarks: number, decimal: number) { 8 | console.log('percentage pipe called!'); 9 | return (value / totalMarks * 100).toFixed(decimal); 10 | } 11 | } -------------------------------------------------------------------------------- /angular-pipe/src/app/student.ts: -------------------------------------------------------------------------------- 1 | export class Student{ 2 | name: string; 3 | course: string; 4 | marks: number; 5 | DOB: Date; 6 | gender: string; 7 | } -------------------------------------------------------------------------------- /angular-pipe/src/app/students.service.ts: -------------------------------------------------------------------------------- 1 | import { Student } from "./student"; 2 | 3 | export class StudentService{ 4 | students: Student[] = [ 5 | {name: 'Mark Vought', course: 'MBA', marks: 520, DOB: new Date('11-12-1997'), gender: 'Male'}, 6 | {name: 'Steve Smith', course: 'BTECH', marks: 420, DOB: new Date('10-06-1998'), gender: 'Male'}, 7 | {name: 'Merry Jane', course: 'MBA', marks: 540, DOB: new Date('09-22-1996'), gender: 'Female'}, 8 | {name: 'John Doe', course: 'BTECH', marks: 380, DOB: new Date('06-12-1995'), gender: 'Male'}, 9 | {name: 'Sarah Smith', course: 'M.SC', marks: 430, DOB: new Date('12-21-1999'), gender: 'Female'}, 10 | {name: 'Jonas Weber', course: 'M.SC', marks: 320, DOB: new Date('06-18-1997'), gender: 'Male'} 11 | ]; 12 | 13 | totalMarks: number = 600; 14 | } -------------------------------------------------------------------------------- /angular-pipe/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-pipe/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-pipe/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-pipe/src/favicon.ico -------------------------------------------------------------------------------- /angular-pipe/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularPipes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-pipe/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-pipe/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular-pipe/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-pipe/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /angular-pipe/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-pipe/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 | -------------------------------------------------------------------------------- /angular-routing/src/app/about/about.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AboutComponent } from './about.component'; 4 | 5 | describe('AboutComponent', () => { 6 | let component: AboutComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ AboutComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AboutComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-routing/src/app/about/about.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute, Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-about', 6 | templateUrl: './about.component.html', 7 | styleUrls: ['./about.component.css'] 8 | }) 9 | export class AboutComponent implements OnInit { 10 | 11 | constructor(private router: Router, private route: ActivatedRoute) { } 12 | 13 | ngOnInit(): void { 14 | } 15 | 16 | GoToHome(){ 17 | //this.router.navigate(['Home'], {relativeTo: this.route})//localhost:4200/About/Home 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /angular-routing/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .main-container{ 2 | width: 960px; 3 | margin: 10px auto; 4 | } 5 | ul { 6 | list-style-type: none; 7 | margin: 0; 8 | padding: 0; 9 | overflow: hidden; 10 | background-color: #333; 11 | } 12 | 13 | li { 14 | float: left; 15 | } 16 | 17 | li a { 18 | display: block; 19 | color: white; 20 | text-align: center; 21 | padding: 14px 16px; 22 | text-decoration: none; 23 | } 24 | 25 | /* Change the link color to #111 (black) on hover */ 26 | li a:hover { 27 | background-color: #111; 28 | } -------------------------------------------------------------------------------- /angular-routing/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 9 |
10 |
11 | 15 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /angular-routing/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'AngularRouting'; 10 | } 11 | -------------------------------------------------------------------------------- /angular-routing/src/app/contact/contact.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactComponent } from './contact.component'; 4 | 5 | describe('ContactComponent', () => { 6 | let component: ContactComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ContactComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContactComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-routing/src/app/contact/contact.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-contact', 6 | templateUrl: './contact.component.html', 7 | styleUrls: ['./contact.component.css'] 8 | }) 9 | export class ContactComponent implements OnInit { 10 | 11 | constructor(private router: Router) { } 12 | 13 | ngOnInit(): void { 14 | } 15 | 16 | ProcessForm(){ 17 | //Write logic to process the form 18 | this.router.navigate(['About']); 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /angular-routing/src/app/courses/course/course.component.css: -------------------------------------------------------------------------------- 1 | .course-container{ 2 | width: 580px; 3 | margin: 20px auto; 4 | padding: 10px 10px; 5 | background-color: #fff; 6 | } 7 | .course-details{ 8 | display: flex; 9 | margin: 20px 0px; 10 | text-align: center; 11 | } -------------------------------------------------------------------------------- /angular-routing/src/app/courses/course/course.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |

{{course.name}}

7 |
8 |
9 |
Author: {{course.author}}
10 |
Duration: {{course.duration}}
11 |
Type: {{course.type}}
12 |
13 |
14 |

Price: {{course.price}}$

15 |
16 |
17 |

{{course.description}}

18 |
19 |
20 | -------------------------------------------------------------------------------- /angular-routing/src/app/courses/course/course.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CourseComponent } from './course.component'; 4 | 5 | describe('CourseComponent', () => { 6 | let component: CourseComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CourseComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CourseComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-routing/src/app/courses/course/course.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | import { CoursesService } from 'src/app/Services/courses.service'; 4 | 5 | @Component({ 6 | selector: 'app-course', 7 | templateUrl: './course.component.html', 8 | styleUrls: ['./course.component.css'] 9 | }) 10 | export class CourseComponent implements OnInit { 11 | 12 | constructor(private service: CoursesService, private route: ActivatedRoute) { } 13 | 14 | course; 15 | courseId: number; 16 | 17 | ngOnInit(): void { 18 | this.courseId = this.route.snapshot.params['id']; 19 | //this.courseId = this.route.snapshot.params['name']; 20 | this.course = this.service.courses.find(x => x.id == this.courseId); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /angular-routing/src/app/courses/courses.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CoursesComponent } from './courses.component'; 4 | 5 | describe('CoursesComponent', () => { 6 | let component: CoursesComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CoursesComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CoursesComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-routing/src/app/courses/courses.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { CoursesService } from '../Services/courses.service'; 3 | 4 | @Component({ 5 | selector: 'app-courses', 6 | templateUrl: './courses.component.html', 7 | styleUrls: ['./courses.component.css'] 8 | }) 9 | export class CoursesComponent implements OnInit { 10 | 11 | constructor(private coursesService: CoursesService) { } 12 | 13 | courses = []; 14 | 15 | ngOnInit(): void { 16 | this.courses = this.coursesService.courses; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /angular-routing/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /angular-routing/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { CoursesService } from '../Services/courses.service'; 3 | 4 | @Component({ 5 | selector: 'app-home', 6 | templateUrl: './home.component.html', 7 | styleUrls: ['./home.component.css'] 8 | }) 9 | export class HomeComponent implements OnInit { 10 | 11 | constructor(private coursesService: CoursesService) { } 12 | 13 | courses = []; 14 | 15 | ngOnInit(): void { 16 | this.courses = this.coursesService.courses; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-1.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-2.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-3.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-4.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-5.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-6.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-7.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-8.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/courses/course-image-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/courses/course-image-9.jpeg -------------------------------------------------------------------------------- /angular-routing/src/assets/images/courses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/images/courses.jpg -------------------------------------------------------------------------------- /angular-routing/src/assets/images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/images/team1.jpg -------------------------------------------------------------------------------- /angular-routing/src/assets/images/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/images/team2.jpg -------------------------------------------------------------------------------- /angular-routing/src/assets/images/team3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/assets/images/team3.jpg -------------------------------------------------------------------------------- /angular-routing/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular-routing/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular-routing/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/angular-routing/src/favicon.ico -------------------------------------------------------------------------------- /angular-routing/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularRouting 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular-routing/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-routing/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | *{ 3 | margin: 0px 0px; 4 | padding: 0px 0px; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | margin: 0; 10 | background-color: #efefef; 11 | } 12 | .active{ 13 | background-color: #777; 14 | } 15 | -------------------------------------------------------------------------------- /angular-routing/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /angular-routing/test.txt: -------------------------------------------------------------------------------- 1 | Angular 13: Angular 13 concepts 2 | -------------------------------------------------------------------------------- /angular-routing/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-routing/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 | -------------------------------------------------------------------------------- /content-child/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/content-child/src/app/app.component.css -------------------------------------------------------------------------------- /content-child/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

This is App Component

2 | 3 |

This is a paragraph

4 | -------------------------------------------------------------------------------- /content-child/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'ContentChild'; 10 | } 11 | -------------------------------------------------------------------------------- /content-child/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { DemoComponent } from './demo/demo.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | DemoComponent 11 | ], 12 | imports: [ 13 | BrowserModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /content-child/src/app/demo/demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/content-child/src/app/demo/demo.component.css -------------------------------------------------------------------------------- /content-child/src/app/demo/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /content-child/src/app/demo/demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DemoComponent } from './demo.component'; 4 | 5 | describe('DemoComponent', () => { 6 | let component: DemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ DemoComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /content-child/src/app/demo/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterContentInit, Component, ContentChild, ElementRef, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-demo', 5 | templateUrl: './demo.component.html', 6 | styleUrls: ['./demo.component.css'] 7 | }) 8 | export class DemoComponent implements OnInit, AfterContentInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | console.log(this.paragraphEl); 14 | } 15 | 16 | ngAfterContentInit(){ 17 | this.paragraphEl.nativeElement.textContent = 'This is new paragraph value.' 18 | console.log(this.paragraphEl.nativeElement.textContent); 19 | } 20 | @ContentChild('paragraph') paragraphEl: ElementRef; 21 | } 22 | -------------------------------------------------------------------------------- /content-child/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /content-child/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /content-child/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/content-child/src/favicon.ico -------------------------------------------------------------------------------- /content-child/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ContentChild 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /content-child/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 | -------------------------------------------------------------------------------- /content-child/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /content-child/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /content-child/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /content-child/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 | -------------------------------------------------------------------------------- /content-child/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 | -------------------------------------------------------------------------------- /custom-binding/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 820px; 3 | margin:0px auto; 4 | text-align: center; 5 | background-color: #F5F5F5; 6 | } -------------------------------------------------------------------------------- /custom-binding/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /custom-binding/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'CustomBinding'; 10 | } 11 | -------------------------------------------------------------------------------- /custom-binding/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { CoursesComponent } from './courses/courses.component'; 6 | import { HeaderComponent } from './header/header.component'; 7 | import { SearchComponent } from './search/search.component'; 8 | import { FilterComponent } from './filter/filter.component'; 9 | import { FormsModule } from '@angular/forms'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | AppComponent, 14 | CoursesComponent, 15 | HeaderComponent, 16 | SearchComponent, 17 | FilterComponent 18 | ], 19 | imports: [ 20 | BrowserModule, 21 | FormsModule 22 | ], 23 | providers: [], 24 | bootstrap: [AppComponent] 25 | }) 26 | export class AppModule { } 27 | -------------------------------------------------------------------------------- /custom-binding/src/app/courses/courses.component.css: -------------------------------------------------------------------------------- 1 | .course-container{ 2 | display: inline-flex; 3 | } 4 | 5 | .course-card{ 6 | width:220px; 7 | height: 320px; 8 | margin: 10px 10px; 9 | background-color: #F8F9F9; 10 | } 11 | .course-name{ 12 | text-align: center; 13 | } 14 | .course-description{ 15 | margin: 10px 0px; 16 | padding: 5px 10px; 17 | font-size: 12px; 18 | } 19 | 20 | .details{ 21 | display: flex; 22 | margin: 10px 0px; 23 | } 24 | .course-type{ 25 | width:50%; 26 | font-weight: bold; 27 | } 28 | .course-buttons{ 29 | display: flex; 30 | } 31 | .btn{ 32 | width: 140px; 33 | height: 30px; 34 | border: none; 35 | margin: 5px 3px; 36 | } 37 | .btn-buy{ 38 | background-color: #EC7063; 39 | } 40 | .btn-show{ 41 | background-color: #ABEBC6; 42 | } 43 | -------------------------------------------------------------------------------- /custom-binding/src/app/courses/courses.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CoursesComponent } from './courses.component'; 4 | 5 | describe('CoursesComponent', () => { 6 | let component: CoursesComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CoursesComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CoursesComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /custom-binding/src/app/filter/filter.component.css: -------------------------------------------------------------------------------- 1 | .filter-container{ 2 | margin:10px 20px; 3 | } 4 | input[type=radio]{ 5 | margin-left:10px; 6 | } -------------------------------------------------------------------------------- /custom-binding/src/app/filter/filter.component.html: -------------------------------------------------------------------------------- 1 |
2 | Filter: 3 | 4 | 7 | {{'All Courses('+all+')'}} 8 | 9 | 12 | {{'Free Courses('+free+')'}} 13 | 14 | 17 | {{'Premium Courses('+premium+')'}} 18 | 19 |
20 | -------------------------------------------------------------------------------- /custom-binding/src/app/filter/filter.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FilterComponent } from './filter.component'; 4 | 5 | describe('FilterComponent', () => { 6 | let component: FilterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ FilterComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FilterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /custom-binding/src/app/filter/filter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-filter', 5 | templateUrl: './filter.component.html', 6 | styleUrls: ['./filter.component.css'] 7 | }) 8 | export class FilterComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | @Input('total') all: number = 0; 15 | @Input() free: number = 0; 16 | @Input() premium: number = 0; 17 | 18 | selectedRadioButtonValue: string = 'All'; 19 | 20 | @Output() 21 | filterRadioButtonSelectionChanged: EventEmitter = new EventEmitter(); 22 | 23 | onRadioButtonSelectionChanged(){ 24 | this.filterRadioButtonSelectionChanged.emit(this.selectedRadioButtonValue); 25 | //console.log(this.selectedRadioButtonValue); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /custom-binding/src/app/header/header.component.css: -------------------------------------------------------------------------------- 1 | .header{ 2 | padding: 10px 30px; 3 | background-color: #212121; 4 | color:#F44336; 5 | } -------------------------------------------------------------------------------- /custom-binding/src/app/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |

procademy

3 |
4 | -------------------------------------------------------------------------------- /custom-binding/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 | -------------------------------------------------------------------------------- /custom-binding/src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.css'] 7 | }) 8 | export class HeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /custom-binding/src/app/search/search.component.css: -------------------------------------------------------------------------------- 1 | .serch-container{ 2 | margin:10px 0px; 3 | } 4 | input[type=text]{ 5 | width: 240px; 6 | height: 30px; 7 | padding: 15px; 8 | border: none; 9 | margin-left:10px; 10 | } -------------------------------------------------------------------------------- /custom-binding/src/app/search/search.component.html: -------------------------------------------------------------------------------- 1 |
2 | Search: 3 | 4 |
5 | -------------------------------------------------------------------------------- /custom-binding/src/app/search/search.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SearchComponent } from './search.component'; 4 | 5 | describe('SearchComponent', () => { 6 | let component: SearchComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ SearchComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SearchComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /custom-binding/src/app/search/search.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-search', 5 | templateUrl: './search.component.html', 6 | styleUrls: ['./search.component.css'] 7 | }) 8 | export class SearchComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | enteredSerchValue: string = ''; 16 | 17 | @Output() 18 | searchTextChanged: EventEmitter = new EventEmitter(); 19 | 20 | onSearchTextChanged(){ 21 | this.searchTextChanged.emit(this.enteredSerchValue) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-1.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-2.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-3.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-4.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-5.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-6.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-7.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-8.jpeg -------------------------------------------------------------------------------- /custom-binding/src/assets/courses/course-image-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/assets/courses/course-image-9.jpeg -------------------------------------------------------------------------------- /custom-binding/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /custom-binding/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /custom-binding/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-binding/src/favicon.ico -------------------------------------------------------------------------------- /custom-binding/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CustomBinding 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /custom-binding/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 | -------------------------------------------------------------------------------- /custom-binding/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | *{ 3 | margin: 0px 0px; 4 | padding: 0px 0px; 5 | box-sizing: border-box; 6 | font-family: 'Open Sans', sans-serif; 7 | } -------------------------------------------------------------------------------- /custom-binding/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /custom-binding/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-binding/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 | -------------------------------------------------------------------------------- /custom-binding/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 | -------------------------------------------------------------------------------- /custom-directives/src/app/CustomDirective/class.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appClass]' 5 | }) 6 | export class ClassDirective { 7 | 8 | constructor(private element: ElementRef, private renderer: Renderer2) { 9 | 10 | } 11 | @Input() set appClass(value: Object){ 12 | let entries = Object.entries(value) 13 | for(let [className, condition] of entries){ 14 | if(condition){ 15 | this.renderer.addClass(this.element.nativeElement, className); 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /custom-directives/src/app/CustomDirective/highlight.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appHighlight]' 5 | }) 6 | export class HighlightDirective implements OnInit { 7 | 8 | constructor(private element: ElementRef, private renderer: Renderer2) { 9 | 10 | } 11 | 12 | ngOnInit(){ 13 | this.renderer.setStyle(this.element.nativeElement, 'backgroundColor', '#F1948A'); 14 | this.renderer.addClass(this.element.nativeElement, 'container'); 15 | this.renderer.setAttribute(this.element.nativeElement, 'title', 'This is example div'); 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /custom-directives/src/app/CustomDirective/hover.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appHover]' 5 | }) 6 | export class HoverDirective { 7 | 8 | constructor(private element: ElementRef, private renderer: Renderer2) { 9 | 10 | } 11 | 12 | 13 | @HostListener('mouseenter') onmouseover(){ 14 | this.renderer.setStyle(this.element.nativeElement, 'margin', '5px 10px'); 15 | this.renderer.setStyle(this.element.nativeElement, 'padding', '30px 30px'); 16 | this.renderer.setStyle(this.element.nativeElement, 'transition', '0.5s'); 17 | } 18 | 19 | @HostListener('mouseleave') onmouseout(){ 20 | this.renderer.setStyle(this.element.nativeElement, 'margin', '10px 20px'); 21 | this.renderer.setStyle(this.element.nativeElement, 'padding', '10px 20px'); 22 | this.renderer.setStyle(this.element.nativeElement, 'transition', '0.5s'); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /custom-directives/src/app/CustomDirective/if.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appIf]' 5 | }) 6 | export class IfDirective { 7 | 8 | //1. What to add or Remove 9 | //2. From where to add or remove 10 | constructor(private template: TemplateRef, private viewContainer: ViewContainerRef) { 11 | 12 | } 13 | 14 | @Input() set appIf(condition: boolean){ 15 | if(condition){ 16 | this.viewContainer.createEmbeddedView(this.template) 17 | } else { 18 | this.viewContainer.clear(); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /custom-directives/src/app/CustomDirective/setbackground.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, OnInit } from "@angular/core"; 2 | 3 | @Directive({ 4 | selector: '[setBackground]' 5 | }) 6 | export class SetBackgroundDirective implements OnInit{ 7 | 8 | constructor(private element: ElementRef){ 9 | //element.nativeElement.style.backgroundColor = '#C8E6C9'; 10 | this.element = element; 11 | } 12 | 13 | ngOnInit(){ 14 | this.element.nativeElement.style.backgroundColor = '#C8E6C9'; 15 | } 16 | } -------------------------------------------------------------------------------- /custom-directives/src/app/CustomDirective/style.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appStyle]' 5 | }) 6 | export class StyleDirective { 7 | 8 | constructor(private element: ElementRef, private renderer: Renderer2) { 9 | 10 | } 11 | @Input() set appStyle(styles: Object){ 12 | let entries = Object.entries(styles); 13 | //console.log(entries); 14 | 15 | for(let entry of entries){ 16 | this.renderer.setStyle(this.element.nativeElement, entry[0], entry[1]); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /custom-directives/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin: 10px 20px; 3 | padding: 10px 20px; 4 | } 5 | .change-font{ 6 | font-size: 16px; 7 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 8 | } 9 | 10 | .info-container{ 11 | margin: 10px 30px; 12 | padding: 10px 30px; 13 | } 14 | .notice{ 15 | background-color: #C8E6C9; 16 | } 17 | .btn{ 18 | width:120px; 19 | height: 35px; 20 | border: none; 21 | } 22 | .btn-notice{ 23 | margin: 10px 30px; 24 | background-color: #F5B041; 25 | } -------------------------------------------------------------------------------- /custom-directives/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'CustomDirectives'; 10 | 11 | active: boolean = false; 12 | 13 | display: boolean = false; 14 | 15 | occupation: string = 'doctor'; 16 | 17 | DisplayNotice(){ 18 | this.display = true; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /custom-directives/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /custom-directives/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /custom-directives/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/custom-directives/src/favicon.ico -------------------------------------------------------------------------------- /custom-directives/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CustomDirectives 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /custom-directives/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 | -------------------------------------------------------------------------------- /custom-directives/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /custom-directives/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /custom-directives/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-directives/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 | -------------------------------------------------------------------------------- /custom-directives/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 | -------------------------------------------------------------------------------- /directive-example/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin: 20px auto; 3 | padding: 20px 10px; 4 | text-align: center; 5 | } 6 | 7 | .video-container{ 8 | display: inline-flex; 9 | } 10 | 11 | .video-card{ 12 | width:220px; 13 | height: 320px; 14 | margin: 10px 10px; 15 | background-color: #F8F9F9; 16 | } 17 | 18 | 19 | .details{ 20 | display: flex; 21 | margin: 10px 5px; 22 | } 23 | .video-data{ 24 | margin: 5px; 25 | font-size: 14px; 26 | 27 | } 28 | i{ 29 | font-size: 16px; 30 | margin: 10px; 31 | color: #FF5722; 32 | } 33 | .highlight{ 34 | background-color: #ddd; 35 | border: #FF5722 3px solid; 36 | border-radius: 5px; 37 | } 38 | -------------------------------------------------------------------------------- /directive-example/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 |

{{video.title}}

8 |
9 |
10 | thumb_up{{video.likes}} 11 |
12 |
13 | thumb_down{{video.dislikes}} 14 |
15 |
16 | reply_all{{video.share}} 17 |
18 |
19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /directive-example/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'DirectiveExample'; 10 | 11 | videos= [ 12 | {title: 'My video 1', share: 415, likes: 257, dislikes: 12, thumbnail: 'assets/images/image1.jpg'}, 13 | {title: 'My video 2', share: 215, likes: 325, dislikes: 12, thumbnail: 'assets/images/image2.jpg'}, 14 | {title: 'My video 3', share: 513, likes: 105, dislikes: 12, thumbnail: 'assets/images/image3.jpg'} 15 | ] 16 | 17 | mostLikedVideo = this.getmostlikedVideo(); 18 | 19 | getmostlikedVideo(){ 20 | let videoCopy = [...this.videos]; 21 | return videoCopy.sort((curr, next) => next.likes - curr.likes)[0]; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /directive-example/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { HighlightDirective } from './highlight.directive'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | HighlightDirective 11 | ], 12 | imports: [ 13 | BrowserModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /directive-example/src/app/highlight.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appHighlight]' 5 | }) 6 | export class HighlightDirective { 7 | 8 | constructor(private element: ElementRef, private renderer: Renderer2) { 9 | 10 | } 11 | 12 | @Input() set appHighlight(condition: boolean){ 13 | if(condition){ 14 | this.renderer.addClass(this.element.nativeElement, 'highlight'); 15 | } 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /directive-example/src/assets/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/directive-example/src/assets/images/image1.jpg -------------------------------------------------------------------------------- /directive-example/src/assets/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/directive-example/src/assets/images/image2.jpg -------------------------------------------------------------------------------- /directive-example/src/assets/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/directive-example/src/assets/images/image3.jpg -------------------------------------------------------------------------------- /directive-example/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /directive-example/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /directive-example/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/directive-example/src/favicon.ico -------------------------------------------------------------------------------- /directive-example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DirectiveExample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /directive-example/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 | -------------------------------------------------------------------------------- /directive-example/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /directive-example/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /directive-example/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /directive-example/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 | -------------------------------------------------------------------------------- /directive-example/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 | -------------------------------------------------------------------------------- /lifecycle-hook/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin: 20px 30px; 3 | padding: 20px 20px; 4 | background-color: #eee; 5 | text-align: center; 6 | } 7 | input[type=text]{ 8 | margin: 0px 10px; 9 | width: 250px; 10 | height: 24px; 11 | border: none; 12 | } 13 | button{ 14 | width: 100px; 15 | height: 25px; 16 | border: none; 17 | background-color: #CACFD2; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /lifecycle-hook/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |

This is projected content {{ inputText }}

6 | 7 | 9 |

10 | 11 |
-------------------------------------------------------------------------------- /lifecycle-hook/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'LifecycleHook'; 10 | 11 | inputText: string = ''; 12 | destroy: boolean = true; 13 | 14 | OnSubmit(inputEl: HTMLInputElement){ 15 | this.inputText = inputEl.value; 16 | } 17 | 18 | DestroyComponent(){ 19 | this.destroy = false; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /lifecycle-hook/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { DemoComponent } from './demo/demo.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | DemoComponent 11 | ], 12 | imports: [ 13 | BrowserModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /lifecycle-hook/src/app/demo/demo.component.css: -------------------------------------------------------------------------------- 1 | .demo{ 2 | margin: 30px 10px; 3 | padding: 10px 10px; 4 | background-color: #EAFAF1; 5 | border: #ABEBC6 2px solid; 6 | } -------------------------------------------------------------------------------- /lifecycle-hook/src/app/demo/demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |

The text you entered is: {{ value }}

3 | 4 |
-------------------------------------------------------------------------------- /lifecycle-hook/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /lifecycle-hook/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /lifecycle-hook/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/lifecycle-hook/src/favicon.ico -------------------------------------------------------------------------------- /lifecycle-hook/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LifecycleHook 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lifecycle-hook/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 | -------------------------------------------------------------------------------- /lifecycle-hook/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /lifecycle-hook/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /lifecycle-hook/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lifecycle-hook/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 | -------------------------------------------------------------------------------- /lifecycle-hook/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 | -------------------------------------------------------------------------------- /ng-content/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | padding: 20px 30px; 3 | background-color: #eee; 4 | } 5 | .more-products{ 6 | display: flex; 7 | } 8 | .btn-more{ 9 | min-width: 160px; 10 | margin-top: 10px; 11 | padding:10px 0px; 12 | background-color: #4CAF50; 13 | border: none; 14 | } -------------------------------------------------------------------------------- /ng-content/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

New in Smart Phones

3 | 4 |
5 | 6 |

New in iPhone

7 | 8 | 9 | 10 |

New in Samsung

11 | 12 | 13 | 14 |

New in OnePlus

15 | 16 | 17 | 18 |

New in MI

19 | 20 | 21 |
22 |
-------------------------------------------------------------------------------- /ng-content/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'NgContent'; 10 | } 11 | -------------------------------------------------------------------------------- /ng-content/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { ProductComponent } from './product/product.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | ProductComponent 11 | ], 12 | imports: [ 13 | BrowserModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /ng-content/src/app/product/product.component.css: -------------------------------------------------------------------------------- 1 | 2 | .card{ 3 | padding: 10px 10px; 4 | margin: 0px 10px; 5 | background-color: #fff; 6 | text-align: center; 7 | } 8 | .summary{ 9 | font-size: 14px; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /ng-content/src/app/product/product.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, 4 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 5 |

6 | 7 |
8 | -------------------------------------------------------------------------------- /ng-content/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 | -------------------------------------------------------------------------------- /ng-content/src/app/product/product.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-product', 5 | templateUrl: './product.component.html', 6 | styleUrls: ['./product.component.css'] 7 | }) 8 | export class ProductComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /ng-content/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /ng-content/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /ng-content/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/ng-content/src/favicon.ico -------------------------------------------------------------------------------- /ng-content/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgContent 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /ng-content/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 | -------------------------------------------------------------------------------- /ng-content/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body{ 3 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 4 | } -------------------------------------------------------------------------------- /ng-content/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /ng-content/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /ng-content/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 | -------------------------------------------------------------------------------- /ng-content/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 | -------------------------------------------------------------------------------- /subscribe-service/src/app/Services/enroll.service.ts: -------------------------------------------------------------------------------- 1 | export class EnrollService{ 2 | OnEnrollClicked(title: string){ 3 | alert('Thank you for enrolling to '+title+' course.'); 4 | } 5 | } -------------------------------------------------------------------------------- /subscribe-service/src/app/angular/angular.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin:10px 10px; 3 | background-color: #eee; 4 | width: 240px; 5 | } 6 | button{ 7 | width: 180px; 8 | height: 35px; 9 | border: none; 10 | background-color: #0E80F2; 11 | color: #fff; 12 | } -------------------------------------------------------------------------------- /subscribe-service/src/app/angular/angular.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{title}} Course

5 |
6 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /subscribe-service/src/app/angular/angular.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AngularComponent } from './angular.component'; 4 | 5 | describe('AngularComponent', () => { 6 | let component: AngularComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ AngularComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AngularComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /subscribe-service/src/app/angular/angular.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { EnrollService } from '../Services/enroll.service'; 3 | 4 | @Component({ 5 | selector: 'app-angular', 6 | templateUrl: './angular.component.html', 7 | styleUrls: ['./angular.component.css'], 8 | //providers: [EnrollService] 9 | }) 10 | export class AngularComponent{ 11 | title="Angular"; 12 | 13 | constructor(private enrollService: EnrollService){ 14 | 15 | } 16 | 17 | OnEnroll(){ 18 | this.enrollService.OnEnrollClicked(this.title); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /subscribe-service/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 640px; 3 | margin: 10px auto; 4 | display: flex; 5 | } -------------------------------------------------------------------------------- /subscribe-service/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /subscribe-service/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { EnrollService } from './Services/enroll.service'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'], 8 | providers: [EnrollService] 9 | }) 10 | export class AppComponent { 11 | constructor(private enrollService: EnrollService){ 12 | 13 | } 14 | title = 'SubscribeService'; 15 | } 16 | -------------------------------------------------------------------------------- /subscribe-service/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { JavascriptComponent } from './javascript/javascript.component'; 6 | import { AngularComponent } from './angular/angular.component'; 7 | import { EnrollService } from './Services/enroll.service'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | JavascriptComponent, 13 | AngularComponent 14 | ], 15 | imports: [ 16 | BrowserModule 17 | ], 18 | providers: [EnrollService], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /subscribe-service/src/app/javascript/javascript.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin:10px 10px; 3 | background-color: #eee; 4 | width: 240px; 5 | } 6 | button{ 7 | width: 180px; 8 | height: 35px; 9 | border: none; 10 | background-color: #F4D03F; 11 | } -------------------------------------------------------------------------------- /subscribe-service/src/app/javascript/javascript.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{title}} Course

5 |
6 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /subscribe-service/src/app/javascript/javascript.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { JavascriptComponent } from './javascript.component'; 4 | 5 | describe('JavascriptComponent', () => { 6 | let component: JavascriptComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ JavascriptComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(JavascriptComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /subscribe-service/src/app/javascript/javascript.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { EnrollService } from '../Services/enroll.service'; 3 | 4 | @Component({ 5 | selector: 'app-javascript', 6 | templateUrl: './javascript.component.html', 7 | styleUrls: ['./javascript.component.css'], 8 | providers: [EnrollService] 9 | }) 10 | export class JavascriptComponent{ 11 | title = "JavaScript"; 12 | 13 | constructor(private enrollService: EnrollService){ 14 | 15 | } 16 | 17 | OnEnroll(){ 18 | this.enrollService.OnEnrollClicked(this.title); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /subscribe-service/src/assets/images/angular.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/subscribe-service/src/assets/images/angular.jpeg -------------------------------------------------------------------------------- /subscribe-service/src/assets/images/javascript.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/subscribe-service/src/assets/images/javascript.jpeg -------------------------------------------------------------------------------- /subscribe-service/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /subscribe-service/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /subscribe-service/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/subscribe-service/src/favicon.ico -------------------------------------------------------------------------------- /subscribe-service/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SubscribeService 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /subscribe-service/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 | -------------------------------------------------------------------------------- /subscribe-service/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /subscribe-service/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /subscribe-service/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /subscribe-service/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 | -------------------------------------------------------------------------------- /subscribe-service/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 | -------------------------------------------------------------------------------- /template-reference/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/template-reference/src/app/app.component.css -------------------------------------------------------------------------------- /template-reference/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

You have selected {{ customer.selectedCustomer?.name}}

-------------------------------------------------------------------------------- /template-reference/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'TemplateReference'; 10 | } 11 | -------------------------------------------------------------------------------- /template-reference/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { DemoComponent } from './demo/demo.component'; 6 | import { CustomerListComponent } from './customer-list/customer-list.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | DemoComponent, 12 | CustomerListComponent 13 | ], 14 | imports: [ 15 | BrowserModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /template-reference/src/app/customer-list/customer-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/template-reference/src/app/customer-list/customer-list.component.css -------------------------------------------------------------------------------- /template-reference/src/app/customer-list/customer-list.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
NoNameAddressCityCountrySelect
{{customer.customerNo}}{{customer.name}}{{customer.address}}{{customer.city}}{{customer.country}}
23 | -------------------------------------------------------------------------------- /template-reference/src/app/customer-list/customer-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CustomerListComponent } from './customer-list.component'; 4 | 5 | describe('CustomerListComponent', () => { 6 | let component: CustomerListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CustomerListComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CustomerListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /template-reference/src/app/customer-list/customer-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Customer } from './customer'; 3 | 4 | @Component({ 5 | selector: 'app-customer-list', 6 | templateUrl: './customer-list.component.html', 7 | styleUrls: ['./customer-list.component.css'] 8 | }) 9 | export class CustomerListComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit(): void { 14 | } 15 | selectedCustomer; 16 | 17 | customers: Customer[] = [ 18 | {customerNo: 1, name: 'Mark Vought', address: '', city: 'London', country: 'UK'}, 19 | {customerNo: 2, name: 'John Smith', address: '', city: 'New York', country: 'USA'}, 20 | {customerNo: 3, name: 'Merry Ann', address: '', city: 'Berlin', country: 'Germany'}, 21 | {customerNo: 4, name: 'Rajesh Khatri', address: '', city: 'Mumbai', country: 'India'}, 22 | {customerNo: 5, name: 'Rahul Raj', address: '', city: 'Delhi', country: 'India'} 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /template-reference/src/app/customer-list/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | customerNo: number; 3 | name:string ; 4 | address:string; 5 | city:string; 6 | country:string; 7 | } -------------------------------------------------------------------------------- /template-reference/src/app/demo/demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/template-reference/src/app/demo/demo.component.css -------------------------------------------------------------------------------- /template-reference/src/app/demo/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

{{ myVariable.value }}

4 | -------------------------------------------------------------------------------- /template-reference/src/app/demo/demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DemoComponent } from './demo.component'; 4 | 5 | describe('DemoComponent', () => { 6 | let component: DemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ DemoComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /template-reference/src/app/demo/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-demo', 5 | templateUrl: './demo.component.html', 6 | styleUrls: ['./demo.component.css'] 7 | }) 8 | export class DemoComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | sayHello(inputEl: HTMLInputElement){ 15 | //alert('Hello '+inputEl.value); 16 | console.log(inputEl) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /template-reference/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /template-reference/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /template-reference/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/template-reference/src/favicon.ico -------------------------------------------------------------------------------- /template-reference/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TemplateReference 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template-reference/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 | -------------------------------------------------------------------------------- /template-reference/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /template-reference/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /template-reference/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /template-reference/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 | -------------------------------------------------------------------------------- /template-reference/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 | -------------------------------------------------------------------------------- /user-detail-service/src/app/Services/user.service.ts: -------------------------------------------------------------------------------- 1 | import {EventEmitter} from '@angular/core'; 2 | 3 | export class UserService{ 4 | users = [ 5 | {name: 'John', job: 'Teacher', gender: 'Male', country: 'United States', age: 35, avatar: 'assets/avatar/john.jpeg'}, 6 | {name: 'Mark', job: 'Designer', gender: 'Male', country: 'Germany', age: 35, avatar: 'assets/avatar/mark.jpeg'}, 7 | {name: 'Merry', job: 'Lawyer', gender: 'Female', country: 'Ireland', age: 35, avatar: 'assets/avatar/merry.jpeg'}, 8 | {name: 'Steve', job: 'Doctor', gender: 'Male', country: 'India', age: 35, avatar: 'assets/avatar/steve.jpeg'} 9 | ] 10 | 11 | OnShowDetailsClicked = new EventEmitter<{name: string, job: string, gender: string, country: string, age: number, avatar: string}>(); 12 | 13 | ShowUserDetails(user: {name: string, job: string, gender: string, country: string, age: number, avatar: string}){ 14 | this.OnShowDetailsClicked.emit(user); 15 | } 16 | } -------------------------------------------------------------------------------- /user-detail-service/src/app/all-users/all-users.component.css: -------------------------------------------------------------------------------- 1 | .user-container{ 2 | display: flex; 3 | margin: 5px 0px; 4 | } 5 | .user-name{ 6 | width: 100px; 7 | padding: 10px 30px; 8 | background-color: #ddd; 9 | } 10 | .user-job{ 11 | width: 100px; 12 | padding: 10px 20px; 13 | background-color: #ddd; 14 | } 15 | button{ 16 | width: 100px; 17 | margin: 0px 10px; 18 | } -------------------------------------------------------------------------------- /user-detail-service/src/app/all-users/all-users.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
{{user.name}}
4 |
{{user.job}}
5 | 6 |
7 |
8 | -------------------------------------------------------------------------------- /user-detail-service/src/app/all-users/all-users.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AllUsersComponent } from './all-users.component'; 4 | 5 | describe('AllUsersComponent', () => { 6 | let component: AllUsersComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ AllUsersComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AllUsersComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /user-detail-service/src/app/all-users/all-users.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../Services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-all-users', 6 | templateUrl: './all-users.component.html', 7 | styleUrls: ['./all-users.component.css'] 8 | }) 9 | export class AllUsersComponent implements OnInit { 10 | 11 | constructor(private userService: UserService) { } 12 | 13 | users: {name: string, job: string, gender: string, country: string, age: number, avatar: string}[] = []; 14 | 15 | ngOnInit(): void { 16 | this.users = this.userService.users; 17 | } 18 | 19 | ShowDetails(user: {name: string, job: string, gender: string, country: string, age: number, avatar: string}){ 20 | this.userService.ShowUserDetails(user); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /user-detail-service/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 720px; 3 | margin: 30px auto; 4 | padding: 10px 20px; 5 | background-color: #f4f4f4; 6 | display: flex; 7 | } -------------------------------------------------------------------------------- /user-detail-service/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

All Users

4 | 5 |
6 |
7 | 8 |
9 |
-------------------------------------------------------------------------------- /user-detail-service/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { UserService } from './Services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'], 8 | providers: [UserService] 9 | }) 10 | export class AppComponent { 11 | title = 'UserDetailService'; 12 | 13 | constructor(private userService: UserService){ 14 | 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /user-detail-service/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { AllUsersComponent } from './all-users/all-users.component'; 6 | import { UserDetailComponent } from './user-detail/user-detail.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | AllUsersComponent, 12 | UserDetailComponent 13 | ], 14 | imports: [ 15 | BrowserModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /user-detail-service/src/app/user-detail/user-detail.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | margin: 20px 0px; 3 | background-color: #dedede; 4 | padding: 20px 20px; 5 | display: flex; 6 | } 7 | 8 | .user-detail{ 9 | padding: 20px 20px; 10 | } -------------------------------------------------------------------------------- /user-detail-service/src/app/user-detail/user-detail.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |

Name: {{user.name}}

7 |

Occupation: {{user.job}}

8 |

Country: {{user.country}}

9 |

Gender: {{user.gender}}

10 |

Age:{{user.age}}

11 |
12 |
13 | -------------------------------------------------------------------------------- /user-detail-service/src/app/user-detail/user-detail.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserDetailComponent } from './user-detail.component'; 4 | 5 | describe('UserDetailComponent', () => { 6 | let component: UserDetailComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ UserDetailComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UserDetailComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /user-detail-service/src/app/user-detail/user-detail.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../Services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-user-detail', 6 | templateUrl: './user-detail.component.html', 7 | styleUrls: ['./user-detail.component.css'] 8 | }) 9 | export class UserDetailComponent implements OnInit { 10 | 11 | constructor(private userService: UserService) { } 12 | 13 | user: {name: string, job: string, gender: string, country: string, age: number, avatar: string}; 14 | 15 | ngOnInit(): void { 16 | this.userService.OnShowDetailsClicked.subscribe((data: {name: string, job: string, gender: string, country: string, age: number, avatar: string}) => { 17 | this.user = data; 18 | }) 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /user-detail-service/src/assets/avatar/john.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/user-detail-service/src/assets/avatar/john.jpeg -------------------------------------------------------------------------------- /user-detail-service/src/assets/avatar/mark.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/user-detail-service/src/assets/avatar/mark.jpeg -------------------------------------------------------------------------------- /user-detail-service/src/assets/avatar/merry.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/user-detail-service/src/assets/avatar/merry.jpeg -------------------------------------------------------------------------------- /user-detail-service/src/assets/avatar/steve.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/user-detail-service/src/assets/avatar/steve.jpeg -------------------------------------------------------------------------------- /user-detail-service/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /user-detail-service/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /user-detail-service/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/user-detail-service/src/favicon.ico -------------------------------------------------------------------------------- /user-detail-service/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UserDetailService 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /user-detail-service/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 | -------------------------------------------------------------------------------- /user-detail-service/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | *{ 3 | margin: 0px 0px; 4 | padding: 0px 0px; 5 | box-sizing: border-box; 6 | font-size: 16px; 7 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 8 | } -------------------------------------------------------------------------------- /user-detail-service/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /user-detail-service/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /user-detail-service/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 | -------------------------------------------------------------------------------- /user-detail-service/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 | -------------------------------------------------------------------------------- /user-service/src/app/Services/logger.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | 3 | @Injectable() 4 | export class LoggerService{ 5 | 6 | LogMessage(name: string, status: string){ 7 | console.log('A new user with username "'+name+'" with status '+status+' has been added.'); 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /user-service/src/app/Services/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { LoggerService } from "./logger.service"; 3 | 4 | @Injectable() 5 | export class UserService{ 6 | constructor(private logger: LoggerService){ 7 | 8 | } 9 | 10 | users = [ 11 | {name: 'John', status: 'active'}, 12 | {name: 'Mark', status: 'inactive'}, 13 | {name: 'Steve', status: 'active'} 14 | ] 15 | 16 | AddNewUser(name: string, status: string){ 17 | this.users.push({name: name, status: status}); 18 | this.logger.LogMessage(name, status); 19 | } 20 | } -------------------------------------------------------------------------------- /user-service/src/app/adduser/adduser.component.css: -------------------------------------------------------------------------------- 1 | .form{ 2 | text-align: center; 3 | margin-bottom: 50px; 4 | } 5 | #username{ 6 | width: 220px; 7 | height: 30px; 8 | font-size: 20px; 9 | padding: 2px 30px; 10 | border: none; 11 | margin: 5px 0px; 12 | } 13 | #status{ 14 | width: 280px; 15 | height: 35px; 16 | font-size: 20px; 17 | padding: 2px 30px; 18 | border: none; 19 | margin: 5px 0px; 20 | } 21 | button{ 22 | width: 280px; 23 | height: 35px; 24 | font-size: 20px; 25 | padding: 2px 30px; 26 | border: none; 27 | margin: 5px 0px; 28 | background-color: #A3E4D7; 29 | } -------------------------------------------------------------------------------- /user-service/src/app/adduser/adduser.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 10 |
11 |
12 | 13 |
14 |
15 | -------------------------------------------------------------------------------- /user-service/src/app/adduser/adduser.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AdduserComponent } from './adduser.component'; 4 | 5 | describe('AdduserComponent', () => { 6 | let component: AdduserComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ AdduserComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AdduserComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /user-service/src/app/adduser/adduser.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../Services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-adduser', 6 | templateUrl: './adduser.component.html', 7 | styleUrls: ['./adduser.component.css'] 8 | //providers: [UserService] 9 | }) 10 | export class AdduserComponent implements OnInit { 11 | username: string = ''; 12 | status: string = 'active'; 13 | 14 | constructor(private userService: UserService) { } 15 | 16 | ngOnInit(): void { 17 | } 18 | 19 | AddUser(){ 20 | this.userService.AddNewUser(this.username, this.status); 21 | //console.log(this.userService.users); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /user-service/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 640px; 3 | margin: 30px auto; 4 | padding: 20px 30px; 5 | background-color: #f7f7f7; 6 | font-family: 'Lucida Sans'; 7 | } 8 | .user-div{ 9 | display: flex; 10 | margin: 5px 0px; 11 | } 12 | .user-name{ 13 | width:70%; 14 | padding: 10px 30px; 15 | background-color: #eee; 16 | } 17 | .user-status{ 18 | width:10%; 19 | padding: 10px 40px; 20 | background-color: #FADBD8; 21 | } 22 | .status-btn{ 23 | width:10%; 24 | margin: 0px 10px; 25 | } 26 | -------------------------------------------------------------------------------- /user-service/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 |
{{user.name}}
6 |
{{user.status}}
7 |
8 |
-------------------------------------------------------------------------------- /user-service/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { LoggerService } from './Services/logger.service'; 3 | import { UserService } from './Services/user.service'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'], 9 | providers: [UserService] 10 | }) 11 | export class AppComponent implements OnInit{ 12 | title = 'UserService'; 13 | 14 | constructor(private userService: UserService){ 15 | 16 | } 17 | 18 | users: {name: string, status: string}[] = []; 19 | 20 | ngOnInit(){ 21 | this.users = this.userService.users; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /user-service/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { AdduserComponent } from './adduser/adduser.component'; 7 | import { LoggerService } from './Services/logger.service'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | AdduserComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | FormsModule 17 | ], 18 | providers: [LoggerService], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /user-service/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /user-service/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /user-service/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/user-service/src/favicon.ico -------------------------------------------------------------------------------- /user-service/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UserService 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /user-service/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 | -------------------------------------------------------------------------------- /user-service/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /user-service/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /user-service/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /user-service/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 | -------------------------------------------------------------------------------- /user-service/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 | -------------------------------------------------------------------------------- /view-child/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/view-child/src/app/app.component.css -------------------------------------------------------------------------------- /view-child/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 |
6 | 7 | 8 |
9 | 10 | {{ demoComp.sayHello()}} -------------------------------------------------------------------------------- /view-child/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, ViewChild } from '@angular/core'; 2 | import { DemoComponent } from './demo/demo.component'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | title = 'ViewChild'; 11 | 12 | @ViewChild('dobInput') dateOfBirth: ElementRef; 13 | @ViewChild('ageInput') age: ElementRef; 14 | @ViewChild(DemoComponent, {static: true}) demoComp: DemoComponent; 15 | 16 | calculateAge(){ 17 | let birthYear = new Date(this.dateOfBirth.nativeElement.value).getFullYear(); 18 | let currentYear = new Date().getFullYear(); 19 | let age = currentYear - birthYear; 20 | this.age.nativeElement.value = age; 21 | // console.log(this.dateOfBirth); 22 | // console.log(this.age); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /view-child/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { DemoComponent } from './demo/demo.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | DemoComponent 11 | ], 12 | imports: [ 13 | BrowserModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /view-child/src/app/demo/demo.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/view-child/src/app/demo/demo.component.css -------------------------------------------------------------------------------- /view-child/src/app/demo/demo.component.html: -------------------------------------------------------------------------------- 1 |

demo works!

2 | -------------------------------------------------------------------------------- /view-child/src/app/demo/demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DemoComponent } from './demo.component'; 4 | 5 | describe('DemoComponent', () => { 6 | let component: DemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ DemoComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DemoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /view-child/src/app/demo/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-demo', 5 | templateUrl: './demo.component.html', 6 | styleUrls: ['./demo.component.css'] 7 | }) 8 | export class DemoComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | sayHello(){ 15 | console.log('Hello from demo component class!'); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /view-child/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /view-child/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /view-child/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/view-child/src/favicon.ico -------------------------------------------------------------------------------- /view-child/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ViewChild 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /view-child/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 | -------------------------------------------------------------------------------- /view-child/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /view-child/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /view-child/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /view-child/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 | -------------------------------------------------------------------------------- /view-child/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 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .app-component{ 2 | text-align: center; 3 | border: #bbb 2px solid; 4 | padding-top: 40px; 5 | padding-bottom: 40px; 6 | margin-top:30px; 7 | margin-left: 10px; 8 | margin-right:10px; 9 | } 10 | .component-container{ 11 | display: flex; 12 | text-align: center; 13 | } 14 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

App Component

4 |

This is app component.

5 | 6 |
7 | 8 |
9 | 10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | //encapsulation: ViewEncapsulation.None 8 | }) 9 | export class AppComponent { 10 | title = 'ViewEncapsulation'; 11 | } 12 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { Comp1Component } from './comp1/comp1.component'; 6 | import { Comp2Component } from './comp2/comp2.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | Comp1Component, 12 | Comp2Component 13 | ], 14 | imports: [ 15 | BrowserModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp1/comp1.component.css: -------------------------------------------------------------------------------- 1 | .comp1-component{ 2 | border: #bbb 2px solid; 3 | padding: 40px 85px; 4 | margin: 10px 10px; 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp1/comp1.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Comp1 Component

3 |

This is Comp1 Component.

4 | 5 |
6 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp1/comp1.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Comp1Component } from './comp1.component'; 4 | 5 | describe('Comp1Component', () => { 6 | let component: Comp1Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ Comp1Component ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Comp1Component); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp1/comp1.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-comp1', 5 | templateUrl: './comp1.component.html', 6 | styleUrls: ['./comp1.component.css'] 7 | }) 8 | export class Comp1Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp2/comp2.component.css: -------------------------------------------------------------------------------- 1 | .comp2-component{ 2 | border: #bbb 2px solid; 3 | padding: 40px 85px; 4 | margin: 10px 10px; 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp2/comp2.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Comp2 Component

3 |

This is Comp2 Component.

4 | 5 |
6 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp2/comp2.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Comp2Component } from './comp2.component'; 4 | 5 | describe('Comp2Component', () => { 6 | let component: Comp2Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ Comp2Component ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Comp2Component); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /view-encapsulation/src/app/comp2/comp2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-comp2', 5 | templateUrl: './comp2.component.html', 6 | styleUrls: ['./comp2.component.css'], 7 | encapsulation: ViewEncapsulation.ShadowDom 8 | }) 9 | export class Comp2Component implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit(): void { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /view-encapsulation/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /view-encapsulation/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /view-encapsulation/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manojjha86/complete-angular-13-course/8c3b663c562eb52591de4943377da317d828d515/view-encapsulation/src/favicon.ico -------------------------------------------------------------------------------- /view-encapsulation/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ViewEncapsulation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /view-encapsulation/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 | -------------------------------------------------------------------------------- /view-encapsulation/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body{ 3 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 4 | } 5 | 6 | button{ 7 | width: 120px; 8 | height: 30px; 9 | border: none; 10 | text-align: center; 11 | background-color: coral; 12 | } -------------------------------------------------------------------------------- /view-encapsulation/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 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /view-encapsulation/test.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /view-encapsulation/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 | -------------------------------------------------------------------------------- /view-encapsulation/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 | --------------------------------------------------------------------------------