Edit component answer-statistic

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

@@ -14,7 +14,7 @@
           <div align="right"> Responded answers: {{ statistic.answers }} </div>
         </div>
       </mat-tab>
-      <mat-tab label="Evaluation">
+      <mat-tab label="Evaluation" (choose)="showEvaluation(selectedContent.index)">
         <h2 fxLayoutAlign="center">{{ selectedContent.name }}</h2>
         <div class="evaluation" *ngFor="let choice of evaluation">
           {{ choice.name }}
@@ -25,9 +25,9 @@
           <div align="right"> Selected: {{ choice.answers }} times</div>
         </div>
         <div fxLayoutAlign="center" fxLayoutGap="10px">
-          <button mat-raised-button color="primary">Before</button>
+          <button mat-raised-button color="primary" (click)="showEvaluation(selectedContent.index-1)">Before</button>
           <div><b>{{ selectedContent.index }} / {{ selectedContent.length }}</b></div>
-          <button mat-raised-button color="primary">Next</button>
+          <button mat-raised-button color="primary" (click)="showEvaluation(selectedContent.index+1)">Next</button>
         </div>
       </mat-tab>
     </mat-tab-group>

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

@@ -19,15 +19,15 @@ export class AnswerStatisticsComponent implements OnInit {
   @Input() choiceAnswers: ChoiceAnswer[] = [];
   statistics: any = null;
   selectedContent: any = {
-    name: 'HOW TO MAKE CONTENT',
+    name: 'HOW TO MAKE CONTENT GREAT AGAIN',
     index: '1',
     length: '1'
   };
   evaluation: any = [
-    { name: 'test', percent: 50, correct: false, answers: 50, },
-    { name: 'test', percent: 10, correct: false, answers: 10, },
-    { name: 'test', percent: 30, correct: true, answers: 30, },
-    { name: 'test', percent: 40, correct: false, answers: 40, }
+    { name: 'Skill', percent: 10, correct: false, answers: 1, },
+    { name: 'Knowledge', percent: 10, correct: false, answers: 1, },
+    { name: '???', percent: 30, correct: true, answers: 3, },
+    { name: 'Not at all', percent: 50, correct: true, answers: 5, }
     ];
   states = [
     { value: '1', viewValue: 'Text answers' },
@@ -94,4 +94,8 @@ export class AnswerStatisticsComponent implements OnInit {
   countChoiceAnswers(contentId: string): number {
     return this.choiceAnswers.filter(answer => answer.contentId === contentId).length;
   }
+
+  showEvaluation(index: number) {
+    /** coming with api connection, logic doesnt make sense without knowledge about api **/
+  }
 }