title: Angular: how resolve the error core.js:6185
body: <p>I don't know what is this error. I work with Angular 9 with sidenav from material.
  I have athis error: 
  core.js:6185 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'margin-left': '165'. Current value: '172'.</p>
  
  <p><a href="https://i.stack.imgur.com/ULFPo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ULFPo.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, ViewChild } from "@angular/core";
  import { Movie } from "src/app/models/movie.model";
  import { MoviesService } from "src/app/services/movies.service";
  import { MatPaginator } from "@angular/material/paginator";
  import { MatTableDataSource } from "@angular/material/table";
  import { MatSnackBar } from "@angular/material/snack-bar";
  import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
  import { DialogComponent } from "src/app/dialog/dialog.component";
  import { MatSort } from "@angular/material/sort";
  
  @Component({
    selector: "app-movie-list",
    templateUrl: "./movie-list.component.html",
    styleUrls: ["./movie-list.component.scss"],
  })
  export class MovieListComponent implements OnInit {
    displayedColumns: string[] = [
      "poster",
      "title",
      "originalTitle",
      "date",
      "vote",
      "remove",
    ];
    movies: Movie[];
    size: number;
  
    dataSource: MatTableDataSource&lt;Movie&gt;;
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
    constructor(
      private moviesService: MoviesService,
      private _snackBar: MatSnackBar,
      public dialog: MatDialog
    ) {}
  
    ngOnInit(): void {
      this.size = 0;
      this.moviesService.getMovies().subscribe((res) =&gt; {
        this.movies = res;
        this.size = this.movies.length;
        this.dataSource = new MatTableDataSource(this.movies);
        this.dataSource.paginator = this.paginator;
      });
    }
  
    openSnackBar(item: string) {
      this._snackBar.open(item, "Close", {
        duration: 3000,
        horizontalPosition: "right",
        verticalPosition: "bottom",
      });
    }
  
    remove(movie: Movie) {
      const isMovie = true;
      const dialogConfig = new MatDialogConfig();
  
      dialogConfig.data = {movie, isMovie};
  
      const dialogRef = this.dialog.open(DialogComponent, dialogConfig);
  
      dialogRef.afterClosed().subscribe((data) =&gt; {
        if (data === true) {
          this.moviesService.deleteMovie(movie.id).subscribe();
          this.dataSource.data.splice(this.movies.indexOf(movie), 1);
          this.dataSource = new MatTableDataSource&lt;Movie&gt;(this.dataSource.data);
          this.dataSource.paginator = this.paginator;
          this.size--;
          this.openSnackBar("Movie removed !");
        }
      });
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    width: 100%;
    margin-top: 62px;
  }
  
  img {
    height: 140px;
    width: 100px;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  .update {
    color: grey;
  }
  
  .notifications {
    text-align: center;
  padding-top: 100px;
  margin-left: 10px;
  margin-right: 10px;
  }
  
  .example-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-sidenav-container class="example-container"&gt;
    &lt;mat-sidenav mode="side" opened&gt;
      &lt;div class="notifications"&gt;
        &lt;h3&gt;Movies List&lt;/h3&gt;
        &lt;h4 class="number"&gt;&lt;span class="badge badge-primary"&gt;Total movies : {{ size }} &lt;/span&gt;&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;div class="mat-elevation-z8"&gt;
        &lt;table mat-table [dataSource]="dataSource"&gt;
      
          &lt;ng-container matColumnDef="poster"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Poster&lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt;
              &lt;div *ngIf="element.poster_path; else noPoster"&gt;
                &lt;img src="https://image.tmdb.org/t/p/w200/{{element.poster_path}}" alt="..."&gt;
              &lt;/div&gt;
              &lt;ng-template #noPoster&gt;
                &lt;img src="../../assets/not_found.jpg" alt="..."&gt;
              &lt;/ng-template&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;ng-container matColumnDef="title"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; French title &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.title}} &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;ng-container matColumnDef="originalTitle"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Original title &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.original_title}} &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;ng-container matColumnDef="date"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Release date &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.release_date | date: 'dd MMMM, y'}} &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;ng-container matColumnDef="vote"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Vote &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.vote_average}} &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;ng-container matColumnDef="remove"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Remove &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt;
              &lt;button mat-icon-button color="warn" (click)="remove(element)"&gt;
                &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
        &lt;/table&gt;
      
        &lt;mat-paginator [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
      &lt;/div&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you have some idea to resolve I will be happy.
  Thanks</p>