fix(progress-bar): avoid ExpressionChangedAfterItHasBeenCheckedError …

src/components-examples/material/progress-bar/index.ts

@@ -4,3 +4,4 @@ export {ProgressBarDeterminateExample} from './progress-bar-determinate/progress
 export {ProgressBarIndeterminateExample} from './progress-bar-indeterminate/progress-bar-indeterminate-example';
 export {ProgressBarQueryExample} from './progress-bar-query/progress-bar-query-example';
 export {ProgressBarHarnessExample} from './progress-bar-harness/progress-bar-harness-example';
+export {ProgressBarExpressionFixExample} from './progress-bar-expression-fix/progress-bar-expression-fix-example'

src/components-examples/material/progress-bar/progress-bar-expression-fix/progress-bar-expression-fix-example.html

@@ -0,0 +1 @@
+<mat-progress-bar [mode]="mode" [value]="value"></mat-progress-bar>

src/components-examples/material/progress-bar/progress-bar-expression-fix/progress-bar-expression-fix-example.ts

@@ -0,0 +1,19 @@
+import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+  selector: 'progress-bar-expression-fix-example',
+  templateUrl: './progress-bar-expression-fix-example.html',
+})
+export class ProgressBarExpressionFixExample implements AfterViewInit {
+  mode: 'determinate' | 'indeterminate' = 'determinate';
+  value = 50;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.mode = 'indeterminate';
+      this.cdr.detectChanges(); // Fix Bug ExpressionChangedAfterItHasBeenCheckedError
+    });
+  }
+}