Edit html component feedback-barometer (add bars, mat-card)

src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.html

+<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
+  <mat-card>
+    <div class="evaluation" *ngFor="let opinion of feedback">
+      <mat-progress-bar [value]="opinion.count" color="primary">
+      </mat-progress-bar>
+    </div>
+    <div fxLayoutAlign="center">
+      <button mat-raised-button color="primary" fxLayoutAlign="center">Toggle voting</button>
+    </div>
+  </mat-card>
+</div>

src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.scss

+mat-card {
+  max-width: 800px;
+  width: 100%;
+}
+
+mat-progress-bar {
+  height: 50px;
+  margin-bottom: 20px;
+}
+
+h2 {
+  margin-top: 10px;
+  margin-bottom: 25px;
+}

src/app/components/pages/feedback-barometer-page/feedback-barometer-page.component.ts

@@ -6,6 +6,12 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./feedback-barometer-page.component.scss']
 })
 export class FeedbackBarometerPageComponent implements OnInit {
+  feedback: any = [
+    { state: 'good', count: 0, },
+    { state: 'ok', count: 0, },
+    { state: 'not ok', count: 0, },
+    { state: 'bad', count: 0, },
+  ];
 
   constructor() { }