Full Code of angular-university/angular-course for AI

Repository: angular-university/angular-course
Branch: master
Commit: 8ef2f749e26d
Files: 59
Total size: 50.8 KB

Directory structure:
gitextract_qso4u9bd/

├── .browserslistrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── angular.json
├── e2e/
│   ├── protractor.conf.js
│   ├── src/
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.e2e.json
├── package.json
├── proxy.json
├── server/
│   ├── get-courses.route.ts
│   └── save-course.route.ts
├── server.ts
├── server.tsconfig.json
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── config.ts
│   │   ├── course-title/
│   │   │   ├── course-title.component.css
│   │   │   ├── course-title.component.html
│   │   │   ├── course-title.component.spec.ts
│   │   │   └── course-title.component.ts
│   │   ├── courses/
│   │   │   ├── course-card/
│   │   │   │   ├── course-card.component.css
│   │   │   │   ├── course-card.component.html
│   │   │   │   ├── course-card.component.spec.ts
│   │   │   │   └── course-card.component.ts
│   │   │   ├── course-image/
│   │   │   │   ├── course-image.component.css
│   │   │   │   ├── course-image.component.html
│   │   │   │   ├── course-image.component.spec.ts
│   │   │   │   └── course-image.component.ts
│   │   │   ├── courses.module.spec.ts
│   │   │   ├── courses.service.ts
│   │   │   ├── directives/
│   │   │   │   ├── highlighted.directive.spec.ts
│   │   │   │   ├── highlighted.directive.ts
│   │   │   │   ├── ngx-unless.directive.spec.ts
│   │   │   │   └── ngx-unless.directive.ts
│   │   │   └── filter-by-category.pipe.ts
│   │   └── model/
│   │       └── course.ts
│   ├── assets/
│   │   ├── .gitkeep
│   │   └── styles.css
│   ├── db-data.ts
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── index.html
│   ├── karma.conf.js
│   ├── locale/
│   │   └── messages.fr.xlf
│   ├── main.ts
│   ├── messages.xlf
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── tsconfig.json
└── tslint.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .browserslistrc
================================================
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11

================================================
FILE: .editorconfig
================================================
# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false


================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings

# System Files
.DS_Store
Thumbs.db


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2018 Angular University

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================

##  Angular Core Deep Dive (Video Course)

