My excercises

angular.json

@@ -20,18 +20,11 @@
             "outputPath": "dist/angular-signals-course",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -85,19 +78,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         }

server/get-courses.route.ts

@@ -11,18 +11,18 @@ export function getAllCourses(req: Request, res: Response) {
       return;
   */
 
- console.log(`Called GET /api/courses`);
 
-  setTimeout(() => {
 
-    console.log(`Returning GET /api/courses`);
+  setTimeout(() => {
 
     res.status(200).json({courses:Object.values(COURSES)});
 
-  }, 1000);
+  }, 1500);
+
 
 }
 
+
 export function getCourseById(req: Request, res: Response) {
 
   setTimeout(() => {
@@ -33,6 +33,6 @@ export function getCourseById(req: Request, res: Response) {
     const course = courses.find(course => course.id == courseId);
 
     res.status(200).json(course);
-  })
+  }, 1500);
 
 }

src/app/app.component.html

@@ -24,18 +24,14 @@
         <span>resource() Demo</span>
       </a>
 
-      @if(isLoggedIn()) {
-        <a mat-list-item (click)="onLogout()">
-          <mat-icon>exit_to_app</mat-icon>
-          <span>Logout</span>
-        </a>
-      }
-      @else {
-        <a mat-list-item routerLink="login">
-          <mat-icon>account_circle</mat-icon>
-          <span>Login</span>
-        </a>
-      }
+      <a mat-list-item routerLink="login">
+        <mat-icon>account_circle</mat-icon>
+        <span>Login</span>
+      </a>
+      <a mat-list-item>
+        <mat-icon>exit_to_app</mat-icon>
+        <span>Logout</span>
+      </a>
 
     </mat-nav-list>
 
@@ -55,9 +51,6 @@
 
   </mat-toolbar>
 
-  <messages />
-
-  <loading />
 
   <router-outlet/>
 

src/app/app.component.ts

@@ -7,7 +7,6 @@ import {MatToolbar} from "@angular/material/toolbar";
 import {MatIconButton} from "@angular/material/button";
 import {LoadingIndicatorComponent} from "./loading/loading.component";
 import {MessagesComponent} from "./messages/messages.component";
-import {AuthService} from "./services/auth.service";
 
 
 @Component({
@@ -21,11 +20,5 @@ import {AuthService} from "./services/auth.service";
 })
 export class AppComponent {
 
-  authService = inject(AuthService);
 
-  isLoggedIn = this.authService.isLoggedIn;
-
-  onLogout() {
-    this.authService.logout();
-  }
 }

src/app/app.config.ts

@@ -4,17 +4,13 @@ import {provideRouter} from '@angular/router';
 import {routes} from './app.routes';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http";
-import {loadingInterceptor} from "./services/loading.interceptor";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideAnimationsAsync(),
     provideHttpClient(
-      withFetch(),
-      withInterceptors([
-        //loadingInterceptor
-      ])
+      withFetch()
     )
   ]
 };

src/app/app.routes.ts

@@ -2,27 +2,13 @@ import {Routes} from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {LoginComponent} from "./login/login.component";
 import {LessonsComponent} from "./lessons/lessons.component";
-import {isUserAuthenticated} from "./guards/auth.guard";
-import {CourseComponent} from "./course/course.component";
-import {courseResolver} from "./course/course.resolver";
-import {courseLessonsResolver} from "./course/course-lessons.resolver";
-import {LinkedSignalDemoComponent} from "./linked-signal/linked-signal-demo.component";
 import {ResourceDemoComponent} from "./resource-demo/resource-demo.component";
+import {LinkedSignalDemoComponent} from "./linked-signal/linked-signal-demo.component";
 
 export const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
