Angular Material progress bar not showing in web page

Question

I am working on Angular 4 framework. I wanted to add a material progress bar to my app's homepage. I followed the official guide for Angular Material environment set up.

After that I added the code for progress bar in .html file and compiled. It is not been updated on the web page. How can I resolve this?

The HTML code is:

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Progress bar configuration</h2>

    <section class="example-section">
      <label class="example-margin">Color:</label>
      <mat-radio-group [(ngModel)]="color">
        <mat-radio-button class="example-margin" value="primary">
          Primary
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="accent">
          Accent
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="warn">
          Warn
        </mat-radio-button>
      </mat-radio-group>
    </section>

    <section class="example-section">
      <label class="example-margin">Mode:</label>
      <mat-radio-group [(ngModel)]="mode">
        <mat-radio-button class="example-margin" value="determinate">
          Determinate
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="indeterminate">
          Indeterminate
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="buffer">
          Buffer
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="query">
          Query
        </mat-radio-button>
      </mat-radio-group>
    </section>

    <section class="example-section" *ngIf="mode == 'determinate' || mode == 'buffer'">
      <label class="example-margin">Progress:</label>
      <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
    </section>
    <section class="example-section" *ngIf="mode == 'buffer'">
      <label class="example-margin">Buffer:</label>
      <mat-slider class="example-margin" [(ngModel)]="bufferValue"></mat-slider>
    </section>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Result</h2>

    <section class="example-section">
      <mat-progress-bar
          class="example-margin"
          [color]="color"
          [mode]="mode"
          [value]="value"
          [bufferValue]="bufferValue">
      </mat-progress-bar>
    </section>
  </mat-card-content>
</mat-card>

and the corresponding component.ts file code is

@NgModule({

  imports: [MatButtonModule, MatCheckboxModule],

})
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent  {
  color = 'primary';
  mode = 'determinate';
  value = 50;
  bufferValue = 75;
}

Solution 1

As far as I can there is missing imports. You have to add this to your @NgModule

import {MatProgressBarModule} from '@angular/material';

and in @NgModule

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

Solution 2

You have to add this or any prebuilt theme to your css file

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Solution 3

In case you've imported the following module, try to remove it

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

Solution 4

I had a strange problem. My container(div) was displayed as flex and that was somehow rendering the progress bar having 0 height even though I had the height set to 4px. I have no idea as to how and why it happened. So I wrapped the progress bar in another container (div with default display) and the progress bar started showing up.

View more solutions

Comments

[Patryk Brejdak]

Do you have any output in console ? Can you give us your material version ? There was some changes with prefixes for their components.

[susane]

no output in dashboard.nothing is visible.

[susane]

@angular/material": "^2.0.0-beta.12

[susane]

some of the other material components like radio button,checkbox etc are visible as output.but progress bar is not.

[Patryk Brejdak]

Check in browser inspector. (for example in chrome in DevTools there is tab elements) if mat-progress-bar is generated in html file, also check my answer, maybe there is problem with imports.

[susane]

this is what i get in elements <mat-menu _ngcontent-c1="" class="ng-tns-c1-0 ng-tns-c3-1" xposition="before" ng-reflect-x-position="before" ng-reflect-overlap-trigger="false"><!----></mat-menu>

[susane]

i have added the imports

[halfer]

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

[susane]

ok .i didnt know that .

[susane]

it is added but no result

[Pavel Vlasov]

Thx. Why this magic is missed from the official getting started tutorial?!

[CodeMan03]

Yep that was it noopanimations