Angular Forms Course

Author: jhades

src/app/app.module.ts

@@ -39,6 +39,7 @@ import {MatRadioModule} from '@angular/material/radio';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {CreateCourseStepOneComponent} from './create-course/create-course-step-one/create-course-step-one.component';
 import {CreateCourseStepTwoComponent} from './create-course/create-course-step-two/create-course-step-two.component';
+import {MatStepperModule} from '@angular/material/stepper';
 
 @NgModule({
     declarations: [
@@ -79,6 +80,7 @@ import {CreateCourseStepTwoComponent} from './create-course/create-course-step-t
         MatNativeDateModule,
         MatRadioModule,
         MatCheckboxModule,
+        MatStepperModule,
         FormsModule,
         ReactiveFormsModule
     ],

src/app/create-course/create-course-step-one/create-course-step-one.component.html

@@ -105,18 +105,6 @@
 
   </mat-form-field>
 
-  <div class="form-buttons">
-
-    <button mat-raised-button (click)="reset()">
-      Reset
-    </button>
-
-    <button mat-raised-button color="primary" [disabled]="!form.valid" (click)="continueToStep2()">
-      Continue to Step 2
-    </button>
-
-  </div>
-
   <div class="form-val">
 
     {{form.errors | json}}

src/app/create-course/create-course-step-one/create-course-step-one.component.ts

@@ -41,14 +41,4 @@ export class CreateCourseStepOneComponent implements OnInit {
 
   }
 
-  reset() {
-
-    this.form.reset();
-
-  }
-
-  continueToStep2() {
-    console.log("Step 1 form values", this.form.value);
-  }
-
 }

src/app/create-course/create-course.component.css

@@ -1,11 +1,34 @@
 
 <div class="create-course-panel data-form">
 
-  <h2 class="title">Create New Course <span class="current-step"> step {{currentStep}} of 3</span></h2>
+  <h2 class="title">Create New Course</h2>
 
 
+  <mat-horizontal-stepper labelPosition="bottom"  class="mat-elevation-z5">
 
+    <mat-step [stepControl]="stepOne.form">
 
-  <create-course-step-one></create-course-step-one>
+        <ng-template matStepLabel>course landing page details</ng-template>
+
+        <create-course-step-one #stepOne></create-course-step-one>
+
+        <div>
+          <button mat-raised-button color="primary" matStepperNext>Continue to Step 2</button>
+        </div>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>course pricing details</ng-template>
+
+      <div>
+        <button mat-raised-button  matStepperPrevious>Back</button>
+        <button mat-raised-button color="primary" matStepperNext>Continue to Step 3</button>
+      </div>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
 
 </div>

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

@@ -0,0 +1,9 @@
+
+h2 {
+  font-family: "Roboto";
+}
+
+.data-form {
+  max-width: 600px;
+  margin: 0 auto;
+}

src/app/create-course/create-course.component.scss

@@ -1,21 +1,25 @@
 import { Component, OnInit } from '@angular/core';
 
 
+
+
 @Component({
   selector: 'create-course',
   templateUrl: './create-course.component.html',
-  styleUrls: ['./create-course.component.css']
+  styleUrls: ['./create-course.component.scss']
 })
 export class CreateCourseComponent implements OnInit {
 
 
+  constructor() {
 
-  currentStep = 1;
-
+  }
 
 
   ngOnInit() {
 
+
+
   }