-    canActivate: [isUserAuthenticated]
-  },
-  {
-    'path': 'courses/:courseId',
-    component: CourseComponent,
-    canActivate: [isUserAuthenticated],
-    resolve: {
-      course: courseResolver,
-      lessons: courseLessonsResolver
-    }
+    component: HomeComponent
   },
   {
     path: "login",

src/app/course-category-combobox/course-category-combobox.component.html

@@ -1,10 +1,9 @@
 
 <div class="form-control">
 
-  <label>{{label()}}</label>
+  <label></label>
 
-  <select [value]="value()" #category
-    (change)="onCategoryChanged(category.value)">
+  <select  #category>
     <option value="BEGINNER">Beginners</option>
     <option value="INTERMEDIATE">Intermediate</option>
     <option value="ADVANCED">Advanced</option>

src/app/course-category-combobox/course-category-combobox.component.ts

@@ -1,20 +1,16 @@
-import {Component, input, model} from '@angular/core';
-import {CourseCategory} from "../models/course-category.model";
+import { Component, input, model } from '@angular/core';
+import { CourseCategory } from '../models/course-category.model';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { EditCourseDialogData } from '../edit-course-dialog/edit-course-dialog.data.model';
+import { EditCourseDialogComponent } from '../edit-course-dialog/edit-course-dialog.component';
 
 @Component({
-    selector: 'course-category-combobox',
-    imports: [],
-    templateUrl: './course-category-combobox.component.html',
-    styleUrl: './course-category-combobox.component.scss'
+  selector: 'course-category-combobox',
+  standalone: true,
+  imports: [],
+  templateUrl: './course-category-combobox.component.html',
+  styleUrl: './course-category-combobox.component.scss',
 })
 export class CourseCategoryComboboxComponent {
 
-  label = input.required<string>();
-
-  value = model.required<CourseCategory>();
-
-  onCategoryChanged(category: string) {
-    this.value.set(category as CourseCategory);
-  }
-
 }

src/app/course/course.component.html

@@ -1,20 +1 @@
-<div class="course-container">
-  <div class="course-header">
-    <h1>{{ course()?.title }}</h1>
-    <img class="course-image" [src]="course()?.iconUrl">
-  </div>
-  <div class="table-container">
-    <table class="results-table">
-      @for(lesson of lessons(); track lesson.id) {
-        <tr>
-          <td>
-            {{lesson.description}}
-          </td>
-          <td>
-            {{lesson.duration}}
-          </td>
-        </tr>
-      }
-    </table>
-  </div>
-</div>
+<p>course works!</p>

src/app/course/course.component.ts

@@ -1,24 +1,12 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
-import {Course} from "../models/course.model";
-import {Lesson} from "../models/lesson.model";
-import {ActivatedRoute} from "@angular/router";
+import { Component } from '@angular/core';
 
 @Component({
-    selector: 'course',
-    imports: [],
-    templateUrl: './course.component.html',
-    styleUrl: './course.component.scss'
+  selector: 'course',
+  standalone: true,
+  imports: [],
+  templateUrl: './course.component.html',
+  styleUrl: './course.component.scss'
 })
-export class CourseComponent implements OnInit {
+export class CourseComponent {
 
-  course = signal<Course | null>(null);
-
-  lessons = signal<Lesson[]>([]);
-
-  route = inject(ActivatedRoute);
-
-  ngOnInit() {
-    this.course.set(this.route.snapshot.data["course"]);
-    this.lessons.set(this.route.snapshot.data["lessons"]);
-  }
 }

src/app/courses-card-list/courses-card-list.component.html

@@ -1,23 +1,22 @@
+@for(course of courses() ;track course.id){
 
-@for(course of courses(); track course.id) {
-  <div class="course-card">
-    <div class="course-header">
-      <span class="course-title">{{course.title}}</span>
-    </div>
-    <img class="course-image" [src]="course.iconUrl">
-    <div class="course-description">
-      <p>{{course.longDescription}}</p>
-    </div>
-    <div class="course-actions">
-      <button class="btn"
-              [routerLink]="['courses', course.id]" >
-        VIEW COURSE
-      </button>
-      <button class="btn" (click)="onEditCourse(course)">
-        EDIT
-      </button>
-      <img class="delete" src="/assets/icons/delete.svg"
-        (click)="onCourseDeleted(course)">
-    </div>
+<div class="course-card">
+  <div class="course-header">
+    <span class="course-title">{{ course.title }}</span>
   </div>
+  <img class="course-image" [src]="course.iconUrl" alt="" />
+  <div class="course-description">
+    <p>{{ course.longDescription }}</p>
+  </div>
+  <div class="course-actions">
+    <button class="btn">
+      VIEW COURSE
+    </button>
+    <button class="btn" (click)="onEdiCourse(course)">
+      EDIT
+    </button>
+    <img class="delete" src="/assets/icons/delete.svg">
+  </div>
+</div>
+
 }