CODEWITHSUNDEEP
angularangular-material2
M.Ramzan
M.Ramzan

Reputation: 317

material progress bar doesn't work with *ngIf

I want to display a progress bar for processing event, So I used the material progress bar with angular condition *ngIf. It's not showing at first when I click a button to process the event but when I refresh the browser it shows.

HTML

<button type="button" class="btn btn-danger pull-right"
   (click)="scan()">CLICK
</button>

<div *ngIf="isScanning" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

ts file

scan() {
        this.isScanning = true;
    }

The problem I have is progress bar is working but it's not working with the *ngIf but if I reload the page after I press the button the progress bar is showing. I couldn't figure out what is happing here. Any help?

Upvotes: 0

Views: 1669

Answers (2)

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7252

add this into your component and try 

constructor( private cdr: ChangeDetectorRef){
}

scan() {
        this.isScanning = true;
       this.cdr.detectChanges();
    }

Upvotes: 2

Shyamal
Shyamal

Reputation: 161

Try this

In your component when you are defining the ngModel

export class yourTsclassname {
   
isScanning:any=false;

    constructor(private http: Http) { }

Upvotes: 0

Related Questions