fmakes a form

src/app/app.component.html

@@ -19,6 +19,16 @@
 <mat-sidenav-container>
   <mat-sidenav #sidenav mode="side" opened class="app-sidenav">
     <!-- Sidenav Menu -->
+    <nav>
+      <a mat-button class="nav-link" *ngFor="let link of links " [routerLink]="link.path" 
+      routerLinkActive="active">
+        <mat-icon>
+          {{link.icon}}
+        </mat-icon>
+        {{link.title}}
+
+      </a>
+    </nav>
   </mat-sidenav>
 
   <div class="container">

src/app/app.module.ts

@@ -8,10 +8,12 @@ import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
 import { HomeComponent } from './home/home.component';
 import { CoursesComponent } from './courses/courses.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     BrowserModule,
+    FormsModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MaterialModule,

src/app/common/models/course.ts

@@ -0,0 +1,8 @@
+export interface Course {
+    id: string,
+    title: string,
+    description: string,
+    percentComplete:number,
+    favourite: boolean
+
+}

src/app/courses/courses.component.html

@@ -7,9 +7,22 @@
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>
+          <mat-list>
+              <mat-list-item *ngFor="let course of courses" (click)="selectCourse(course)">
+                  <h3 matLine>{{course.title}} </h3>
+                  <p matLine>
+                      {{course.description}}
+                  </p>
+                  <button mat-icon-button color="warn" (click)="deleteCourse(course.id); $event.stopImmediatePropagation()">
+                      <mat-icon>delete</mat-icon>
+                  </button>
 
+              </mat-list-item>
+          </mat-list>
             <!-- COURSES LIST -->
 
+
+
         </mat-card-content>
         </mat-card>
     </div>
@@ -18,19 +31,61 @@
         <mat-card>
             <mat-card-header>
                 <mat-card-title>
-                    Select Course
+                    <span *ngIf="selectedCourse?.id; else elseBlock">
+                        {{originalTitle | titlecase}}
+                    </span>
+                    <ng-template #elseBlock> Select a course</ng-template>
                 </mat-card-title>
             </mat-card-header>
-            <mat-card-content>
-
+            <form #form="ngForm" (submit)="saveCourse(selectedCourse)">
+            <mat-card-content> 
+                <mat-form-field class="full-width">
+                    <input matInput placeholder="Title" [(ngModel)]=" selectedCourse.title " 
+                    required 
+                    type="text"
+                    name="title"
+                    >
+                </mat-form-field>
+                <mat-form-field class="full-width">
+                    <textarea matInput placeholder="Description" [(ngModel)]=" selectedCourse.description " 
+                    required 
+                    type="text"
+                    name="Description"
+                    >
+                </textarea>
+                </mat-form-field>
             <!-- COURSE FORM -->
+                <section class="full-width">
+                    <h4>
+                        {{selectedCourse.percentComplete}}% Complete
+                    </h4>
+                    <mat-slider class="full-width"
+                    min="0"
+                    max="100"
+                    thumbLabel
+                    name="percentComplete"
+                    [(ngModel)]=" selectedCourse.percentComplete">
+
+                    </mat-slider>
 
+                </section>
+                <section>
+                    <mat-checkbox [(ngModel)]=" selectedCourse.favourite" name="favourite">
+                        Favourite
+                    </mat-checkbox>
+                </section>
             </mat-card-content>
             <mat-card-actions>
 
             <!-- COURSE ACTIONS -->
+            <button type="submit" [disabled]="form.invalid" mat-button color="primary">Save</button>
+            <button type="button" mat-button (click)="reset()">Cancel</button>
 
             </mat-card-actions>
+        </form>
+        <hr>
+        <pre> {{form.value | json}}</pre>
+        <pre> {{form.valid | json}}</pre>
         </mat-card>
     </div>
 </div>

src/app/courses/courses.component.ts

@@ -1,24 +1,59 @@
 import { Component, OnInit } from '@angular/core';
+import { Course } from '../common/models/course';
+const emptyCourse: Course ={
+  id:null,
+  title: '',
+  description: '',
+  percentComplete: 26,
+  favourite: false
+}
 
 @Component({
   selector: 'app-courses',
   templateUrl: './courses.component.html',
   styleUrls: ['./courses.component.scss']
 })
 export class CoursesComponent implements OnInit {
+
   courses = [
+
+    // 1. render courses in a list
+    // 2. seoect a course
+    // 3. render a selected course
     {
       id: 1,
       title: 'Angular 13 Fundamentals',
       description: 'Learn the fundamentals of Angular 13',
       percentComplete: 26,
       favorite: true
+    },
+    {
+      id: 2,
+      title: 'Js Course',
+      description: 'Learn the fundamentals JS',
+      percentComplete: 76,
+      favorite: true
     }
   ];
+   selectedCourse = emptyCourse;
+   originalTitle='';
 
   constructor() { }
 
   ngOnInit(): void {
   }
-
+  selectCourse(course){
+    // ...course is the soluton of shared mutable
+    this.selectedCourse = {...course};
+    this.originalTitle= course.title;
+  }
+  deleteCourse(courseId){
+    console.log('Delete Course', courseId);
+  }
+  saveCourse(course){
+    console.log('save Course',course);
+  }
+  reset(){
+    this.selectCourse({...emptyCourse});
+  }
 }

src/app/home/home.component.html

@@ -4,5 +4,18 @@
   </mat-card-header>
   <mat-card-content>
     <!-- LESSON LIST -->
+
+      <mat-list>
+          <mat-list-item *ngFor="let lesson of courseLessons" (click)="selectLesson(lesson)">
+
+
+                  {{lesson.title}}
+
+
+
+          </mat-list-item>
+      </mat-list>
+      <hr>
+      <pre> {{selectedLesson.title}}</pre>
   </mat-card-content>
 </mat-card>

src/app/home/home.component.ts

@@ -16,8 +16,12 @@ export class HomeComponent implements OnInit {
     { title: 'Angular Routing' },
     { title: 'Unit Testing Fundamentals' },
   ];
-
+    selectedLesson:any;
   constructor() {}
 
   ngOnInit() {}
+
+  selectLesson(lesson){
+    this.selectedLesson = lesson; 
+  }
 }