Angular NgRx Course

Author: jhades

src/app/courses/courses-card-list/courses-card-list.component.css

@@ -6,5 +6,10 @@
 
 .course-actions {
     text-align: center;
+
+}
+
+.course-actions button {
+  margin-right: 10px;
 }
 

src/app/courses/courses-card-list/courses-card-list.component.html

@@ -16,14 +16,17 @@
 
     <mat-card-actions class="course-actions">
 
-        <button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.id]">
-            VIEW COURSE
+        <button mat-raised-button color="primary" [routerLink]="['/courses', course.id]">
+            VIEW
         </button>
 
-        <button mat-button class="mat-raised-button mat-accent"
-                (click)="editCourse(course)">
-            EDIT
-        </button>
+      <button mat-mini-fab color="accent">
+        <mat-icon class="add-course-btn" (click)="editCourse(course)">edit</mat-icon>
+      </button>
+
+      <button mat-mini-fab color="warn">
+        <mat-icon class="add-course-btn" (click)="onDeleteCourse()">delete</mat-icon>
+      </button>
 
     </mat-card-actions>
 

src/app/courses/courses-card-list/courses-card-list.component.ts

@@ -35,6 +35,12 @@ export class CoursesCardListComponent implements OnInit {
 
     }
 
+  onDeleteCourse() {
+
+
+
+  }
+
 }