title: How to make Mat-Grid-List columns property dynamic?
body: <p>I want a Mat-Grid-List where I can dynamically change the amount of the "cols" property determined on the width of the box like follows:</p>
  
  <pre><code>&lt;mat-grid-list [cols]="getAttachmentColumns()" rowHeight="100px" style="width: 100%;"&gt;
    &lt;mat-grid-tile *ngFor="let attachment of attachments; let i = index"&gt;
      ...
    &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <pre><code>@ViewChild('attachments', {static: false}) attachments: ElementRef;
  getAttachmentColumns(): number {
    if(this.attachments) {
      let n = Math.floor(this.attachments.nativeElement.clientWidth / 100);
      return (n &gt; 0 ? n : 1);
    } else {
      return 1;
    }
  }
  </code></pre>
  
  <p>With this code I allways get the following warning/error:</p>
  
  <pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'cols: 1'. Current value: 'cols: 5'.
      at viewDebugError (core.js:25491)
      at expressionChangedAfterItHasBeenCheckedError (core.js:25468)
      at checkBindingNoChanges (core.js:25772)
      at checkNoChangesNodeInline (core.js:38548)
      at checkNoChangesNode (core.js:38521)
      at debugCheckNoChangesNode (core.js:39482)
      at debugCheckDirectivesFn (core.js:39379)
      at Object.eval [as updateDirectives] (TicketDetailControlComponent.html:296)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
      at checkNoChangesView (core.js:38354)
  </code></pre>