3 files changed, 47 insertions, 8 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html
index 2b8b74be1..bcd78323e 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html
@@ -18,8 +18,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<p>
-  select-template works!
-</p>
+<mat-vertical-stepper linear>
+  <mat-step [stepControl]="step1FormGroup">
+    <ng-template matStepLabel>Choose CBA Template file</ng-template>
+    <app-template-options></app-template-options>
+    <br>
+    <div>
+      <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
+    </div>
+  </mat-step>
 
+  <mat-step [stepControl]="step2FormGroup">
+    <ng-template matStepLabel>Browse CBA Template file</ng-template>
+    <app-search-template (change)="fileChange(fileupload.files)"></app-search-template>
+    <br>
+    <div>
+      <button mat-button matStepperNext class="matStepNextBtn">Upload</button>
+    </div>
+  </mat-step>
+  <mat-step [stepControl]="step3FormGroup">
+    <ng-template matStepLabel>Enter Metadata details</ng-template>
+    <app-metadata></app-metadata>
+    <br>
+  </mat-step>
+</mat-vertical-stepper>
+<button mat-button matStepperNext class="matStepNextBtn">Next</button>
 <!-- <router-outlet></router-outlet> -->
+
+<!-- </form> -->
+\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss
index 22941b5fa..47ae92a20 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss
@@ -17,4 +17,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
-*/
-\ No newline at end of file
+*/
+
+.matStepNextBtn{
+    color:white;
+    background:gray; 
+    margin-top: 10px; 
+    position: absolute;
+    
+}
+\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts
index 78a0d1b1f..b4356a601 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts
@@ -19,7 +19,7 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 import { Component, OnInit } from '@angular/core';
-import { Observable} from 'rxjs';
+import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 
 @Component({
@@ -29,10 +29,18 @@ import { Store } from '@ngrx/store';
 })
 export class SelectTemplateComponent implements OnInit {
   blueprint: any
-  constructor() {
-   }
+  myFile: File; /* property of File type */
 
-  ngOnInit() {
+  constructor() {
   }
 
+  ngOnInit() {  
+  }
+  fileChange(files: any) {
+    console.log(files);
+    this.myFile = files[0].nativeElement;
+  }
+  upload(){
+    
+  }
 }