Hooked up the quotes to firestore

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="w-100">
     <div class="container d-flex align-items-center" style="height: 600px">
         <div class="w-100 text-center">
-            <typewriter [text]="quote"></typewriter>
+            <typewriter [text]="quote | async"></typewriter>
         </div>
     </div>
     <div class="container mb-md-5 p-0 bg-white">

src/app/app.component.ts

@@ -1,17 +1,19 @@
 import { Component } from '@angular/core';
+import {AppStore} from './app.store';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  quote: string;
+  quote: Observable<string>;
-  quotes = [
-    'Why do Kamikaze pilots wear helmets?',
-    'Remember that you\'re unique... Just like everyone else'
-  ];
 
-  constructor() {
+  constructor(private store: AppStore) {
-    this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)]
+    this.quote = store.quotes.pipe(map(quotes => {
+        let quote = quotes[Math.floor(Math.random() * quotes.length)];
+        return quote.text;
+    }))
   }
 }

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {AngularFireModule} from '@angular/fire';
-import {AngularFirestoreModule} from '@angular/fire/firestore';
+import {AngularFirestoreModule, FirestoreSettingsToken} from '@angular/fire/firestore';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -25,7 +25,9 @@ import {environment} from '../environments/environment';
         FormsModule,
         MaterialModule
     ],
-    providers: [],
+    providers: [
+        { provide: FirestoreSettingsToken, useValue: {} }
+    ],
     bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.store.ts

@@ -0,0 +1,15 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {AngularFirestore} from '@angular/fire/firestore';
+import {Quote} from './models/quote';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppStore {
+    quotes: Observable<Quote[]>;
+
+    constructor(private firestore: AngularFirestore) {
+        this.quotes = this.firestore.collection<Quote>('quotes').valueChanges();
+    }
+}

src/app/components/slideShow/slideShow.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {Slide} from './slide';
+import {Slide} from '../../models/slide';
 
 @Component({
   selector: 'slideshow',

src/app/models/quote.ts

@@ -0,0 +1,3 @@
+export interface Quote {
+    text: string;
+}