Asthetics

src/app/store/categories.component.html

@@ -1,7 +1,15 @@
 <div class="container-fluid" style="background-color: #53709f;">
     <div class="container">
         <div class="row py-5">
-            <button mat-raised-button color="primary" (click)="create()">Create</button>
+            <div class="ml-auto mr-3 mb-3">
+                <button *ngIf="app.user" mat-raised-button (click)="create()">
+                    <mat-icon>playlist_add</mat-icon> Category
+                </button>
+                <button *ngIf="app.user" mat-raised-button class="ml-3">
+                    <mat-icon>note_add</mat-icon> Item
+                </button>
+            </div>
+
             <nav class="w-100 mx-3" aria-label="breadcrumb">
                 <ol class="breadcrumb">
                     <li class="breadcrumb-item curs-pointer" [routerLink]="['/store']" (click)="breadcrumb.clear()">Store</li>

src/app/store/categories.component.ts

@@ -6,6 +6,7 @@ import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
 import {BreadcrumbService} from './breadcrumb.service';
 import {MatDialog} from '../../../node_modules/@angular/material';
 import {NewCategoryComponent} from './newCategory/newCategory.component';
+import {AppComponent} from '../app.component';
 
 @Component({
   selector: 'store',
@@ -20,6 +21,7 @@ export class CategoriesComponent {
     private router: Router,
     private route: ActivatedRoute,
     private dialog: MatDialog,
+    public app: AppComponent,
     public breadcrumb: BreadcrumbService
   ) {}
 

src/app/store/newCategory/newCategory.component.html

@@ -1,5 +1,7 @@
 <mat-dialog-content>
-    <h3 mat-dialog-title>Create/Update Category</h3>
+    <h3 mat-dialog-title>
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span> Category</h3>
     <form id="createForm">
         <mat-form-field class="w-100">
             <input matInput placeholder="Name" name="name" [(ngModel)]="name">
@@ -17,5 +19,8 @@
         <span *ngIf="!image">Add Image</span>
         <mat-icon *ngIf="image">check</mat-icon>
     </button>
-    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">Create/Update</button>
+    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span>
+    </button>
 </mat-dialog-actions>

src/app/store/newCategory/newCategory.component.ts

@@ -15,8 +15,8 @@ export class NewCategoryComponent {
 
   constructor(
     private dialogRef: MatDialogRef<NewCategoryComponent>,
-    @Inject(MAT_DIALOG_DATA) private data,
-    private db: AngularFirestore
+    private db: AngularFirestore,
+    @Inject(MAT_DIALOG_DATA) public data
   ) {}
 
   imageChanged() {