This repository contains the code of the [Angular Core Deep Dive](https://angular-university.io/course/angular-course).

This course repository is updated to Angular 21:

![Angular Core Deep Dive](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-core-deep-dive-new-2.jpg)

# Installation pre-requisites

IMPORTANT: Please use Node 22 LTS (Long Term Support version). 

# Installing the Angular CLI

With the following command the angular-cli will be installed globally in your machine:

    npm install -g @angular/cli


# How To install this repository

We can install the master branch using the following commands:

    git clone https://github.com/angular-university/angular-course.git

This 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:

    cd angular-course
    npm install

Its also possible to install the modules as usual using npm:

    npm install

NPM 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.

This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.

# To Run the Development Backend Server

In 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:

    npm run server

This is a small Node REST API server.

# To run the Development UI Server

To run the frontend part of our code, we will use the Angular CLI:

    npm start

The application is visible at port 4200: [http://localhost:4200](http://localhost:4200)



# Important

This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

At 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:

    git branch -a

  The remote branches have their starting in origin, such as for example 1-navigation-and-containers.

We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:

      git checkout -b section-1 origin/1-navigation-and-containers

It'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.

# Other Courses
# Modern Angular With Signals

If 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:

![Modern Angular With Signals Course](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-signals-course.jpg)


# RxJs In Practice Course

If 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:

![RxJs In Practice Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png)


# NgRx In Depth Course

If 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:

![NgRx In Depth Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png)



# Angular PWA Course

If 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:

![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)

# Angular Security Masterclass

If 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:

[Angular Security Masterclass](https://github.com/angular-university/angular-security-course).

![Angular Security Masterclass](https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png)

# Angular Advanced Library Laboratory Course

If you are looking for the Angular Advanced Course, the repo with the full code can be found here:

[Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-university.io/course/angular-advanced-course).

![Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png)


## RxJs and Reactive Patterns Angular Architecture Course

If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:

[RxJs and Reactive Patterns Angular Architecture Course](https://angular-university.io/course/reactive-angular-architecture-course)

![RxJs and Reactive Patterns Angular Architecture Course](https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png)



## Angular Ngrx Reactive Extensions Architecture Course

If you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here:

[Angular Ngrx Reactive Extensions Architecture Course](https://angular-university.io/course/angular2-ngrx)

[Github repo for this course](https://github.com/angular-university/ngrx-course)

![Angular Ngrx Course](https://angular-academy.s3.amazonaws.com/thumbnails/ngrx-angular.png)



## Angular 2 and Firebase - Build a Web Application Course

If 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:

[Angular 2 and Firebase - Build a Web Application](https://angular-university.io/course/build-an-application-with-angular2)

[Github repo for this course](https://github.com/angular-university/angular-firebase-app)

![Angular firebase course](https://angular-academy.s3.amazonaws.com/thumbnails/angular_app-firebase-small.jpg)


## Complete Typescript 2 Course - Build A REST API

If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:

[https://angular-university.io/course/typescript-2-tutorial](https://github.com/angular-university/complete-typescript-course)

[Github repo for this course](https://github.com/angular-university/complete-typescript-course)

![Complete Typescript Course](https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png)



================================================
FILE: angular.json
================================================
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-course": {
      "i18n": {
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": ""
          }
        }
      },
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist/angular-course"
            },
            "index": "src/index.html",
            "polyfills": [
              "src/polyfills.ts"
            ],
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              {
                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                "inject": true
              },
              "src/styles.css"
            ],
            "scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js",
                "inject": true
              }
            ],
            "extractLicenses": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true,
            "browser": "src/main.ts"
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true
            },
            "fr": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "outputPath": {
                "base": "dist/angular-course-fr/"
              },
              "i18nFile": "src/locale/messages.fr.xlf",
              "i18nLocale": "fr",
              "i18nMissingTranslation": "ignore"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "angular-course:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "angular-course:build:production"
            },
            "fr": {
              "buildTarget": "angular-course:build:fr"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "angular-course:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              {
                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                "inject": true
              },
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        }
      }
    },
    "angular-course-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular-course:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular-course:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "e878a578-eb4f-4c7c-bbaf-6f0c4ac42135"
  },
  "schematics": {
    "@schematics/angular:component": {
      "type": "component"
    },
    "@schematics/angular:directive": {
      "type": "directive"
    },
    "@schematics/angular:service": {
      "type": "service"
    },
    "@schematics/angular:guard": {
      "typeSeparator": "."
    },
    "@schematics/angular:interceptor": {
      "typeSeparator": "."
    },
    "@schematics/angular:module": {
      "typeSeparator": "."
    },
    "@schematics/angular:pipe": {
      "typeSeparator": "."
    },
    "@schematics/angular:resolver": {
      "typeSeparator": "."
    }
  }
}


================================================
FILE: e2e/protractor.conf.js
================================================
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

================================================
FILE: e2e/src/app.e2e-spec.ts
================================================
import { AppPage } from './app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to angular-course!');
  });
});


================================================
FILE: e2e/src/app.po.ts
================================================
import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}


================================================
FILE: e2e/tsconfig.e2e.json
================================================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

================================================
FILE: package.json
================================================
{
  "name": "angular-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config ./proxy.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "server": "ts-node -P ./server.tsconfig.json ./server.ts"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^21.0.1",
    "@angular/cdk": "^21.0.1",
    "@angular/common": "^21.0.1",
    "@angular/compiler": "^21.0.1",
    "@angular/core": "^21.0.1",
    "@angular/elements": "^21.0.1",
    "@angular/forms": "^21.0.1",
    "@angular/localize": "^21.0.1",
    "@angular/material": "^21.0.1",
    "@angular/platform-browser": "^21.0.1",
    "@angular/platform-browser-dynamic": "^21.0.1",
    "@angular/router": "^21.0.1",
    "body-parser": "^1.18.3",
    "core-js": "^2.5.4",
    "cors": "^2.8.5",
    "document-register-element": "1.8.1",
    "express": "^4.16.3",
    "rxjs": "^6.5.4",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^21.0.1",
    "@angular/cli": "^21.0.1",
    "@angular/compiler-cli": "^21.0.1",
    "@angular/language-service": "^21.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "ts-node": "~5.0.1",
    "tslint": "~6.1.0",
    "typescript": "~5.9.3"
  }
}


