[ { "path": ".browserslistrc", "content": "# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n# For IE 9-11 support, please uncomment the last line of the file and adjust as needed\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\n# IE 9-11" }, { "path": ".editorconfig", "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n# misc\n/.angular/cache\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 Angular University\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "\n## Angular Core Deep Dive (Video Course)\n\nThis repository contains the code of the [Angular Core Deep Dive](https://angular-university.io/course/angular-course).\n\nThis course repository is updated to Angular 21:\n\n![Angular Core Deep Dive](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-core-deep-dive-new-2.jpg)\n\n# Installation pre-requisites\n\nIMPORTANT: Please use Node 22 LTS (Long Term Support version). \n\n# Installing the Angular CLI\n\nWith the following command the angular-cli will be installed globally in your machine:\n\n npm install -g @angular/cli\n\n\n# How To install this repository\n\nWe can install the master branch using the following commands:\n\n git clone https://github.com/angular-university/angular-course.git\n\nThis repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:\n\n cd angular-course\n npm install\n\nIts also possible to install the modules as usual using npm:\n\n npm install\n\nNPM 5 or above has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates.\n\nThis should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.\n\n# To Run the Development Backend Server\n\nIn order to be able to provide realistic examples, we will need in our playground a small REST API backend server. We can start the sample application backend with the following command:\n\n npm run server\n\nThis is a small Node REST API server.\n\n# To run the Development UI Server\n\nTo run the frontend part of our code, we will use the Angular CLI:\n\n npm start\n\nThe application is visible at port 4200: [http://localhost:4200](http://localhost:4200)\n\n\n\n# Important\n\nThis repository has multiple branches, have a look at the beginning of each section to see the name of the branch.\n\nAt certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:\n\n git branch -a\n\n The remote branches have their starting in origin, such as for example 1-navigation-and-containers.\n\nWe can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:\n\n git checkout -b section-1 origin/1-navigation-and-containers\n\nIt's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.\n\n# Other Courses\n# Modern Angular With Signals\n\nIf you are looking for the [Modern Angular With Signals Course](https://angular-university.io/course/angular-signals-course), the repo with the full code can be found here:\n\n![Modern Angular With Signals Course](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-signals-course.jpg)\n\n\n# RxJs In Practice Course\n\nIf you are looking for the [RxJs In Practice Course](https://angular-university.io/course/rxjs-course), the repo with the full code can be found here:\n\n![RxJs In Practice Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png)\n\n\n# NgRx In Depth Course\n\nIf you are looking for the [NgRx In Depth Course](https://angular-university.io/course/angular-ngrx-course), the repo with the full code can be found here:\n\n![NgRx In Depth Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png)\n\n\n\n# Angular PWA Course\n\nIf you are looking for the [Angular PWA Course](https://angular-university.io/course/angular-pwa-course), the repo with the full code can be found here:\n\n![Angular PWA Course - Build the future of the Web Today](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png)\n\n# Angular Security Masterclass\n\nIf you are looking for the [Angular Security Masterclass](https://angular-university.io/course/angular-security-course), the repo with the full code can be found here:\n\n[Angular Security Masterclass](https://github.com/angular-university/angular-security-course).\n\n![Angular Security Masterclass](https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png)\n\n# Angular Advanced Library Laboratory Course\n\nIf you are looking for the Angular Advanced Course, the repo with the full code can be found here:\n\n[Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-university.io/course/angular-advanced-course).\n\n![Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png)\n\n\n## RxJs and Reactive Patterns Angular Architecture Course\n\nIf you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:\n\n[RxJs and Reactive Patterns Angular Architecture Course](https://angular-university.io/course/reactive-angular-architecture-course)\n\n![RxJs and Reactive Patterns Angular Architecture Course](https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png)\n\n\n\n## Angular Ngrx Reactive Extensions Architecture Course\n\nIf you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here:\n\n[Angular Ngrx Reactive Extensions Architecture Course](https://angular-university.io/course/angular2-ngrx)\n\n[Github repo for this course](https://github.com/angular-university/ngrx-course)\n\n![Angular Ngrx Course](https://angular-academy.s3.amazonaws.com/thumbnails/ngrx-angular.png)\n\n\n\n## Angular 2 and Firebase - Build a Web Application Course\n\nIf you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here:\n\n[Angular 2 and Firebase - Build a Web Application](https://angular-university.io/course/build-an-application-with-angular2)\n\n[Github repo for this course](https://github.com/angular-university/angular-firebase-app)\n\n![Angular firebase course](https://angular-academy.s3.amazonaws.com/thumbnails/angular_app-firebase-small.jpg)\n\n\n## Complete Typescript 2 Course - Build A REST API\n\nIf you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:\n\n[https://angular-university.io/course/typescript-2-tutorial](https://github.com/angular-university/complete-typescript-course)\n\n[Github repo for this course](https://github.com/angular-university/complete-typescript-course)\n\n![Complete Typescript Course](https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png)\n\n" }, { "path": "angular.json", "content": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"angular-course\": {\n \"i18n\": {\n \"locales\": {\n \"fr\": {\n \"translation\": \"src/locale/messages.fr.xlf\",\n \"baseHref\": \"\"\n }\n }\n },\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"projectType\": \"application\",\n \"prefix\": \"\",\n \"schematics\": {},\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": {\n \"base\": \"dist/angular-course\"\n },\n \"index\": \"src/index.html\",\n \"polyfills\": [\n \"src/polyfills.ts\"\n ],\n \"tsConfig\": \"src/tsconfig.app.json\",\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n ],\n \"styles\": [\n {\n \"input\": \"node_modules/@angular/material/prebuilt-themes/indigo-pink.css\",\n \"inject\": true\n },\n \"src/styles.css\"\n ],\n \"scripts\": [\n {\n \"input\": \"node_modules/document-register-element/build/document-register-element.js\",\n \"inject\": true\n }\n ],\n \"extractLicenses\": false,\n \"sourceMap\": true,\n \"optimization\": false,\n \"namedChunks\": true,\n \"browser\": \"src/main.ts\"\n },\n \"configurations\": {\n \"production\": {\n \"budgets\": [\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"6kb\"\n }\n ],\n \"fileReplacements\": [\n {\n \"replace\": \"src/environments/environment.ts\",\n \"with\": \"src/environments/environment.prod.ts\"\n }\n ],\n \"optimization\": true,\n \"outputHashing\": \"all\",\n \"sourceMap\": false,\n \"namedChunks\": false,\n \"extractLicenses\": true\n },\n \"fr\": {\n \"budgets\": [\n {\n \"type\": \"anyComponentStyle\",\n \"maximumWarning\": \"6kb\"\n }\n ],\n \"outputPath\": {\n \"base\": \"dist/angular-course-fr/\"\n },\n \"i18nFile\": \"src/locale/messages.fr.xlf\",\n \"i18nLocale\": \"fr\",\n \"i18nMissingTranslation\": \"ignore\"\n }\n }\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"options\": {\n \"buildTarget\": \"angular-course:build\"\n },\n \"configurations\": {\n \"production\": {\n \"buildTarget\": \"angular-course:build:production\"\n },\n \"fr\": {\n \"buildTarget\": \"angular-course:build:fr\"\n }\n }\n },\n \"extract-i18n\": {\n \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n \"options\": {\n \"buildTarget\": \"angular-course:build\"\n }\n },\n \"test\": {\n \"builder\": \"@angular-devkit/build-angular:karma\",\n \"options\": {\n \"main\": \"src/test.ts\",\n \"polyfills\": \"src/polyfills.ts\",\n \"tsConfig\": \"src/tsconfig.spec.json\",\n \"karmaConfig\": \"src/karma.conf.js\",\n \"styles\": [\n {\n \"input\": \"node_modules/@angular/material/prebuilt-themes/indigo-pink.css\",\n \"inject\": true\n },\n \"src/styles.css\"\n ],\n \"scripts\": [],\n \"assets\": [\n \"src/favicon.ico\",\n \"src/assets\"\n ]\n }\n }\n }\n },\n \"angular-course-e2e\": {\n \"root\": \"e2e/\",\n \"projectType\": \"application\",\n \"architect\": {\n \"e2e\": {\n \"builder\": \"@angular-devkit/build-angular:protractor\",\n \"options\": {\n \"protractorConfig\": \"e2e/protractor.conf.js\",\n \"devServerTarget\": \"angular-course:serve\"\n },\n \"configurations\": {\n \"production\": {\n \"devServerTarget\": \"angular-course:serve:production\"\n }\n }\n }\n }\n }\n },\n \"cli\": {\n \"analytics\": \"e878a578-eb4f-4c7c-bbaf-6f0c4ac42135\"\n },\n \"schematics\": {\n \"@schematics/angular:component\": {\n \"type\": \"component\"\n },\n \"@schematics/angular:directive\": {\n \"type\": \"directive\"\n },\n \"@schematics/angular:service\": {\n \"type\": \"service\"\n },\n \"@schematics/angular:guard\": {\n \"typeSeparator\": \".\"\n },\n \"@schematics/angular:interceptor\": {\n \"typeSeparator\": \".\"\n },\n \"@schematics/angular:module\": {\n \"typeSeparator\": \".\"\n },\n \"@schematics/angular:pipe\": {\n \"typeSeparator\": \".\"\n },\n \"@schematics/angular:resolver\": {\n \"typeSeparator\": \".\"\n }\n }\n}\n" }, { "path": "e2e/protractor.conf.js", "content": "// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter } = require('jasmine-spec-reporter');\n\nexports.config = {\n allScriptsTimeout: 11000,\n specs: [\n './src/**/*.e2e-spec.ts'\n ],\n capabilities: {\n 'browserName': 'chrome'\n },\n directConnect: true,\n baseUrl: 'http://localhost:4200/',\n framework: 'jasmine',\n jasmineNodeOpts: {\n showColors: true,\n defaultTimeoutInterval: 30000,\n print: function() {}\n },\n onPrepare() {\n require('ts-node').register({\n project: require('path').join(__dirname, './tsconfig.e2e.json')\n });\n jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));\n }\n};" }, { "path": "e2e/src/app.e2e-spec.ts", "content": "import { AppPage } from './app.po';\n\ndescribe('workspace-project App', () => {\n let page: AppPage;\n\n beforeEach(() => {\n page = new AppPage();\n });\n\n it('should display welcome message', () => {\n page.navigateTo();\n expect(page.getParagraphText()).toEqual('Welcome to angular-course!');\n });\n});\n" }, { "path": "e2e/src/app.po.ts", "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo() {\n return browser.get('/');\n }\n\n getParagraphText() {\n return element(by.css('app-root h1')).getText();\n }\n}\n" }, { "path": "e2e/tsconfig.e2e.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"module\": \"commonjs\",\n \"target\": \"es5\",\n \"types\": [\n \"jasmine\",\n \"jasminewd2\",\n \"node\"\n ]\n }\n}" }, { "path": "package.json", "content": "{\n \"name\": \"angular-course\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve --proxy-config ./proxy.json\",\n \"build\": \"ng build\",\n \"test\": \"ng test\",\n \"lint\": \"ng lint\",\n \"e2e\": \"ng e2e\",\n \"server\": \"ts-node -P ./server.tsconfig.json ./server.ts\"\n },\n \"private\": true,\n \"dependencies\": {\n \"@angular/animations\": \"^21.0.1\",\n \"@angular/cdk\": \"^21.0.1\",\n \"@angular/common\": \"^21.0.1\",\n \"@angular/compiler\": \"^21.0.1\",\n \"@angular/core\": \"^21.0.1\",\n \"@angular/elements\": \"^21.0.1\",\n \"@angular/forms\": \"^21.0.1\",\n \"@angular/localize\": \"^21.0.1\",\n \"@angular/material\": \"^21.0.1\",\n \"@angular/platform-browser\": \"^21.0.1\",\n \"@angular/platform-browser-dynamic\": \"^21.0.1\",\n \"@angular/router\": \"^21.0.1\",\n \"body-parser\": \"^1.18.3\",\n \"core-js\": \"^2.5.4\",\n \"cors\": \"^2.8.5\",\n \"document-register-element\": \"1.8.1\",\n \"express\": \"^4.16.3\",\n \"rxjs\": \"^6.5.4\",\n \"zone.js\": \"~0.15.0\"\n },\n \"devDependencies\": {\n \"@angular-devkit/build-angular\": \"^21.0.1\",\n \"@angular/cli\": \"^21.0.1\",\n \"@angular/compiler-cli\": \"^21.0.1\",\n \"@angular/language-service\": \"^21.0.1\",\n \"@types/jasmine\": \"~3.6.0\",\n \"@types/jasminewd2\": \"~2.0.3\",\n \"@types/node\": \"^12.11.1\",\n \"jasmine-core\": \"~3.8.0\",\n \"jasmine-spec-reporter\": \"~5.0.0\",\n \"karma\": \"~6.3.2\",\n \"karma-chrome-launcher\": \"~3.1.0\",\n \"karma-coverage-istanbul-reporter\": \"~3.0.2\",\n \"karma-jasmine\": \"~4.0.0\",\n \"karma-jasmine-html-reporter\": \"^1.7.0\",\n \"ts-node\": \"~5.0.1\",\n \"tslint\": \"~6.1.0\",\n \"typescript\": \"~5.9.3\"\n }\n}\n" }, { "path": "proxy.json", "content": "{\n \"/api\": {\n \"target\": \"http://localhost:9000\",\n \"secure\": false\n }\n}" }, { "path": "server/get-courses.route.ts", "content": "import {Request, Response} from 'express';\nimport {COURSES} from '../src/db-data';\n\n\nexport function getAllCourses(req: Request, res: Response) {\n\n\n res.status(200).json(Object.values(COURSES));\n\n\n}\n\n\nexport function getCourseById(req: Request, res: Response) {\n\n const courseId = req.params['id'];\n\n const courses: any = Object.values(COURSES);\n\n const course = courses.find(course => course.id == courseId);\n\n res.status(200).json(course);\n}\n" }, { "path": "server/save-course.route.ts", "content": "import {Request, Response} from 'express';\nimport {findCourseById} from '../src/db-data';\n\n\nexport function saveCourse(req: Request, res: Response) {\n\n const id = req.params[\"id\"],\n changes = req.body;\n\n console.log(\"Saving course\", id, JSON.stringify(changes));\n\n const course = findCourseById(id);\n\n course.description = changes.description;\n\n res.status(200).json(course);\n\n}\n" }, { "path": "server.ts", "content": "\n\nimport * as express from 'express';\nimport {Application} from \"express\";\nimport {getAllCourses} from './server/get-courses.route';\nimport {saveCourse} from './server/save-course.route';\nconst cors = require('cors');\n\nconst bodyParser = require('body-parser');\n\nconst app: Application = express();\n\napp.use(cors({origin: true}));\napp.use(bodyParser.json());\n\napp.route('/api/courses').get(getAllCourses);\n\napp.route('/api/courses/:id').put(saveCourse);\n\n\n\nconst httpServer = app.listen(9000, () => {\n console.log(\"HTTP REST API Server running at http://localhost:\" + httpServer.address().port);\n});\n\n\n\n" }, { "path": "server.tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"commonjs\"\n }\n}\n" }, { "path": "src/app/app.component.css", "content": "\n.top-menu {\n background: #1976d2;\n padding: 2px 15px;\n}\n\n.logo {\n max-height: 55px;\n}\n\n\n.courses {\n max-width: 400px;\n margin: 50px auto;\n}\n\n\n\n\n\n" }, { "path": "src/app/app.component.html", "content": "
\n\n \n\n
\n\n
\n\n
\n\n\n \n\n
\n\n
\n\n @for (course of courses ; track course) {\n \n \n \n }\n\n\n
\n\n\n
\n\n\n\n\n" }, { "path": "src/app/app.component.spec.ts", "content": "import { TestBed, waitForAsync } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\ndescribe('AppComponent', () => {\n beforeEach(waitForAsync(() => {\n TestBed.configureTestingModule({\n declarations: [\n AppComponent\n ],\n }).compileComponents();\n }));\n it('should create the app', waitForAsync(() => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.debugElement.componentInstance;\n expect(app).toBeTruthy();\n }));\n it(`should have as title 'angular-course'`, waitForAsync(() => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.debugElement.componentInstance;\n expect(app.title).toEqual('angular-course');\n }));\n it('should render title in a h1 tag', waitForAsync(() => {\n const fixture = TestBed.createComponent(AppComponent);\n fixture.detectChanges();\n const compiled = fixture.debugElement.nativeElement;\n expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-course!');\n }));\n});\n" }, { "path": "src/app/app.component.ts", "content": "import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, Injector, OnInit} from '@angular/core';\nimport {Course} from './model/course';\nimport {Observable} from 'rxjs';\nimport {AppConfig, CONFIG_TOKEN} from './config';\nimport {COURSES} from '../db-data';\nimport {CoursesService} from './courses/courses.service';\nimport {createCustomElement} from '@angular/elements';\nimport {CourseTitleComponent} from './course-title/course-title.component';\nimport {CourseCardComponent} from './courses/course-card/course-card.component';\nimport {CourseImageComponent} from './courses/course-image/course-image.component';\n\n\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css'],\n imports: [\n CourseCardComponent,\n CourseImageComponent\n]\n})\nexport class AppComponent implements OnInit {\n\n courses: Course[] = COURSES;\n\n coursesTotal = this.courses.length;\n\n constructor(\n private coursesService: CoursesService,\n @Inject(CONFIG_TOKEN) private config: AppConfig,\n private injector: Injector) {\n\n }\n\n ngOnInit() {\n\n //const htmlElement = createCustomElement(CourseTitleComponent, {injector:this.injector});\n\n //customElements.define('course-title', htmlElement);\n\n }\n\n onEditCourse() {\n\n this.courses[1].category = 'ADVANCED';\n\n }\n\n save(course: Course) {\n this.coursesService.saveCourse(course)\n .subscribe(\n () => console.log('Course Saved!')\n );\n }\n\n\n}\n" }, { "path": "src/app/config.ts", "content": "import {InjectionToken} from '@angular/core';\n\n\nexport interface AppConfig {\n apiUrl:string;\n courseCacheSize:number;\n}\n\n\nexport const APP_CONFIG:AppConfig = {\n apiUrl: 'http://localhost:9000',\n courseCacheSize: 10\n}\n\n\nexport const CONFIG_TOKEN =\n new InjectionToken('CONFIG_TOKEN',\n {\n providedIn: 'root',\n factory: () => APP_CONFIG\n });" }, { "path": "src/app/course-title/course-title.component.css", "content": "\n\n.course-title {\n text-decoration: underline;\n}" }, { "path": "src/app/course-title/course-title.component.html", "content": "\n\n
\n\n {{title}}\n\n
" }, { "path": "src/app/course-title/course-title.component.spec.ts", "content": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { CourseTitleComponent } from './course-title.component';\n\ndescribe('CourseTitleComponent', () => {\n let component: CourseTitleComponent;\n let fixture: ComponentFixture;\n\n beforeEach(waitForAsync(() => {\n TestBed.configureTestingModule({\n declarations: [ CourseTitleComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(CourseTitleComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/course-title/course-title.component.ts", "content": "import {Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'course-title',\n templateUrl: './course-title.component.html',\n styleUrls: ['./course-title.component.css'],\n standalone: true\n})\nexport class CourseTitleComponent implements OnInit {\n\n @Input()\n title:string;\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n" }, { "path": "src/app/courses/course-card/course-card.component.css", "content": "\n:host {\n display: block;\n}\n\n:host.is-first {\n border-top: 2px solid grey;\n padding-top: 20px;\n}\n\n:host.is-last {\n border-bottom: 2px solid grey;\n padding-top: 20px;\n}\n\n:host.is-even {\n background: lightgray;\n}\n\n:host.is-odd {\n background: lightcyan;\n}\n\n:host-context(.salmon-theme) .course-card {\n background: lightsalmon;\n}\n\n.course-card {\n margin-bottom: 40px;\n text-align: center;\n border-radius: 4px;\n padding: 20px 0;\n box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .14), 0 4px 8px -1px rgba(0, 0, 0, .12);\n}\n\n.course-card .course-title {\n font-size: 27px;\n font-weight: bold;\n}\n\n.course-card .course-description {\n max-width: 360px;\n margin: 0 auto;\n margin-top: 15px;\n user-select: none;\n}\n\n.course-card .course-description input {\n font-size: 20px;\n}\n\n.course-card.beginner {\n background: lightsalmon;\n}\n\n\n" }, { "path": "src/app/courses/course-card/course-card.component.html", "content": "@if (course) {\n
\n
\n {{ cardIndex || '' + ' ' + course.description }}\n
\n @if (course.iconUrl) {\n \n }\n
\n Edit Title: \n
\n
\n
\n\n {\n course.category,\n select,\n BEGINNER {Beginner}\n INTERMEDIATE {Intermediate}\n ADVANCED {Advanced}\n }\n\n
\n
\n \n
\n}\n\n\n\n\n\n\n" }, { "path": "src/app/courses/course-card/course-card.component.spec.ts", "content": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { CourseCardComponent } from './course-card.component';\n\ndescribe('CourseCardComponent', () => {\n let component: CourseCardComponent;\n let fixture: ComponentFixture;\n\n beforeEach(waitForAsync(() => {\n TestBed.configureTestingModule({\n declarations: [ CourseCardComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(CourseCardComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/courses/course-card/course-card.component.ts", "content": "import {\n AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit,\n Attribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component, DoCheck,\n EventEmitter,\n Input, OnChanges,\n OnDestroy,\n OnInit,\n Output\n} from '@angular/core';\nimport {Course} from '../../model/course';\nimport {CoursesService} from '../courses.service';\n\n\n\n\n@Component({\n selector: 'course-card',\n templateUrl: './course-card.component.html',\n styleUrls: ['./course-card.component.css'],\n imports: []\n})\nexport class CourseCardComponent implements OnInit {\n\n @Input()\n course: Course;\n\n @Input()\n cardIndex: number;\n\n @Output('courseChanged')\n courseEmitter = new EventEmitter();\n\n\n\n\n constructor(private coursesService: CoursesService,\n @Attribute('type') private type: string) {\n\n\n }\n\n ngOnInit() {\n\n\n }\n\n\n\n onTitleChanged(newTitle: string) {\n\n this.course.description = newTitle;\n\n }\n\n\n onSaveClicked(description: string) {\n\n this.courseEmitter.emit({...this.course, description});\n\n }\n\n\n}\n" }, { "path": "src/app/courses/course-image/course-image.component.css", "content": "" }, { "path": "src/app/courses/course-image/course-image.component.html", "content": "
\n\n \"Angular\n\n
" }, { "path": "src/app/courses/course-image/course-image.component.spec.ts", "content": "import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';\n\nimport { CourseImageComponent } from './course-image.component';\n\ndescribe('CourseImageComponent', () => {\n let component: CourseImageComponent;\n let fixture: ComponentFixture;\n\n beforeEach(waitForAsync(() => {\n TestBed.configureTestingModule({\n declarations: [ CourseImageComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(CourseImageComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/courses/course-image/course-image.component.ts", "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'course-image',\n templateUrl: './course-image.component.html',\n styleUrls: ['./course-image.component.css'],\n standalone: true\n})\nexport class CourseImageComponent implements OnInit {\n\n @Input('src')\n imageUrl:string;\n\n\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n" }, { "path": "src/app/courses/courses.module.spec.ts", "content": "import { CoursesModule } from './courses.module';\n\ndescribe('CoursesModule', () => {\n let coursesModule: CoursesModule;\n\n beforeEach(() => {\n coursesModule = new CoursesModule();\n });\n\n it('should create an instance', () => {\n expect(coursesModule).toBeTruthy();\n });\n});\n" }, { "path": "src/app/courses/courses.service.ts", "content": "import { Injectable } from '@angular/core';\nimport {Observable} from 'rxjs';\nimport {Course} from '../model/course';\nimport { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';\n\nlet counter = 0;\n\n\n@Injectable({\n providedIn: 'root'\n})\nexport class CoursesService {\n\n id:number;\n\n constructor(private http: HttpClient) {\n\n counter++;\n\n this.id = counter;\n\n\n }\n\n loadCourses(): Observable {\n\n const params = new HttpParams()\n .set(\"page\", \"1\")\n .set(\"pageSize\", \"10\");\n\n return this.http.get('/api/courses', {params});\n\n }\n\n saveCourse(course:Course) {\n const headers = new HttpHeaders()\n .set(\"X-Auth\", \"userId\");\n\n return this.http.put(`/api/courses/${course.id}`,\n course,{headers});\n\n }\n\n\n}\n" }, { "path": "src/app/courses/directives/highlighted.directive.spec.ts", "content": "import { HighlightedDirective } from './highlighted.directive';\n\ndescribe('HighlightedDirective', () => {\n it('should create an instance', () => {\n const directive = new HighlightedDirective();\n expect(directive).toBeTruthy();\n });\n});\n" }, { "path": "src/app/courses/directives/highlighted.directive.ts", "content": "import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core';\nimport {CoursesService} from '../courses.service';\n\n\n@Directive({\n selector: '[highlighted]',\n exportAs: 'hl',\n standalone: true\n})\nexport class HighlightedDirective {\n\n @Input('highlighted')\n isHighlighted = false;\n\n @Output()\n toggleHighlight = new EventEmitter();\n\n constructor(private coursesService: CoursesService) {\n\n console.log('coursesService highlighted ' + coursesService.id);\n\n }\n\n @HostBinding('class.highlighted')\n get cssClasses() {\n return this.isHighlighted;\n }\n\n @HostListener('mouseover', ['$event'])\n mouseOver($event) {\n\n console.log($event);\n\n this.isHighlighted = true;\n this.toggleHighlight.emit(this.isHighlighted);\n }\n\n @HostListener('mouseleave')\n mouseLeave() {\n this.isHighlighted = false;\n this.toggleHighlight.emit(this.isHighlighted);\n }\n\n toggle() {\n this.isHighlighted = !this.isHighlighted;\n this.toggleHighlight.emit(this.isHighlighted);\n }\n\n\n\n}\n" }, { "path": "src/app/courses/directives/ngx-unless.directive.spec.ts", "content": "import { NgxUnlessDirective } from './ngx-unless.directive';\n\ndescribe('NgxUnlessDirective', () => {\n it('should create an instance', () => {\n const directive = new NgxUnlessDirective();\n expect(directive).toBeTruthy();\n });\n});\n" }, { "path": "src/app/courses/directives/ngx-unless.directive.ts", "content": "import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';\n\n@Directive({\n selector: '[ngxUnless]',\n standalone: true\n})\nexport class NgxUnlessDirective {\n\n visible = false;\n\n\n constructor(private templateRef: TemplateRef,\n private viewContainer: ViewContainerRef) {\n\n\n }\n\n @Input()\n set ngxUnless(condition:boolean) {\n if (!condition && !this.visible) {\n this.viewContainer.createEmbeddedView(this.templateRef);\n this.visible = true;\n }\n else if (condition && this.visible) {\n this.viewContainer.clear();\n this.visible = false;\n }\n\n }\n\n\n}\n\n\n\n\n\n\n\n\n" }, { "path": "src/app/courses/filter-by-category.pipe.ts", "content": "import {Pipe, PipeTransform} from '@angular/core';\nimport {Course} from '../model/course';\n\n\n@Pipe({\n name: 'filterByCategory',\n standalone: true\n})\nexport class FilterByCategoryPipe implements PipeTransform {\n\n\n transform(courses: Course[], category:string) {\n\n console.log('Called transform()');\n\n return courses.filter(course => course.category === category);\n }\n\n}\n" }, { "path": "src/app/model/course.ts", "content": "\n\nexport interface Course {\n id:number;\n description:string;\n iconUrl: string;\n longDescription: string;\n category:string;\n lessonsCount:number;\n}\n" }, { "path": "src/assets/.gitkeep", "content": "" }, { "path": "src/assets/styles.css", "content": "\n\n\n.course-card img {\n border-radius: 4px;\n margin-top: 10px;\n}\n\nbutton {\n margin-top: 20px;\n height: 40px;\n font-size: 20px;\n background: #1a7ce7;\n color: white;\n border-radius: 4px;\n}\n\n\n\n\n\n.course-category {\n margin-top: 15px;\n}\n\n.category {\n margin-top: 15px;\n background: lightcyan;\n font-size: 14px;\n color: grey;\n border: 1px solid grey;\n border-radius: 4px;\n padding: 2px 3px;\n display: inline;\n}\n\n.demo {\n max-width: 300px;\n margin: 20px auto;\n font-size: 25px;\n}\n\n.warn {\n color:red;\n}\n\n.highlighted {\n box-shadow: 0 2px 16px 0 #de1e19, 0 3px 8px 0 rgba(226, 21, 19, 0.47), 0 6px 8px -1px #b41c18;\n}\n\n\n\n\n\n\n\n\n" }, { "path": "src/db-data.ts", "content": "\n\nexport const COURSES: any = [\n\n {\n id: 1,\n description: \"Angular Core Deep Dive\",\n iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png',\n longDescription: \"A detailed walk-through of the most important part of Angular - the Core and Common modules\",\n lessonsCount: 10,\n category: 'INTERMEDIATE'\n },\n {\n id: 2,\n description: \"RxJs In Practice Course\",\n iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png',\n longDescription: \"Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples\",\n category: 'BEGINNER',\n lessonsCount: 10\n },\n\n {\n id: 3,\n description: 'NgRx In Depth',\n longDescription: \"Learn the modern Ngrx Ecosystem, including Store, Effects, Router Store, Ngrx Entity, Dev Tools and Schematics.\",\n iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png',\n category: 'ADVANCED'\n },\n\n {\n id: 4,\n description: \"Angular for Beginners\",\n iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png',\n longDescription: \"Establish a solid layer of fundamentals, learn what's under the hood of Angular\",\n category: 'BEGINNER',\n lessonsCount: 10\n },\n {\n id: 5,\n description: 'Angular Security Course',\n longDescription: \"Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks.\",\n iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png',\n category: 'ADVANCED',\n lessonsCount: 11\n },\n {\n id: 6,\n description: 'Angular PWA Course',\n longDescription: \"Learn Angular Progressive Web Applications, build the future of the Web Today.\",\n iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png',\n category: 'ADVANCED',\n lessonsCount: 8\n },\n {\n id: 7,\n description: 'Angular Advanced Course',\n longDescription: \"Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm\",\n iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png',\n category: 'ADVANCED'\n },\n {\n id: 8,\n description: 'Complete Typescript Course',\n longDescription: \"Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API.\",\n iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png',\n category: 'BEGINNER'\n },\n {\n id: 9,\n description: 'Angular Architecture Course',\n longDescription: \"Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications.\",\n iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png',\n category: 'BEGINNER'\n },\n {\n id: 10,\n description: \"Angular Material Course\",\n iconUrl: \"https://s3-us-west-1.amazonaws.com/angular-university/course-images/material_design.png\",\n longDescription: \"Build Applications with the official Angular Widget Library\",\n category: 'ADVANCED'\n }\n\n];\n\n\nexport function findCourseById(courseId:number) {\n return COURSES.find(course => course.id == courseId);\n}\n" }, { "path": "src/environments/environment.prod.ts", "content": "export const environment = {\n production: true\n};\n" }, { "path": "src/environments/environment.ts", "content": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n production: false\n};\n\n/*\n * In development mode, for easier debugging, you can ignore zone related error\n * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the\n * below file. Don't forget to comment it out in production mode\n * because it will have a performance impact when errors are thrown\n */\n// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.\n" }, { "path": "src/index.html", "content": "\n\n\n\n\n\n \n Angular Core Deep Dive\n \n\n \n \n\n\n\n \n\n\n\n\n" }, { "path": "src/karma.conf.js", "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n config.set({\n basePath: '',\n frameworks: ['jasmine', '@angular-devkit/build-angular'],\n plugins: [\n require('karma-jasmine'),\n require('karma-chrome-launcher'),\n require('karma-jasmine-html-reporter'),\n require('karma-coverage-istanbul-reporter'),\n require('@angular-devkit/build-angular/plugins/karma')\n ],\n client: {\n clearContext: false // leave Jasmine Spec Runner output visible in browser\n },\n coverageIstanbulReporter: {\n dir: require('path').join(__dirname, '../coverage'),\n reports: ['html', 'lcovonly'],\n fixWebpackSourcePaths: true\n },\n reporters: ['progress', 'kjhtml'],\n port: 9876,\n colors: true,\n logLevel: config.LOG_INFO,\n autoWatch: true,\n browsers: ['Chrome'],\n singleRun: false\n });\n};" }, { "path": "src/locale/messages.fr.xlf", "content": "\n\n \n \n\n \n {VAR_SELECT, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} }\n {VAR_SELECT, select, BEGINNER {Débutant} INTERMEDIATE {Intermediare} ADVANCED {Avancé} }\n\n \n app/courses/course-card/course-card.component.html\n 21\n \n \n \n Edit Course\n Modifier des Cours\n \n app/app.component.html\n 13\n \n \n \n {VAR_PLURAL, plural, =0 {No courses available.} =1 {One course is available.} other {A total of courses are available.} }\n {VAR_PLURAL, plural, =0 {Pas des cours disponible.} =1 {Un cours disponible.} other {Il y a cours disponible.} }\n \n app/app.component.html\n 16\n \n \n \n \n Welcome to the Angular Core Deep Dive Course\n Bienvenue au Cours Angular en Détail.\n \n app/app.component.html\n 24\n \n Greet the user a greeting at the beginning of the course.\n welcome message.\n \n \n \n\n" }, { "path": "src/main.ts", "content": "import {enableProdMode, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { environment } from './environments/environment';\nimport {bootstrapApplication, BrowserModule} from '@angular/platform-browser';\nimport {AppComponent} from './app/app.component';\nimport {provideAnimations} from '@angular/platform-browser/animations';\nimport { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';\n\nif (environment.production) {\n enableProdMode();\n}\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideZoneChangeDetection(),importProvidersFrom(BrowserModule),\n provideAnimations(),\n provideHttpClient(withInterceptorsFromDi())\n ],\n})\n .catch(err => console.log(err));\n" }, { "path": "src/messages.xlf", "content": "\n\n \n \n \n \n\n \n\n \n \n app/courses/course-card/course-card.component.html\n 19\n \n \n \n {VAR_SELECT, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} }\n \n app/courses/course-card/course-card.component.html\n 21\n \n \n \n Edit Course\n \n app/app.component.html\n 13\n \n \n \n {VAR_PLURAL, plural, =0 {No courses available.} =1 {One course is available.} other {A total of courses are available.} }\n \n app/app.component.html\n 16\n \n \n \n \n Welcome to the Angular Core Deep Dive Course\n \n app/app.component.html\n 24\n \n Greet the user a greeting at the beginning of the course.\n welcome message.\n \n \n \n\n" }, { "path": "src/polyfills.ts", "content": "/***************************************************************************************************\n * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.\n */\nimport '@angular/localize/init';\n/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n * 2. Application imports. Files imported after ZoneJS that should be loaded before your main\n * file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE9, IE10 and IE11 requires all of the following polyfills. **/\n// import 'core-js/es6/symbol';\n// import 'core-js/es6/object';\n// import 'core-js/es6/function';\n// import 'core-js/es6/parse-int';\n// import 'core-js/es6/parse-float';\n// import 'core-js/es6/number';\n// import 'core-js/es6/math';\n// import 'core-js/es6/string';\n// import 'core-js/es6/date';\n// import 'core-js/es6/array';\n// import 'core-js/es6/regexp';\n// import 'core-js/es6/map';\n// import 'core-js/es6/weak-map';\n// import 'core-js/es6/set';\n\n/** IE10 and IE11 requires the following for the Reflect API. */\n// import 'core-js/es6/reflect';\n\n\n/** Evergreen browsers require these. **/\n// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n */\n\n // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n\n /*\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n */\n// (window as any).__Zone_enable_cross_context_check = true;\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js'; // Included with Angular CLI.\n\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n" }, { "path": "src/styles.css", "content": "/* You can add global styles to this file, and also import other style files */\n\nhtml, body { height: 100%; }\nbody { margin: 0; font-family: 'Roboto', sans-serif; }\n" }, { "path": "src/test.ts", "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/testing';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n BrowserDynamicTestingModule,\n platformBrowserDynamicTesting(), {\n teardown: { destroyAfterEach: false }\n}\n);\n" }, { "path": "src/tsconfig.app.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"types\": []\n },\n \"files\": [\n \"main.ts\",\n \"polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.d.ts\"\n ]\n}\n" }, { "path": "src/tsconfig.spec.json", "content": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/spec\",\n \"types\": [\n \"jasmine\",\n \"node\"\n ]\n },\n \"files\": [\n \"test.ts\",\n \"polyfills.ts\"\n ],\n \"include\": [\n \"**/*.spec.ts\",\n \"**/*.d.ts\"\n ]\n}\n" }, { "path": "src/tslint.json", "content": "{\n \"extends\": \"../tslint.json\",\n \"rules\": {\n \"directive-selector\": [\n true,\n \"attribute\",\n \"app\",\n \"camelCase\"\n ],\n \"component-selector\": [\n true,\n \"element\",\n \"app\",\n \"kebab-case\"\n ]\n }\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"baseUrl\": \"./\",\n \"outDir\": \"./dist/out-tsc\",\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"experimentalDecorators\": true,\n \"target\": \"ES2022\",\n \"typeRoots\": [\n \"node_modules/@types\"\n ],\n \"useDefineForClassFields\": false\n }\n}\n" }, { "path": "tslint.json", "content": "{\n \"rulesDirectory\": [\n \"node_modules/codelyzer\"\n ],\n \"rules\": {\n \"arrow-return-shorthand\": true,\n \"callable-types\": true,\n \"class-name\": true,\n \"comment-format\": [\n true,\n \"check-space\"\n ],\n \"curly\": true,\n \"deprecation\": {\n \"severity\": \"warn\"\n },\n \"eofline\": true,\n \"forin\": true,\n \"import-blacklist\": [\n true,\n \"rxjs/Rx\"\n ],\n \"import-spacing\": true,\n \"indent\": [\n true,\n \"spaces\"\n ],\n \"interface-over-type-literal\": true,\n \"label-position\": true,\n \"max-line-length\": [\n true,\n 140\n ],\n \"member-access\": false,\n \"member-ordering\": [\n true,\n {\n \"order\": [\n \"static-field\",\n \"instance-field\",\n \"static-method\",\n \"instance-method\"\n ]\n }\n ],\n \"no-arg\": true,\n \"no-bitwise\": true,\n \"no-console\": [\n true,\n \"debug\",\n \"info\",\n \"time\",\n \"timeEnd\",\n \"trace\"\n ],\n \"no-construct\": true,\n \"no-debugger\": true,\n \"no-duplicate-super\": true,\n \"no-empty\": false,\n \"no-empty-interface\": true,\n \"no-eval\": true,\n \"no-inferrable-types\": [\n true,\n \"ignore-params\"\n ],\n \"no-misused-new\": true,\n \"no-non-null-assertion\": true,\n \"no-shadowed-variable\": true,\n \"no-string-literal\": false,\n \"no-string-throw\": true,\n \"no-switch-case-fall-through\": true,\n \"no-trailing-whitespace\": true,\n \"no-unnecessary-initializer\": true,\n \"no-unused-expression\": true,\n \"no-var-keyword\": true,\n \"object-literal-sort-keys\": false,\n \"one-line\": [\n true,\n \"check-open-brace\",\n \"check-catch\",\n \"check-else\",\n \"check-whitespace\"\n ],\n \"prefer-const\": true,\n \"quotemark\": [\n true,\n \"single\"\n ],\n \"radix\": true,\n \"semicolon\": [\n true,\n \"always\"\n ],\n \"triple-equals\": [\n true,\n \"allow-null-check\"\n ],\n \"typedef-whitespace\": [\n true,\n {\n \"call-signature\": \"nospace\",\n \"index-signature\": \"nospace\",\n \"parameter\": \"nospace\",\n \"property-declaration\": \"nospace\",\n \"variable-declaration\": \"nospace\"\n }\n ],\n \"unified-signatures\": true,\n \"variable-name\": false,\n \"whitespace\": [\n true,\n \"check-branch\",\n \"check-decl\",\n \"check-operator\",\n \"check-separator\",\n \"check-type\"\n ],\n \"no-output-on-prefix\": true,\n \"no-inputs-metadata-property\": true,\n \"no-outputs-metadata-property\": true,\n \"no-host-metadata-property\": true,\n \"no-input-rename\": true,\n \"no-output-rename\": true,\n \"use-lifecycle-interface\": true,\n \"use-pipe-transform-interface\": true,\n \"component-class-suffix\": true,\n \"directive-class-suffix\": true\n }\n}\n" } ]