CODEWITHSUNDEEP
angularangular-materialprogress-bar
Musaffar Patel
Musaffar Patel

Reputation: 1342

Angular Material Progress bar always showing 100%

I've ran into a strange problem with the Material Progress bar in Angular 10. The progress bar shows at 100% even after settings it's value to something less:

Code is very simple in my component.html:

<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

And it renders ok, but shows at 100%

I can't see what I could be possibly doing wrong here.

Below is the content of my component file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

in my app.module.ts file I am importing Material UI as follows:

import { MaterialModule } from './modules/material.module';

and the content of ./modules/material.module.ts is as follows:

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

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';

const modules = [
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatSnackBarModule,
    MatProgressBarModule
];

@NgModule({
    imports: modules,
    exports: modules,
})

export class MaterialModule { }

All other material modules work as expected, and as mentioned, the progress bar does render but it doesn't seem to take notice of the "value" attribute

Upvotes: 2

Views: 1849

Answers (1)

natedog0925
natedog0925

Reputation: 112

I know this has been open for a little bit but I just ran across the same issue and it was driving me crazy. In my case I had defined a custom theme for material and only defined one color. So while the progress bar always looked to be 100%, at least in my case, it was because it was all the same color. Once I defined some lighter colors it worked as expected.

Upvotes: 5

Related Questions