Skip to content

Shahul/1 components #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 35 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
9d278db
Angular Core Deep Dive
Aug 28, 2018
f83c125
Angular Core Deep Dive
Aug 29, 2018
1c2590a
Angular Core Deep Dive
Aug 29, 2018
631b453
Angular Core Deep Dive
Sep 4, 2018
5972514
Angular Core Deep Dive
Sep 4, 2018
f4d658d
Angular Core Deep Dive
Sep 4, 2018
2069aa8
Angular Core Deep Dive
Sep 4, 2018
dfa2e82
Angular Core Deep Dive
jhades Sep 10, 2018
37daaf8
Angular Core Deep Dive
jhades Sep 14, 2018
c127a44
Angular Core Deep Dive
jhades Sep 17, 2018
04e8b2f
Angular Core Deep Dive
jhades Oct 1, 2018
7eeec8e
Angular Core Deep Dive
jhades Oct 22, 2018
77a6f14
Angular Core Deep Dive
jhades Oct 24, 2018
8974bb6
Angular Core Deep Dive
jhades Oct 24, 2018
11f711b
Angular Core Deep Dive Course
Oct 30, 2018
5a92b15
Angular Core Deep Dive Course
Nov 1, 2018
aa243f2
Angular Core Deep Dive Course
Nov 1, 2018
2ab853f
fix server startup issue
jhades Nov 20, 2018
1a50f3d
upgrade to Angular 8 and Node 12
jhades Jun 3, 2019
f531afb
upgrade to Angular 9
jhades Feb 18, 2020
ecc3850
upgrade to Angular 9
jhades Feb 18, 2020
d392359
upgrade to Angular 9
jhades Feb 24, 2020
385cbfa
upgrade to Angular 10
jhades Jun 29, 2020
52905e3
upgrade to Angular 10
jhades Jul 1, 2020
331452e
upgrade to Angular 11 and Node 14
jhades Nov 17, 2020
83752cf
Update README.md
jhades Nov 18, 2020
eac74f5
upgrade to Angular 12
jhades May 18, 2021
d4909f3
upgrade to Angular 12
jhades May 18, 2021
3e2c6d6
Upgrade to Angular 13 and Node 16
jhades Nov 25, 2021
3fedfca
upgrade to Angular 14
jhades Jun 13, 2022
ca3ef46
Upgrade to Angular 15 and Node 18
jhades Nov 28, 2022
cb90939
Upgrade to Angular 16
jhades May 9, 2023
a0c4de1
update to Angular 17
jhades Nov 9, 2023
9bb80e2
Upgrade to Angular 18
philipszdavido May 28, 2024
5be2e9d
shahul-learning-1
shahulshaik05 Jun 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -25,6 +25,7 @@
!.vscode/extensions.json

# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
13 changes: 2 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -3,23 +3,14 @@

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 v6, and there is a package-lock.json file available, for avoiding semantic versioning installation issues.
This course repository is updated to Angular v18:

![Angular Core Deep Dive](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png)


# Installation pre-requisites

IMPORTANT: Please use the latest Node and especially NPM, to make sure the package-lock.json is used.

For running this project we need and npm installed on our machine. These are some tutorials to install node in different operating systems:

*Its important to install the latest version of Node*

- [Install Node and NPM on Windows](https://www.youtube.com/watch?v=8ODS6RM6x7g)
- [Install Node and NPM on Linux](https://www.youtube.com/watch?v=yUdHk-Dk_BY)
- [Install Node and NPM on Mac](https://www.youtube.com/watch?v=Imj8PgG3bZU)

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

# Installing the Angular CLI

99 changes: 61 additions & 38 deletions angular.json
Original file line number Diff line number Diff line change
@@ -4,34 +4,62 @@
"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:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/angular-course",
"outputPath": {
"base": "dist/angular-course"
},
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"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"
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"inject": true
},
"src/styles.css"
],
"scripts": []
"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",
@@ -41,30 +69,43 @@
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
"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": {
"browserTarget": "angular-course:build"
"buildTarget": "angular-course:build"
},
"configurations": {
"production": {
"browserTarget": "angular-course:build:production"
"buildTarget": "angular-course:build:production"
},
"fr": {
"buildTarget": "angular-course:build:fr"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-course:build"
"buildTarget": "angular-course:build"
}
},
"test": {
@@ -76,7 +117,8 @@
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"inject": true
},
"src/styles.css"
],
@@ -86,18 +128,6 @@
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
@@ -116,18 +146,11 @@
"devServerTarget": "angular-course:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "angular-course"
}
"cli": {
"analytics": "e878a578-eb4f-4c7c-bbaf-6f0c4ac42135"
}
}
30,762 changes: 22,625 additions & 8,137 deletions package-lock.json

Large diffs are not rendered by default.