================================================
FILE: proxy.json
================================================
{
  "/api": {
    "target": "http://localhost:9000",
    "secure": false
  }
}

================================================
FILE: server/get-courses.route.ts
================================================
import {Request, Response} from 'express';
import {COURSES} from '../src/db-data';


export function getAllCourses(req: Request, res: Response) {


    res.status(200).json(Object.values(COURSES));


}


export function getCourseById(req: Request, res: Response) {

    const courseId = req.params['id'];

    const courses: any = Object.values(COURSES);

    const course = courses.find(course => course.id == courseId);

    res.status(200).json(course);
}


================================================
FILE: server/save-course.route.ts
================================================
import {Request, Response} from 'express';
import {findCourseById} from '../src/db-data';


export function saveCourse(req: Request, res: Response) {

    const id = req.params["id"],
          changes = req.body;

    console.log("Saving course", id, JSON.stringify(changes));

    const course = findCourseById(id);

    course.description = changes.description;

    res.status(200).json(course);

}


================================================
FILE: server.ts
================================================


import * as express from 'express';
import {Application} from "express";
import {getAllCourses} from './server/get-courses.route';
import {saveCourse} from './server/save-course.route';
const cors = require('cors');

const bodyParser = require('body-parser');

const app: Application = express();

app.use(cors({origin: true}));
app.use(bodyParser.json());

app.route('/api/courses').get(getAllCourses);

app.route('/api/courses/:id').put(saveCourse);



const httpServer = app.listen(9000, () => {
    console.log("HTTP REST API Server running at http://localhost:" + httpServer.address().port);
});





================================================
FILE: server.tsconfig.json
================================================
{
  "compilerOptions": {
    "module": "commonjs"
  }
}


================================================
FILE: src/app/app.component.css
================================================

.top-menu {
    background: #1976d2;
    padding: 2px 15px;
}

.logo {
  max-height: 55px;
}


.courses {
    max-width: 400px;
    margin: 50px auto;
}







================================================
FILE: src/app/app.component.html
================================================
<div class="top-menu">

  <img class="logo"
    src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png">

  </div>

  <div>

    <div class="demo">


      <button (click)="onEditCourse()" i18n>Edit Course</button>

    </div>

    <div class="courses">

      @for (course of  courses  ; track course) {
        <course-card
          (courseChanged)="save($event)"
          type="beginner"
          [course]="course">
        <course-image [src]="course.iconUrl"></course-image>
      </course-card>
    }


  </div>


</div>






