Search code examples
cssangularangular2-templateangular2-directivesangular2-styleguide

Styling loading state before Angular2 app starts not working?

In my index.html, I want to show users a loading state before Angular2 app starts/ bootstraps.

<my-app>
    <div class="sk-cubes">
      <div class="sk-cube1"></div>
      <div class="sk-cube2"></div>
    </div>
  </my-app>

I am trying to give styles in a style sheet named loading-state.css and including it in index.html but somehow it is not taking styles from this file. However, I am getting expected behaviour when giving styles in tag in header or inline styles. Did I miss out on something?

Solution

  • I assume loading-state.css reference has been given in head tag of index.html page

    In myapp component, set ViewEncapsulation to none.

    import {ViewEncapsulation} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'myapp',

  encapsulation: ViewEncapsulation.None   // <<<=====here

})
class MyAppComponent {

}