65 changes: 33 additions & 32 deletions package.json
Original file line number Diff line number Diff line change
@@ -8,46 +8,47 @@
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"server": "./node_modules/.bin/ts-node ./server.ts"
"server": "ts-node -P ./server.tsconfig.json ./server.ts"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/cdk": "^6.2.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.6",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/elements": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/localize": "^18.0.0",
"@angular/material": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"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.0.0",
"zone.js": "~0.8.26"
"rxjs": "^6.5.4",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~6.1.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.6",
"@angular-devkit/build-angular": "^18.0.1",
"@angular/cli": "^18.0.1",
"@angular/compiler-cli": "^18.0.0",
"@angular/language-service": "^18.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"@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": "~5.9.1",
"typescript": "~2.7.2"
"tslint": "~6.1.0",
"typescript": "~5.4.5"
}
}
}
3 changes: 2 additions & 1 deletion server.ts
Original file line number Diff line number Diff line change
@@ -4,12 +4,13 @@ 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);
5 changes: 5 additions & 0 deletions server.tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"compilerOptions": {
"module": "commonjs"
}
}
65 changes: 43 additions & 22 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,27 +1,48 @@
<div class="top-menu">

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

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


<div class="courses">

<div class="course-card">

<div class="course-title">
Angular Core Deep Dive
</div>
<img width="300" alt="Angular Logo"
src="https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png">

<div class="course-description">
A detailed walk-through of the most important part of Angular - the Core and Common modules.
</div>

<div class="courses" #containerRef>
<ng-template #blankImage let-courseName="description">
<p class="warn">{{ courseName }} has no image is available yet.</p>
<img src="/assets/empty-image.png" />
</ng-template>

@for (course of courses; track trackCourse(index, course); let index = $index;
let count = $count) {
<course-card
[course]="course"
[cardIndex]="index + 1"
[class.is-first]="$first"
[class.is-last]="$last"
[class.is-even]="$even"
[class.is-odd]="$odd"
[noImageTpl]="blankImage"
(courseSelected)="onCourseSelected($event)"
>
<course-image [src]="course?.iconUrl" />

<div class="course-description">
{{ course.longDescription }}
</div>

</course-card>
} @empty {

<h1>No courses found!</h1>

}

<!-- <course-card
*ngFor="let course of courses; index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd"
(courseSelected)="onCourseSelected($event)"
[course]="course"
[cardIndex]="i + 1"
[class.is-first]="isFirst"
[class.is-last]="isLast"
[class.is-even]="isEven"
[class.is-odd]="isOdd"
/> -->
</div>


10 changes: 5 additions & 5 deletions src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { TestBed, async } from '@angular/core/testing';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
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'`, async(() => {
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', async(() => {
it('should render title in a h1 tag', waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
37 changes: 31 additions & 6 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,38 @@
import { Component } from '@angular/core';
import {COURSES} from '../db-data';
import {
AfterViewInit,
Component,
ElementRef,
QueryList,
ViewChild,
ViewChildren,
} from "@angular/core";
import { COURSES } from "../db-data";
import { Course } from "./model/course";
import { CourseCardComponent } from "./course-card/course-card.component";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
export class AppComponent implements AfterViewInit {
courses = COURSES;

@ViewChild("containerRef") containerDiv: ElementRef;
@ViewChild("cardRef") card: CourseCardComponent;
@ViewChildren(CourseCardComponent) cards: QueryList<CourseCardComponent>;

constructor() {}

ngAfterViewInit(): void {
this.cards.changes.subscribe((cards) => console.log(cards));
}

onCourseSelected(course: Course) {
console.log("app compnent - button clicked ....", course);
}

trackCourse(index: number, course: Course) {
return index + course?.id;
}
}
23 changes: 10 additions & 13 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { CourseCardComponent } from "./course-card/course-card.component";
import { CourseImageComponent } from "./course-image/course-image.component";

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
declarations: [AppComponent, CourseCardComponent, CourseImageComponent],
imports: [BrowserModule, BrowserAnimationsModule],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule { }
export class AppModule {}
3 changes: 3 additions & 0 deletions src/app/course-card/course-card.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.course-card.beginner {
background: lightsalmon;
}
40 changes: 40 additions & 0 deletions src/app/course-card/course-card.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<ng-container *ngIf="course; else noCourse">
<div #container class="course-card" [ngClass]="cardClasses()">
<div class="course-title" [ngStyle]="cardStyles()">
{{ cardIndex || "" + " " + course.description }}
</div>

<ng-content
select="course-image"
*ngIf="course.iconUrl; else noImage"
></ng-content>

<ng-template #noImage>
<ng-container
*ngTemplateOutlet="
noImageTpl;
context: { description: course.description }
"
></ng-container>
</ng-template>

<ng-content select=".course-description"></ng-content>

<div class="course-category">
@switch (course.category) { @case ("BEGINNER") {
<div class="category">Beginner</div>
} @case ("INTERMEDIATE") {
<div class="category">Intermediate</div>
} @case ("ADVANCED") {
<div class="category">Advanced</div>
} @default {
<div class="category">Unknown</div>
} }
</div>

<button (click)="onCourseViewed()">View Course</button>
</div>
</ng-container>
<ng-template #noCourse>
<p>Invalid Course!</p>
</ng-template>
23 changes: 23 additions & 0 deletions src/app/course-card/course-card.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

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

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

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CourseCardComponent]
})
.compileComponents();

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