================================================
FILE: src/app/app.component.spec.ts
================================================
import { TestBed, waitForAsync } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'angular-course'`, waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('angular-course');
  }));
  it('should render title in a h1 tag', waitForAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-course!');
  }));
});


================================================
FILE: src/app/app.component.ts
================================================
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, Injector, OnInit} from '@angular/core';
import {Course} from './model/course';
import {Observable} from 'rxjs';
import {AppConfig, CONFIG_TOKEN} from './config';
import {COURSES} from '../db-data';
import {CoursesService} from './courses/courses.service';
import {createCustomElement} from '@angular/elements';
import {CourseTitleComponent} from './course-title/course-title.component';
import {CourseCardComponent} from './courses/course-card/course-card.component';
import {CourseImageComponent} from './courses/course-image/course-image.component';



@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    imports: [
    CourseCardComponent,
    CourseImageComponent
]
})
export class AppComponent implements OnInit {

    courses: Course[] = COURSES;

    coursesTotal = this.courses.length;

    constructor(
        private coursesService: CoursesService,
        @Inject(CONFIG_TOKEN) private config: AppConfig,
        private injector: Injector) {

    }

    ngOnInit() {

        //const htmlElement = createCustomElement(CourseTitleComponent, {injector:this.injector});

        //customElements.define('course-title', htmlElement);

    }

    onEditCourse() {

            this.courses[1].category = 'ADVANCED';

    }

    save(course: Course) {
        this.coursesService.saveCourse(course)
            .subscribe(
                () => console.log('Course Saved!')
            );
    }


}


================================================
FILE: src/app/config.ts
================================================
import {InjectionToken} from '@angular/core';


export interface AppConfig {
    apiUrl:string;
    courseCacheSize:number;
}


export const APP_CONFIG:AppConfig = {
    apiUrl: 'http://localhost:9000',
    courseCacheSize: 10
}


export const CONFIG_TOKEN =
    new InjectionToken<AppConfig>('CONFIG_TOKEN',
        {
            providedIn: 'root',
            factory: () => APP_CONFIG
        });

================================================
FILE: src/app/course-title/course-title.component.css
================================================


.course-title {
    text-decoration: underline;
}

================================================
FILE: src/app/course-title/course-title.component.html
================================================


<div class="course-title">

    {{title}}

</div>

================================================
FILE: src/app/course-title/course-title.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

import { CourseTitleComponent } from './course-title.component';

describe('CourseTitleComponent', () => {
  let component: CourseTitleComponent;
  let fixture: ComponentFixture<CourseTitleComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CourseTitleComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CourseTitleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/course-title/course-title.component.ts
================================================
import {Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit} from '@angular/core';

@Component({
  selector: 'course-title',
  templateUrl: './course-title.component.html',
  styleUrls: ['./course-title.component.css'],
  standalone: true
})
export class CourseTitleComponent implements OnInit {

   @Input()
  title:string;

  constructor() { }

  ngOnInit() {
  }

}


================================================
FILE: src/app/courses/course-card/course-card.component.css
================================================

:host {
  display: block;
}

:host.is-first {
  border-top: 2px solid grey;
  padding-top: 20px;
}

:host.is-last {
  border-bottom: 2px solid grey;
  padding-top: 20px;
}

:host.is-even {
  background: lightgray;
}

:host.is-odd {
  background: lightcyan;
}

:host-context(.salmon-theme) .course-card {
  background: lightsalmon;
}

.course-card {
  margin-bottom: 40px;
  text-align: center;
  border-radius: 4px;
  padding: 20px 0;
  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);
}

.course-card .course-title {
  font-size: 27px;
  font-weight: bold;
}

.course-card .course-description {
  max-width: 360px;
  margin: 0 auto;
  margin-top: 15px;
  user-select: none;
}

.course-card .course-description input {
  font-size: 20px;
}

.course-card.beginner {
  background: lightsalmon;
}




================================================
FILE: src/app/courses/course-card/course-card.component.html
================================================
@if (course) {
  <div class="course-card" #container>
    <div class="course-title">
      {{ cardIndex || '' + ' ' + course.description }}
    </div>
    @if (course.iconUrl) {
      <ng-content select="course-image"
      ></ng-content>
    }
    <div class="course-description">
      Edit Title: <input #courseTitle [value]="course.description"
      (keyup)="onTitleChanged(courseTitle.value)">
    </div>
    <div class="course-category">
      <div class="category" i18n>

        {
            course.category,
            select,
            BEGINNER {Beginner}
            INTERMEDIATE {Intermediate}
            ADVANCED {Advanced}
        }

    </div>
  </div>
  <button (click)="onSaveClicked(courseTitle.value)">Save Course</button>
</div>
}








================================================
FILE: src/app/courses/course-card/course-card.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

import { CourseCardComponent } from './course-card.component';

describe('CourseCardComponent', () => {
  let component: CourseCardComponent;
  let fixture: ComponentFixture<CourseCardComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CourseCardComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CourseCardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/courses/course-card/course-card.component.ts
================================================
import {
    AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit,
    Attribute,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component, DoCheck,
    EventEmitter,
    Input, OnChanges,
    OnDestroy,
    OnInit,
    Output
} from '@angular/core';
import {Course} from '../../model/course';
import {CoursesService} from '../courses.service';




@Component({
    selector: 'course-card',
    templateUrl: './course-card.component.html',
    styleUrls: ['./course-card.component.css'],
    imports: []
})
export class CourseCardComponent implements  OnInit {

    @Input()
    course: Course;

    @Input()
    cardIndex: number;

    @Output('courseChanged')
    courseEmitter = new EventEmitter<Course>();




    constructor(private coursesService: CoursesService,
                @Attribute('type') private type: string) {


    }

    ngOnInit() {


    }



    onTitleChanged(newTitle: string) {

        this.course.description = newTitle;

    }


    onSaveClicked(description: string) {

        this.courseEmitter.emit({...this.course, description});

    }


}


================================================
FILE: src/app/courses/course-image/course-image.component.css
================================================


================================================
FILE: src/app/courses/course-image/course-image.component.html
================================================
<div class="course-image" #courseImage>

    <img width="300" alt="Angular Logo"
         [src]="imageUrl">

</div>

================================================
FILE: src/app/courses/course-image/course-image.component.spec.ts
================================================
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

import { CourseImageComponent } from './course-image.component';

describe('CourseImageComponent', () => {
  let component: CourseImageComponent;
  let fixture: ComponentFixture<CourseImageComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ CourseImageComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CourseImageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


================================================
FILE: src/app/courses/course-image/course-image.component.ts
================================================
import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'course-image',
  templateUrl: './course-image.component.html',
  styleUrls: ['./course-image.component.css'],
  standalone: true
})
export class CourseImageComponent implements OnInit {

  @Input('src')
  imageUrl:string;



  constructor() { }

  ngOnInit() {
  }

}


================================================
FILE: src/app/courses/courses.module.spec.ts
================================================
import { CoursesModule } from './courses.module';

describe('CoursesModule', () => {
  let coursesModule: CoursesModule;

  beforeEach(() => {
    coursesModule = new CoursesModule();
  });

  it('should create an instance', () => {
    expect(coursesModule).toBeTruthy();
  });
});


================================================
FILE: src/app/courses/courses.service.ts
================================================
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import {Course} from '../model/course';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

let counter = 0;


@Injectable({
  providedIn: 'root'
})
export class CoursesService {

  id:number;

  constructor(private http: HttpClient) {

      counter++;

      this.id = counter;


  }

  loadCourses(): Observable<Course[]> {

      const params = new HttpParams()
          .set("page", "1")
          .set("pageSize", "10");

      return this.http.get<Course[]>('/api/courses', {params});

  }

  saveCourse(course:Course) {
      const headers = new HttpHeaders()
          .set("X-Auth", "userId");

      return this.http.put(`/api/courses/${course.id}`,
          course,{headers});

  }


}


================================================
FILE: src/app/courses/directives/highlighted.directive.spec.ts
================================================
import { HighlightedDirective } from './highlighted.directive';

describe('HighlightedDirective', () => {
  it('should create an instance', () => {
    const directive = new HighlightedDirective();
    expect(directive).toBeTruthy();
  });
});


================================================
FILE: src/app/courses/directives/highlighted.directive.ts
================================================
import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core';
import {CoursesService} from '../courses.service';


@Directive({
    selector: '[highlighted]',
    exportAs: 'hl',
    standalone: true
})
export class HighlightedDirective {

    @Input('highlighted')
    isHighlighted = false;

    @Output()
    toggleHighlight = new EventEmitter();

    constructor(private coursesService: CoursesService) {

        console.log('coursesService highlighted ' + coursesService.id);

    }

    @HostBinding('class.highlighted')
    get cssClasses() {
        return this.isHighlighted;
    }

    @HostListener('mouseover', ['$event'])
    mouseOver($event) {

        console.log($event);

        this.isHighlighted = true;
        this.toggleHighlight.emit(this.isHighlighted);
    }

    @HostListener('mouseleave')
    mouseLeave() {
        this.isHighlighted = false;
        this.toggleHighlight.emit(this.isHighlighted);
    }

    toggle() {
        this.isHighlighted = !this.isHighlighted;
        this.toggleHighlight.emit(this.isHighlighted);
    }



}


================================================
FILE: src/app/courses/directives/ngx-unless.directive.spec.ts
================================================
import { NgxUnlessDirective } from './ngx-unless.directive';

describe('NgxUnlessDirective', () => {
  it('should create an instance', () => {
    const directive = new NgxUnlessDirective();
    expect(directive).toBeTruthy();
  });
});


================================================
FILE: src/app/courses/directives/ngx-unless.directive.ts
================================================
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[ngxUnless]',
  standalone: true
})
export class NgxUnlessDirective {

  visible = false;


  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) {


  }

  @Input()
  set ngxUnless(condition:boolean) {
      if (!condition && !this.visible) {
          this.viewContainer.createEmbeddedView(this.templateRef);
          this.visible = true;
      }
      else if (condition && this.visible) {
          this.viewContainer.clear();
          this.visible = false;
      }

  }


}










================================================
FILE: src/app/courses/filter-by-category.pipe.ts
================================================
import {Pipe, PipeTransform} from '@angular/core';
import {Course} from '../model/course';


@Pipe({
    name: 'filterByCategory',
    standalone: true
})
export class FilterByCategoryPipe implements PipeTransform {


    transform(courses: Course[], category:string) {

        console.log('Called transform()');

        return courses.filter(course => course.category === category);
    }

}


================================================
FILE: src/app/model/course.ts
================================================


export interface Course {
    id:number;
    description:string;
    iconUrl: string;
    longDescription: string;
    category:string;
    lessonsCount:number;
}


================================================
FILE: src/assets/.gitkeep
================================================


================================================
FILE: src/assets/styles.css
================================================



.course-card img {
    border-radius: 4px;
    margin-top: 10px;
}

button {
    margin-top: 20px;
    height: 40px;
    font-size: 20px;
    background: #1a7ce7;
    color: white;
    border-radius: 4px;
}





.course-category {
    margin-top: 15px;
}

.category {
    margin-top: 15px;
    background: lightcyan;
    font-size: 14px;
    color: grey;
    border: 1px solid grey;
    border-radius: 4px;
    padding: 2px 3px;
    display: inline;
}

.demo {
    max-width: 300px;
    margin: 20px auto;
    font-size: 25px;
}

.warn {
  color:red;
}

.highlighted {
  box-shadow: 0 2px 16px 0 #de1e19, 0 3px 8px 0 rgba(226, 21, 19, 0.47), 0 6px 8px -1px #b41c18;
}










================================================
FILE: src/db-data.ts
================================================


export const COURSES: any = [

    {
        id: 1,
        description: "Angular Core Deep Dive",
        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png',
        longDescription: "A detailed walk-through of the most important part of Angular - the Core and Common modules",
        lessonsCount: 10,
        category: 'INTERMEDIATE'
    },
    {
        id: 2,
        description: "RxJs In Practice Course",
        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png',
        longDescription: "Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples",
        category: 'BEGINNER',
        lessonsCount: 10
    },

    {
        id: 3,
        description: 'NgRx In Depth',
        longDescription: "Learn the modern Ngrx Ecosystem, including Store, Effects, Router Store, Ngrx Entity, Dev Tools and Schematics.",
        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png',
        category: 'ADVANCED'
    },

    {
        id: 4,
        description: "Angular for Beginners",
        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png',
        longDescription: "Establish a solid layer of fundamentals, learn what's under the hood of Angular",
        category: 'BEGINNER',
        lessonsCount: 10
    },
    {
        id: 5,
        description: 'Angular Security Course',
        longDescription: "Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks.",
        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png',
        category: 'ADVANCED',
        lessonsCount: 11
    },
    {
        id: 6,
        description: 'Angular PWA Course',
        longDescription: "Learn Angular Progressive Web Applications, build the future of the Web Today.",
        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png',
        category: 'ADVANCED',
        lessonsCount: 8
    },
    {
        id: 7,
        description: 'Angular Advanced Course',
        longDescription: "Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm",
        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png',
        category: 'ADVANCED'
    },
    {
        id: 8,
        description: 'Complete Typescript Course',
        longDescription: "Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API.",
        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png',
        category: 'BEGINNER'
    },
    {
        id: 9,
        description: 'Angular Architecture Course',
        longDescription: "Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications.",
        iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png',
        category: 'BEGINNER'
    },
    {
        id: 10,
        description: "Angular Material Course",
        iconUrl: "https://s3-us-west-1.amazonaws.com/angular-university/course-images/material_design.png",
        longDescription: "Build Applications with the official Angular Widget Library",
        category: 'ADVANCED'
    }

];


export function findCourseById(courseId:number) {
    return COURSES.find(course => course.id == courseId);
}


================================================
FILE: src/environments/environment.prod.ts
================================================
export const environment = {
  production: true
};


================================================
FILE: src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

/*
 * In development mode, for easier debugging, you can ignore zone related error
 * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the
 * below file. Don't forget to comment it out in production mode
 * because it will have a performance impact when errors are thrown
 */
// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.


================================================
FILE: src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="/assets/styles.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>Angular Core Deep Dive</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

  <app-root></app-root>


</body>
</html>


================================================
FILE: src/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

================================================
FILE: src/locale/messages.fr.xlf
================================================
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>

      <trans-unit id="3654d95b03eba8ec9ee0cf68463f50365bf6baa2" datatype="html">
        <source>{VAR_SELECT, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} }</source>
          <target>{VAR_SELECT, select, BEGINNER {Débutant} INTERMEDIATE {Intermediare} ADVANCED {Avancé} }</target>

        <context-group purpose="location">
          <context context-type="sourcefile">app/courses/course-card/course-card.component.html</context>
          <context context-type="linenumber">21</context>
        </context-group>
      </trans-unit>
      <trans-unit id="756b2b2744938130877e47fd8e697024cb532092" datatype="html">
        <source>Edit Course</source>
          <target>Modifier des Cours</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">13</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ef485631d92fd33527cc7ae600c0b9b07c397825" datatype="html">
        <source>{VAR_PLURAL, plural, =0 {No courses available.} =1 {One course is available.} other {A total of <x id="INTERPOLATION" equiv-text="{{coursesTotal}}"/> courses are available.} }</source>
          <target>{VAR_PLURAL, plural, =0 {Pas des cours disponible.} =1 {Un cours disponible.} other {Il y a <x id="INTERPOLATION" equiv-text="{{coursesTotal}}"/> cours disponible.} }</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">16</context>
        </context-group>
      </trans-unit>
      <trans-unit id="welcomeMessage" datatype="html">
        <source>
          Welcome to the Angular Core Deep Dive Course</source>
        <target>Bienvenue au Cours Angular en Détail.</target>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">24</context>
        </context-group>
        <note priority="1" from="description">Greet the user a greeting at the beginning of the course.</note>
        <note priority="1" from="meaning">welcome message.</note>
      </trans-unit>
    </body>
  </file>
</xliff>


================================================
FILE: src/main.ts
================================================
import {enableProdMode, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment } from './environments/environment';
import {bootstrapApplication, BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
import {provideAnimations} from '@angular/platform-browser/animations';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideZoneChangeDetection(),importProvidersFrom(BrowserModule),
    provideAnimations(),
    provideHttpClient(withInterceptorsFromDi())
  ],
})
  .catch(err => console.log(err));


================================================
FILE: src/messages.xlf
================================================
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="9aeacc4172cc40b2ecb1dd81d3ca17043ffd1f5e" datatype="html">
        <source>

        <x id="ICU" equiv-text="{
            course.category, select, BEGINNER {...} INTERMEDIATE {...} ADVANCED {...}}"/>

    </source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/courses/course-card/course-card.component.html</context>
          <context context-type="linenumber">19</context>
        </context-group>
      </trans-unit>
      <trans-unit id="3654d95b03eba8ec9ee0cf68463f50365bf6baa2" datatype="html">
        <source>{VAR_SELECT, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} }</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/courses/course-card/course-card.component.html</context>
          <context context-type="linenumber">21</context>
        </context-group>
      </trans-unit>
      <trans-unit id="756b2b2744938130877e47fd8e697024cb532092" datatype="html">
        <source>Edit Course</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">13</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ef485631d92fd33527cc7ae600c0b9b07c397825" datatype="html">
        <source>{VAR_PLURAL, plural, =0 {No courses available.} =1 {One course is available.} other {A total of <x id="INTERPOLATION" equiv-text="{{coursesTotal}}"/> courses are available.} }</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">16</context>
        </context-group>
      </trans-unit>
      <trans-unit id="welcomeMessage" datatype="html">
        <source>
          Welcome to the Angular Core Deep Dive Course</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/app.component.html</context>
          <context context-type="linenumber">24</context>
        </context-group>
        <note priority="1" from="description">Greet the user a greeting at the beginning of the course.</note>
        <note priority="1" from="meaning">welcome message.</note>
      </trans-unit>
    </body>
  </file>
</xliff>


================================================
FILE: src/polyfills.ts
================================================
/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */


================================================
FILE: src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: 'Roboto', sans-serif; }


================================================
FILE: src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(), {
    teardown: { destroyAfterEach: false }
}
);


================================================
FILE: src/tsconfig.app.json
================================================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}


================================================
FILE: src/tsconfig.spec.json
================================================
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}


================================================
FILE: src/tslint.json
================================================
{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "app",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "app",
            "kebab-case"
        ]
    }
}


================================================
FILE: tsconfig.json
================================================
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "bundler",
    "experimentalDecorators": true,
    "target": "ES2022",
    "typeRoots": [
      "node_modules/@types"
    ],
    "useDefineForClassFields": false
  }
}


================================================
FILE: tslint.json
================================================
{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "arrow-return-shorthand": true,
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": true,
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unnecessary-initializer": true,
    "no-unused-expression": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "no-output-on-prefix": true,
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
}