angular2 material “progress circle”

Question

If we using angular-cli and put in all the angular material 2 inside it and working fine, how do we add for an example progress circle to the index.html

  <app-root>
    <md-spinner>Loading..</md-spinner>
  </app-root>

in this loading text so that we can see circle loading instead of plain text

i allready try import that to app-root component.ts like this

import { Component } from '@angular/core';
import {MD_PROGRESS_CIRCLE_DIRECTIVES} from '@angular2-material/progress-circle';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives:[MD_PROGRESS_CIRCLE_DIRECTIVES]
})
export class AppComponent {
  title = 'app works!';
}

any idea how to make it works in index.html?

Answer 1

In order to make it run, add these two statements to your systemjs.config.js file:

@angular2-material/progress-circle': 'node_modules/@angular2-material/progress-circle,

node_modules/@angular2-material/progress-circle': { main: 'progress-circle.js', defaultExtension: 'js' },

You can see the position of these statements in this image: systemjs.config.js file

Of course, you need to first have installed the module using npm:

npm i @angular2-material/progress-circle

Hope this helps :)

Answer 2

Don't think that is possible since the "Loading..." is what is going to be displayed until Angular loads. So you can't really have an Angular thing showing that Angular loads.

There is this example that seems to have a "pre-loader" div on it taht looks like it is doing what you are trying to accomplish. You can look into their source for more information here