Open dialog when info-button is clicked

src/app/components/shared/shared.module.ts

@@ -71,7 +71,8 @@ import { StatisticHelpComponent } from './_dialogs/statistic-help/statistic-help
   ],
   entryComponents: [
     RoomCreateComponent,
-    LoginComponent
+    LoginComponent,
+    StatisticHelpComponent
   ]
 })
 export class SharedModule {

src/app/components/shared/statistics-page/statistics-page.component.html

@@ -3,7 +3,7 @@
     <mat-card-header>
       <h2>{{'statistic.learning-status' | translate}}</h2>
       <span class="fill-remaining-space"></span>
-      <button mat-icon-button><mat-icon color="primary">help</mat-icon></button>
+      <button mat-icon-button (click)="showHelp()"><mat-icon color="primary">help</mat-icon></button>
     </mat-card-header>
     <mat-divider></mat-divider>
     <div *ngIf="isLoading"                                                                                                                                                                                                                                                                                                                                                          fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>

src/app/components/shared/statistics-page/statistics-page.component.ts

@@ -5,7 +5,8 @@ import { ContentGroup } from '../../../models/content-group';
 import { Room } from '../../../models/room';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
-import { MatTabGroup } from '@angular/material';
+import { MatTabGroup, MatDialog } from '@angular/material';
+import { StatisticHelpComponent } from '../_dialogs/statistic-help/statistic-help.component';
 
 @Component({
   selector: 'app-statistics',
@@ -22,12 +23,12 @@ export class StatisticsPageComponent implements OnInit {
 
   @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
 
-  constructor(
-    private route: ActivatedRoute,
-    private roomService: RoomService,
-    private translateService: TranslateService,
-    protected langService: LanguageService) {
-    langService.langEmitter.subscribe(lang => translateService.use(lang));
+  constructor(private route: ActivatedRoute,
+              private roomService: RoomService,
+              private translateService: TranslateService,
+              protected langService: LanguageService,
+              public dialog: MatDialog,) {
+              langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
   ngOnInit(): void {
@@ -49,4 +50,10 @@ export class StatisticsPageComponent implements OnInit {
     });
   }
 
+  showHelp(): void {
+    this.dialog.open(StatisticHelpComponent, {
+      width: '350px'
+    });
+  }
+
 }