title: Angular 4 Error: Expression has changed after it was checked
body: <p>I am using Angular Material in my Angular 4 app. When I try to use the <code>MatSnackBar</code> in the <code>ngAfterViewInit()</code>, I am facing an error as: </p>
  
  <blockquote>
    <p>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed
    after it was checked. Previous value: 'undefined'. Current value:
    'visible-bottom'.It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?</p>
  </blockquote>
  
  <p>I have used the <code>ChangeDetectorRef</code> to detect the changes, but it doesn't seem to work.</p>
  
  <p>Here's the code I have been working on:  </p>
  
  <pre><code>   constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) { }
  
     ngOnInit() {}
  
     ngAfterViewInit() {
      let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
        duration: 10000
      });
  
      snackBarRef.onAction().subscribe(() =&gt; {
        console.log("Cancelled");
      });
  
  
      this.cdr.detectChanges();
    }
  </code></pre>
  
  <p>Please help me resolve this issue.</p>