Edit html and style of answer-statistic

src/app/answer-statistics/answer-statistics.component.html

-<mat-card>
-  <mat-progress-bar [value]="50">
-  </mat-progress-bar>
-</mat-card>
+<div fxLayout="row" fxLayoutAlign="center">
+  <div fxLayout="column" fxLayoutGap="20px">
+    <mat-card>
+      <mat-tab-group>
+        <mat-tab label="Answer statistic">
+          <mat-select placeholder="Answers" fxLayoutAlign="right">
+            <mat-option *ngFor="let state of states" [value]="state.value">
+              {{ state.value }}
+            </mat-option>
+          </mat-select>
+          <div class="bars">
+            Answer 1
+            <mat-progress-bar [value]="50" #col *ngIf="state.value === 'Responded' :">
+            </mat-progress-bar>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+    </mat-card>
+  </div>
+</div>

src/app/answer-statistics/answer-statistics.component.scss

+mat-card {
+  min-width: 800px;
+  justify-content: center;
+}
+
+mat-select {
+  max-width: 100px;
+  margin-top: 10px;
+  margin-left: 675px;
+}
+
+.bars {
+  margin-top: 20px;
+}

src/app/answer-statistics/answer-statistics.component.ts

@@ -6,6 +6,10 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./answer-statistics.component.scss']
 })
 export class AnswerStatisticsComponent implements OnInit {
+  states = [
+    { value: '1', viewValue: 'Responded' },
+    { value: '2', viewValue: 'Not responded' },
+  ];
 
   constructor() { }