Header / Footer editor added - Right now linked to products permission, which should be changed

bookie/src/app/header-footer/header-footer.component.html

@@ -0,0 +1,45 @@
+<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
+  <mat-card fxFlex>
+    <mat-card-title-group>
+      <mat-card-title>Header / Footer</mat-card-title>
+    </mat-card-title-group>
+    <mat-card-content>
+      <form [formGroup]="form" fxLayout="column">
+        <div
+          fxLayout="row"
+          fxLayoutAlign="space-around start"
+          fxLayout.lt-md="column"
+          fxLayoutGap="20px"
+          fxLayoutGap.lt-md="0px"
+        >
+          <mat-form-field fxFlex>
+            <mat-label>Header / Footer</mat-label>
+            <mat-select
+              placeholder="Header / Footer"
+              formControlName="id"
+              (selectionChange)="show($event)"
+            >
+              <mat-option *ngFor="let s of list" [value]="s.id">
+                {{ s.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <mat-form-field>
+          <mat-label>Text</mat-label>
+          <textarea
+            matInput
+            matAutosizeMinRows="5"
+            placeholder="Text"
+            formControlName="text"
+          ></textarea>
+        </mat-form-field>
+
+        <mat-divider></mat-divider>
+      </form>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-raised-button color="primary" (click)="save()">Save</button>
+    </mat-card-actions>
+  </mat-card>
+</div>