added link to group page

src/app/components/social/groups/groups.component.html

@@ -7,7 +7,7 @@
 
 <div id="grouplist">
     <mat-card class="group-card" *ngFor="let group of user.groups" 
-    [class.selected]="group === selectedGroup">
+    [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
       <mat-card-header>
         <div mat-card-avatar class="group-picture"></div>
         <mat-card-title>{{group.name}}</mat-card-title>

src/app/components/social/groups/groups.component.sass

@@ -9,6 +9,7 @@
   box-sizing: border-box
   width: 100%
   margin-top: 0.5em
+  cursor: pointer
   .mat-card-subtitle
     margin: 0
 

src/app/components/social/groups/groups.component.ts

@@ -1,9 +1,10 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { GroupInfo } from 'src/app/models/groupinfo';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import { SocialService } from 'src/app/services/social/social.service';
 import { User } from 'src/app/models/user';
 import { DatasharingService } from 'src/app/services/datasharing.service';
+import { Router } from '@angular/router';
 
 // DIALOG COMPONENT to create groups
 @Component({
@@ -38,13 +39,17 @@ export class DialogCreateGroupComponent {
 })
 export class GroupsComponent implements OnInit {
   user: User;
-  constructor(public dialog: MatDialog, private data: DatasharingService) { }
+  constructor(public dialog: MatDialog, private data: DatasharingService, private router: Router) { }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
     this.user = user; });
   }
 
+  public showGroupProfile(group: GroupInfo) {
+    this.router.navigate(['group/' + group.id]);
+  }
+
   openDialog(): void {
     const dialogRef = this.dialog.open(DialogCreateGroupComponent, {
       width: '250px'