it('should create', () => {
expect(component).toBeTruthy();
});
});
50 changes: 50 additions & 0 deletions src/app/course-card/course-card.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import {
AfterContentInit,
AfterViewInit,
Component,
ContentChildren,
ElementRef,
EventEmitter,
Input,
Output,
QueryList,
TemplateRef,
} from "@angular/core";
import { Course } from "../model/course";
import { CourseImageComponent } from "../course-image/course-image.component";

@Component({
selector: "course-card",
templateUrl: "./course-card.component.html",
styleUrl: "./course-card.component.css",
})
export class CourseCardComponent implements AfterViewInit, AfterContentInit {
@Input({ required: true }) course: Course;
@Input({ required: true }) cardIndex: number;
@Input() noImageTpl: TemplateRef<any>;
@Output("courseSelected") courseEmitter = new EventEmitter<Course>();
@ContentChildren(CourseImageComponent, { read: ElementRef })
images: QueryList<ElementRef>;

ngAfterViewInit(): void {
console.log(this.images);
}

ngAfterContentInit(): void {
console.log(this.images);
}

onCourseViewed() {
this.courseEmitter.emit(this.course);
}

cardClasses() {
if (this.course.category === "BEGINNER") {
return ["beginner"];
}
}

cardStyles() {
return { "text-decoration": "none" };
}
}
Empty file.
7 changes: 7 additions & 0 deletions src/app/course-image/course-image.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="course-image" #courseImage>
@if(imageUrl) {
<img width="300" alt="Angular Logo" [src]="imageUrl" />
} @else {
<h2>No image available!</h2>
}
</div>
23 changes: 23 additions & 0 deletions src/app/course-image/course-image.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

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

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

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CourseImageComponent]
})
.compileComponents();

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

it('should create', () => {
expect(component).toBeTruthy();
});
});
14 changes: 14 additions & 0 deletions src/app/course-image/course-image.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Component, Input } from "@angular/core";

@Component({
selector: "course-image",
templateUrl: "./course-image.component.html",
styleUrl: "./course-image.component.css",
})
export class CourseImageComponent {
@Input('src') imageUrl: string;

constructor() {
console.log(this.imageUrl);
}
}
14 changes: 6 additions & 8 deletions src/app/model/course.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@


export interface Course {
id:number;
description:string;
iconUrl: string;
longDescription: string;
category:string;
lessonsCount:number;
id: number;
description: string;
iconUrl: string;
longDescription: string;
category: string;
lessonsCount: number;
}
Binary file added src/assets/empty-image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 85 additions & 16 deletions src/assets/styles.css
Original file line number Diff line number Diff line change
@@ -1,26 +1,95 @@

course-card {
display: block;
}

.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);
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-title {
font-size: 27px;
font-weight: bold;
.course-card .course-title {
font-size: 27px;
font-weight: bold;
}

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

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

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

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

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

course-card.is-even {
background: lightgray;
}

course-card.is-odd {
background: lightcyan;
}

.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;
}










9 changes: 0 additions & 9 deletions src/browserslist

This file was deleted.

180 changes: 97 additions & 83 deletions src/db-data.ts
Original file line number Diff line number Diff line change
@@ -1,88 +1,102 @@


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",
category: "INTERMEDIATE",
lessonsCount: 10,
},
{
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: 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",
category: 'ADVANCED',
lessonsCount: 10
},
{
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: "<p class='course-description'>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'
}
{
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:
"<p class='course-description'>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);
}
export const findCourseById = (courseId: number) =>
COURSES.find((course) => course.id === courseId);
2 changes: 1 addition & 1 deletion src/environments/environment.ts
Original file line number Diff line number Diff line change
@@ -12,4 +12,4 @@ export const environment = {
* 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/dist/zone-error'; // Included with Angular CLI.
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
18 changes: 5 additions & 13 deletions src/polyfills.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/***************************************************************************************************
* 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.
@@ -34,24 +38,12 @@
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.

/** 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.
import 'core-js/es7/reflect';


/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.

/**
* By default, zone.js will patch all possible macroTask and DomEvents
@@ -71,7 +63,7 @@ import 'core-js/es7/reflect';
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.



12 changes: 4 additions & 8 deletions src/test.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

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

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false }
}
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
9 changes: 6 additions & 3 deletions src/tsconfig.app.json
Original file line number Diff line number Diff line change
@@ -4,8 +4,11 @@
"outDir": "../out-tsc/app",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
"files": [
"main.ts",
"polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
9 changes: 5 additions & 4 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -3,19 +3,20 @@
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"module": "es2015",
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"target": "ES2022",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
],
"useDefineForClassFields": false
}
}
9 changes: 4 additions & 5 deletions tslint.json
Original file line number Diff line number Diff line change
@@ -72,7 +72,6 @@
"no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
@@ -117,12 +116,12 @@
"check-type"
],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": 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-life-cycle-interface": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true