Firebase & AngularFire In Depth

Author: Your Name

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

@@ -18,16 +18,20 @@
       VIEW COURSE
     </button>
 
-    <ng-container>
-      <ng-container>
-        <button mat-button class="mat-raised-button mat-accent"
-                (click)="editCourse(course)">
-          EDIT
-        </button>
-        <button mat-mini-fab color="warn" (click)="onDeleteCourse(course)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </ng-container>
+    <ng-container *ngIf="(user.roles$ | async) as roles">
+
+        <ng-container *ngIf="roles.admin">
+
+            <button mat-button class="mat-raised-button mat-accent"
+                    (click)="editCourse(course)">
+                EDIT
+            </button>
+            <button mat-mini-fab color="warn" (click)="onDeleteCourse(course)">
+                <mat-icon>delete</mat-icon>
+            </button>
+
+        </ng-container>
+
     </ng-container>
 
   </mat-card-actions>

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

@@ -6,6 +6,7 @@ import {catchError, tap} from 'rxjs/operators';
 import {throwError} from 'rxjs';
 import {Router} from '@angular/router';
 import {CoursesService} from "../services/courses.service";
+import {UserService} from "../services/user.service";
 
 @Component({
     selector: 'courses-card-list',
@@ -26,7 +27,8 @@ export class CoursesCardListComponent implements OnInit {
     constructor(
       private dialog: MatDialog,
       private router: Router,
-      private coursesService:CoursesService) {
+      private coursesService:CoursesService,
+      public user: UserService) {
     }
 
     ngOnInit() {

src/app/home/home.component.html

@@ -5,9 +5,19 @@
 
         <h2 class="title">All Courses</h2>
 
-        <button mat-mini-fab color="accent" routerLink="/create-course">
-            <mat-icon class="add-course-btn">add</mat-icon>
-        </button>
+        <ng-container *ngIf="(user.roles$ | async) as roles">
+
+            <ng-container *ngIf="roles.admin">
+
+                <button mat-mini-fab color="accent" routerLink="/create-course">
+                    <mat-icon class="add-course-btn">add</mat-icon>
+                </button>
+
+            </ng-container>
+
+        </ng-container>
+
+
 
     </div>
 

src/app/home/home.component.ts

@@ -5,6 +5,7 @@ import {catchError, map} from 'rxjs/operators';
 import {AngularFirestore} from '@angular/fire/firestore';
 import {Router} from '@angular/router';
 import {CoursesService} from "../services/courses.service";
+import {UserService} from "../services/user.service";
 
 
 @Component({
@@ -20,7 +21,8 @@ export class HomeComponent implements OnInit {
 
     constructor(
       private router: Router,
-      private coursesService: CoursesService) {
+      private coursesService: CoursesService,
+      public user: UserService) {
 
     }