-
+
-
+ @for (course of courses; track course) {
+
+
+
+ }
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 52b3c7a5..9517c894 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -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;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c7e57edc..a7a2e0a9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren, ChangeDetectionStrategy} from '@angular/core';
import {COURSES} from '../db-data';
import {Course} from './model/course';
import {CourseCardComponent} from './course-card/course-card.component';
@@ -6,9 +6,11 @@ import {HighlightedDirective} from './directives/highlighted.directive';
import {Observable} from 'rxjs';
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: false
})
export class AppComponent implements OnInit {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d8973517..95482b2d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,22 +7,15 @@ import { CourseCardComponent } from './course-card/course-card.component';
import { CourseImageComponent } from './course-image/course-image.component';
import { HighlightedDirective } from './directives/highlighted.directive';
import { NgxUnlessDirective } from './directives/ngx-unless.directive';
-import {HttpClientModule} from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-@NgModule({
- declarations: [
- AppComponent,
- CourseCardComponent,
- CourseImageComponent,
- HighlightedDirective,
- NgxUnlessDirective
- ],
- imports: [
- BrowserModule,
- BrowserAnimationsModule,
- HttpClientModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
+@NgModule({ declarations: [
+ AppComponent,
+ CourseCardComponent,
+ CourseImageComponent,
+ HighlightedDirective,
+ NgxUnlessDirective
+ ],
+ bootstrap: [AppComponent], imports: [BrowserModule,
+ BrowserAnimationsModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
export class AppModule { }
diff --git a/src/app/course-card/course-card.component.html b/src/app/course-card/course-card.component.html
index 63619358..faf54c01 100644
--- a/src/app/course-card/course-card.component.html
+++ b/src/app/course-card/course-card.component.html
@@ -1,31 +1,31 @@
-
-
-
- {{ cardIndex || '' + ' ' + course.description }}
-
-
-
-
-
-
- Edit Title:
-
-
-
-
-
-
Beginner
-
-
Intermediate
-
-
Advanced
-
+@if (course) {
+
+
+ {{ cardIndex || '' + ' ' + course.description }}
+
+ @if (course.iconUrl) {
+
+ }
+
+ Edit Title:
+
+
+ @switch (course.category) {
+ @case ('BEGINNER') {
+
Beginner
+ }
+ @case ('INTERMEDIATE') {
+
Intermediate
+ }
+ @case ('ADVANCED') {
+
Advanced
+ }
+ }
+
+
-
-
-
-
+}
diff --git a/src/app/course-card/course-card.component.spec.ts b/src/app/course-card/course-card.component.spec.ts
index 5956d916..125f7d50 100644
--- a/src/app/course-card/course-card.component.spec.ts
+++ b/src/app/course-card/course-card.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { CourseCardComponent } from './course-card.component';
@@ -6,7 +6,7 @@ describe('CourseCardComponent', () => {
let component: CourseCardComponent;
let fixture: ComponentFixture
;
- beforeEach(async(() => {
+ beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ CourseCardComponent ]
})
diff --git a/src/app/course-card/course-card.component.ts b/src/app/course-card/course-card.component.ts
index 5b9114db..1b06e40c 100644
--- a/src/app/course-card/course-card.component.ts
+++ b/src/app/course-card/course-card.component.ts
@@ -1,15 +1,16 @@
import {
- AfterContentInit,
- AfterViewInit,
- Component,
- ContentChildren,
- ElementRef,
- EventEmitter,
- Input,
- OnInit,
- Output,
- QueryList,
- ViewEncapsulation
+ AfterContentInit,
+ AfterViewInit,
+ Component,
+ ContentChildren,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+ QueryList,
+ ViewEncapsulation,
+ ChangeDetectionStrategy
} from '@angular/core';
import {Course} from '../model/course';
import {CourseImageComponent} from '../course-image/course-image.component';
@@ -17,7 +18,9 @@ import {CourseImageComponent} from '../course-image/course-image.component';
@Component({
selector: 'course-card',
templateUrl: './course-card.component.html',
- styleUrls: ['./course-card.component.css']
+ styleUrls: ['./course-card.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: false
})
export class CourseCardComponent implements OnInit {
diff --git a/src/app/course-image/course-image.component.spec.ts b/src/app/course-image/course-image.component.spec.ts
index c06726bc..142d2f40 100644
--- a/src/app/course-image/course-image.component.spec.ts
+++ b/src/app/course-image/course-image.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { CourseImageComponent } from './course-image.component';
@@ -6,7 +6,7 @@ describe('CourseImageComponent', () => {
let component: CourseImageComponent;
let fixture: ComponentFixture;
- beforeEach(async(() => {
+ beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ CourseImageComponent ]
})
diff --git a/src/app/course-image/course-image.component.ts b/src/app/course-image/course-image.component.ts
index 85d04265..59c2f347 100644
--- a/src/app/course-image/course-image.component.ts
+++ b/src/app/course-image/course-image.component.ts
@@ -1,9 +1,11 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ChangeDetectionStrategy} from '@angular/core';
@Component({
- selector: 'course-image',
- templateUrl: './course-image.component.html',
- styleUrls: ['./course-image.component.css']
+ selector: 'course-image',
+ templateUrl: './course-image.component.html',
+ styleUrls: ['./course-image.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
+ standalone: false
})
export class CourseImageComponent implements OnInit {
diff --git a/src/app/directives/highlighted.directive.ts b/src/app/directives/highlighted.directive.ts
index de37cfcc..46501500 100644
--- a/src/app/directives/highlighted.directive.ts
+++ b/src/app/directives/highlighted.directive.ts
@@ -2,7 +2,8 @@ import {Directive, EventEmitter, HostBinding, HostListener, Input, Output} from
@Directive({
selector: '[highlighted]',
- exportAs: 'hl'
+ exportAs: 'hl',
+ standalone: false
})
export class HighlightedDirective {
diff --git a/src/app/directives/ngx-unless.directive.ts b/src/app/directives/ngx-unless.directive.ts
index 68260084..937513b4 100644
--- a/src/app/directives/ngx-unless.directive.ts
+++ b/src/app/directives/ngx-unless.directive.ts
@@ -1,7 +1,8 @@
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
@Directive({
- selector: '[ngxUnless]'
+ selector: '[ngxUnless]',
+ standalone: false
})
export class NgxUnlessDirective {
diff --git a/src/browserslist b/src/browserslist
deleted file mode 100644
index 8e09ab49..00000000
--- a/src/browserslist
+++ /dev/null
@@ -1,9 +0,0 @@
-# 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
\ No newline at end of file
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 600fdaf8..c2757476 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -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.
diff --git a/src/main.ts b/src/main.ts
index 91ec6da5..03bd0e33 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
@@ -8,5 +8,5 @@ if (environment.production) {
enableProdMode();
}
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic().bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()], })
.catch(err => console.log(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
index d310405a..a69641f0 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -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.
diff --git a/src/test.ts b/src/test.ts
index 16317897..ae25f27c 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -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);
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index 190fd300..5a3fe59a 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -4,8 +4,19 @@
"outDir": "../out-tsc/app",
"types": []
},
- "exclude": [
- "test.ts",
- "**/*.spec.ts"
- ]
+ "files": [
+ "main.ts",
+ "polyfills.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
index de773363..3f0b5a30 100644
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -14,5 +14,13 @@
"include": [
"**/*.spec.ts",
"**/*.d.ts"
- ]
+ ],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/tsconfig.json b/tsconfig.json
index 916247e4..8e3de58c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,19 +3,20 @@
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
+ "esModuleInterop": true,
"sourceMap": true,
"declaration": false,
- "module": "es2015",
- "moduleResolution": "node",
- "emitDecoratorMetadata": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
"experimentalDecorators": true,
- "target": "es5",
+ "target": "ES2022",
"typeRoots": [
"node_modules/@types"
],
- "lib": [
- "es2017",
- "dom"
- ]
+ "useDefineForClassFields": false,
+ "ignoreDeprecations": "6.0",
+ "strictPropertyInitialization": false,
+ "strictNullChecks": false,
+ "noImplicitAny": false
}
}
diff --git a/tslint.json b/tslint.json
index 3ea984c7..5065137a 100644
--- a/tslint.json
+++ b/tslint.json
@@ -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
+ src="https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png">
-