title: Listen to a service property inside of index.html
body: <p>On every reload I'm fetching data from the database. To prevent user's from seeing the app without the data being loaded, I have a promise with a resolve.</p>
  
  <p>What I want is an animation to be executed right before it's being resolved - my approach is to change a property inside of the <code>AppInitService</code> and as soon it's f.e. true, the angular browser animation shall be executed.</p>
  
  <p>The animations takes place in index.html inside of <code>&lt;app-root&gt;...&lt;/app-root&gt;</code>, since its content is being displayed on app init. <strong>How do I listen (subscribe) to the <code>AppInitService</code>'s property inside of index.html?</strong> Is there a .ts file allocated to index.html?</p>
  
  <p>Is there a different approach? </p>
  
  <p><br><br>
  AppInitService:</p>
  
  <pre><code>Init(): Promise&lt;any&gt; {
  return new Promise((resolve) =&gt; {
    this.db.collection('entries').valueChanges()
      .subscribe(val =&gt; {
        this.casesService.data = val;
        resolve(true);
      });
  });}
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>export function initializeApp1(appInitService: AppInitService) {
    return (): Promise&lt;any&gt; =&gt; {
      return appInitService.Init();
    };
  }
  
  providers: [
     AppInitService,
     { provide: APP_INITIALIZER, useFactory: initializeApp1, deps: [AppInitService], multi: true }
  ],
  </code></pre>