add popup to card-assignment

AngularApp/src/app/card-assignment/card-assignment.component.html

@@ -5,7 +5,7 @@
         </div>
         <p class="card-category">{{assgn.description}}</p>
         <h3 class="card-title">{{assgn.title}}</h3>
-        <a mat-raised-button type="submit" class="btn btn-outline-info pull-right">Create</a>
+        <a mat-raised-button (click)="openDialog()" class="btn btn-outline-info pull-right">Details</a>
     </div>
     <div class="card-footer">
         <p>{{assgn.language}}</p>

AngularApp/src/app/card-assignment/card-assignment.component.ts

@@ -2,16 +2,39 @@ import { Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Assignment } from 'app/model/assignment';
 
+import { TableListComponent } from 'app/table-list/table-list.component';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+export interface DialogData {
+  animal: string;
+  name: string;
+}
+
 @Component({
   selector: 'app-card-assignment',
   templateUrl: './card-assignment.component.html',
   styleUrls: ['./card-assignment.component.scss'],
 })
 export class CardAssignmentComponent implements OnInit {
- @Input() assgn : Assignment;
-  constructor() { }
+  @Input() assgn : Assignment;
+  
+  animal: string;
+  name: string;
 
+  constructor(public dialog: MatDialog) { }
+  
   ngOnInit(): void {
   }
-
+  
+  openDialog(): void {
+    const dialogRef = this.dialog.open(TableListComponent, {
+      width: '800px',
+      // data: {name: this.name, animal: this.animal}
+    });
+    
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.animal = result;
+    });
+  }
+  
 }

AngularApp/src/app/material-components/material-components.module.ts

@@ -5,6 +5,7 @@ import {MatTableModule} from '@angular/material/table';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {MatCardModule} from '@angular/material/card';
+import {MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [],
@@ -13,13 +14,15 @@ import {MatCardModule} from '@angular/material/card';
     CommonModule,
     MatInputModule,
     MatSelectModule,
-    MatCardModule
+    MatCardModule,
+    MatDialogModule
   ],
   exports:[
     MatTableModule,
     MatInputModule,
     MatSelectModule,
-    MatCardModule
+    MatCardModule,
+    MatDialogModule
   ]
 })
 export class MaterialComponentsModule { }