Refactored snippet bar into seperate component

src/app/snippets/org-snippet-bar.component.html

@@ -0,0 +1,22 @@
+<div class="card">
+  <div class="card-footer">
+    <ul>
+      <li class="hidden-sm-down">
+        <div class="text-muted">Customers This Month</div>
+        <strong>{{customersThisMonth}}</strong>
+      </li>
+      <li class="hidden-sm-down">
+        <div class="text-muted">Money Spent This Month</div>
+        <strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
+      </li>
+      <li class="hidden-sm-down">
+        <div class="text-muted">Points Total</div>
+        <strong>{{pointsTotal}}</strong>
+      </li>
+      <li class="hidden-sm-down">
+        <div class="text-muted">Average Transaction Today</div>
+        <strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
+      </li>
+    </ul>
+  </div>
+</div>

src/app/snippets/org-snippet-bar.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { OrgSnippetsService } from '../providers/org-snippets.service';
+
+@Component({
+  selector: 'snippet-bar-org',
+  templateUrl: 'org-snippet-bar.component.html',
+})
+export class OrgBarSnippetComponent implements OnInit {
+
+  public customersThisMonth: number;
+  public moneySpentThisMonth: number;
+  public pointsTotal: number;
+  public averageTransactionToday: number;
+
+  constructor(
+    private snippetsService: OrgSnippetsService,
+  ) { }
+
+  public ngOnInit(): void {
+    this.snippetsService.getData()
+      .subscribe(
+        result => {
+          this.customersThisMonth = result.customersthismonth;
+          this.moneySpentThisMonth = result.moneyspentthismonth;
+          this.pointsTotal = result.pointstotal;
+          this.averageTransactionToday = result.averagetransactiontoday;
+        }
+      );
+  }
+}