CODEWITHSUNDEEP
angularangular2-material
Kishore Kumar
Kishore Kumar

Reputation: 21893

Unable to apply visibility in indeterminate mode for progressbar angular2 material

 <md-progress-bar color="warn" mode="indeterminate" [class.hide]="visible"></md-progress-bar>

Angular2 material 2.0.0-beta.1

https://plnkr.co/edit/sHtce9IcdCXuLb8kPhgr?p=preview

I raised an issue in the angular2 material, it was resolved and pushed the changes to master branch. https://github.com/angular/material2/issues/2413 If anybody experiencing the same issue with beta.1 release please use the npm install https://github.com/angular/material2-builds.git to resolve this behavior

Upvotes: 0

Views: 5086

Answers (4)

tdios
tdios

Reputation: 225

use *ngIf

 <mat-progress-bar mode="indeterminate" *ngIf="isHidden"></mat-progress-bar>

Upvotes: 0

hackengineer
hackengineer

Reputation: 11

It seems like ngStyle is the way to go. Verified on Angular 8 

<mat-progress-bar [color]="'warn'"
                  [mode]="'indeterminate'"
                  [ngStyle]="{'visibility':mainFrameLoading==true ? 'visible' : 'hidden'}">
</mat-progress-bar>

Upvotes: 1

IsaacK
IsaacK

Reputation: 1298

You can surround the bar with a div if you don't want to install again. like below

 <div  [hidden]="showLoading">
<md-progress-bar
  mode="indeterminate"
  aria-label="Loading"></md-progress-bar></div>

Upvotes: 3

michali
michali

Reputation: 3862

you can use the [hidden] directive that receives a Boolean value.

for example:

[hidden]="true"

Upvotes: 0

Related Questions