material progress bar doesn't work with *ngIf

Question

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?

Answer 1

add this into your component and try

constructor( private cdr: ChangeDetectorRef){
}

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

Answer 2

Try this

In your component when you are defining the ngModel

 export class yourTsclassname { isScanning:any=false; constructor(private http: Http) { }