Angular Material In Depth

Author: Your Name

src/app/course-dialog/course-dialog.component.html

@@ -1,59 +1,71 @@
 
 
+<div class="edit-course-form">
 
+    <h2 mat-dialog-title>{{description}}</h2>
 
+    <mat-dialog-content [formGroup]="form">
 
+        <mat-form-field>
 
-<!--
+            <input matInput
+                   placeholder="Course Description"
+                   formControlName="description">
 
-     <mat-form-field>
+        </mat-form-field>
 
-      <input matInput
-             placeholder="Course Description"
-             formControlName="description">
+        <mat-form-field>
 
-    </mat-form-field>
+            <mat-select placeholder="Select category"
+                        formControlName="category">
 
-    <mat-form-field>
+                <mat-option value="BEGINNER">
+                    Beginner</mat-option>
+                <mat-option value="INTERMEDIATE">
+                    Intermediate</mat-option>
+                <mat-option value="ADVANCED">
+                    Advanced</mat-option>
 
-      <mat-select placeholder="Select category"
-                  formControlName="category">
+            </mat-select>
 
-        <mat-option value="BEGINNER">
-          Beginner</mat-option>
-        <mat-option value="INTERMEDIATE">
-          Intermediate</mat-option>
-        <mat-option value="ADVANCED">
-          Advanced</mat-option>
+        </mat-form-field>
 
-      </mat-select>
+        <mat-form-field>
 
-    </mat-form-field>
+            <input matInput [matDatepicker]="myDatepicker"
+                   formControlName="releasedAt">
 
-    <mat-form-field>
+            <mat-datepicker-toggle matSuffix
+                                   [for]="myDatepicker">
 
-      <input matInput [matDatepicker]="myDatepicker"
-             formControlName="releasedAt">
+            </mat-datepicker-toggle>
 
-      <mat-datepicker-toggle matSuffix
-                             [for]="myDatepicker">
+            <mat-datepicker #myDatepicker></mat-datepicker>
 
-      </mat-datepicker-toggle>
+        </mat-form-field>
 
-      <mat-datepicker #myDatepicker></mat-datepicker>
-
-    </mat-form-field>
-
-    <mat-form-field>
+        <mat-form-field>
 
         <textarea matInput placeholder="Description"
                   formControlName="longDescription">
 
         </textarea>
 
-    </mat-form-field>
+        </mat-form-field>
+
+    </mat-dialog-content>
+
+    <mat-dialog-actions>
+
+        <button mat-raised-button (click)="close()">Close</button>
+
+        <button mat-raised-button color="primary" (click)="save()">Save</button>
+
+    </mat-dialog-actions>
+
+</div>
+
 
 
 
 
- -->

src/app/course-dialog/course-dialog.component.ts

@@ -11,6 +11,15 @@ import * as moment from 'moment';
 })
 export class CourseDialogComponent implements OnInit {
 
+    description:string;
+
+    form = this.fb.group({
+       description: ['', Validators.required],
+       category: ["BEGINNER",  Validators.required],
+       releasedAt: [new Date(), Validators.required],
+       longDescription: ["", Validators.required]
+    });
+
     constructor(private fb: FormBuilder) {
 
 
@@ -20,5 +29,12 @@ export class CourseDialogComponent implements OnInit {
 
     }
 
+    close() {
+
+    }
+
+    save() {
+
+    }
 }