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;
}

Do you have any output in console ? Can you give us your material version ? There was some changes with prefixes for their components. — Patryk Brejdak
– Patryk Brejdak, Commented Nov 7, 2017 at 9:52
some of the other material components like radio button,checkbox etc are visible as output.but progress bar is not. — susane
– susane, Commented Nov 7, 2017 at 10:11
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. — Patryk Brejdak
– Patryk Brejdak, Commented Nov 7, 2017 at 10:13

Patryk Brejdak · Accepted Answer · 2017-11-07 09:56:30Z

4

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],

answered Nov 7, 2017 at 9:56

Patryk Brejdak

1,60115 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

susane Over a year ago

it is added but no result

Pavel Vlasov Over a year ago

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

CodeMan03 · Accepted Answer · 2018-03-23 20:41:57Z

2

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

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

answered Mar 23, 2018 at 20:41

CodeMan03

2474 gold badges25 silver badges51 bronze badges

Comments

Mohamad Mousheimish · Accepted Answer · 2021-07-05 14:56:29Z

2

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

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

edited Jul 5, 2021 at 14:56

Mohamad Mousheimish

1,7234 gold badges19 silver badges55 bronze badges

answered Jul 5, 2021 at 6:18

clement anto

213 bronze badges

1 Comment

CodeMan03 Over a year ago

Yep that was it noopanimations

Anup Sharma · Accepted Answer · 2019-07-31 12:40:16Z

1

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.

answered Jul 31, 2019 at 12:40

Anup Sharma

2,10322 silver badges32 bronze badges

Comments

F.Almeida · Accepted Answer · 2017-12-21 11:34:58Z

0

Maybe I'm too late for this but since the last angular material update the import changed to:

import { MatProgressBarModule } from '@angular/material/progress-bar';

Hope this helps.

answered Dec 21, 2017 at 11:34

F.Almeida

4132 silver badges13 bronze badges

Comments

amthekkel · Accepted Answer · 2018-06-04 17:52:22Z

0

Possibly you need the BrowserAnimationsModule to be imported in your app. Check out the link https://material.angular.io/guide/getting-started on how to get it installed. As per your example, also try setting the section with class example-section to have 100% width. Hope that helps.

answered Jun 4, 2018 at 17:52

amthekkel

411 silver badge5 bronze badges

Comments

Darrow Hartman · Accepted Answer · 2021-02-17 22:08:32Z

0

My problem was that the progress bar div had 0 width and height. Wrap the progress tag around a div and give it a class of progress-div. Then add this code to your css:

.progress-div{
    height: auto;
    width: auto;
}

answered Feb 17, 2021 at 22:08

Darrow Hartman

4,3833 gold badges25 silver badges42 bronze badges

Comments

Jefferson · Accepted Answer · 2023-04-05 14:58:09Z

0

I had to target the overflow of the progress bar, it was set to "hidden"

    mat-progress-bar.mat-mdc-progress-bar{
        overflow:visible;
    }

edited Apr 5, 2023 at 14:58

answered Apr 5, 2023 at 14:57

Jefferson

217 bronze badges

Collectives™ on Stack Overflow

Angular Material progress bar not showing in web page

8 Answers 8

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related