mat-grid-list with dynamic column count and ssr initial page load

[goelinsights]

Bug, feature request, or proposal:

Not sure: it's an error I'm struggling to debug. Hoping I'm missing something obvious

What is the expected behavior?

mat-grid-list compiles with Angular Universal

What is the current behavior?

Receiving the following error on initial page load on the route, which crashes the app... (but if I load the app on a page without the grid and then navigate to the page it works fine)

ERROR Error: mat-grid-list: must pass in number of columns. Example:
at Error (native)
at MatGridList._checkCols (/Users/vijay/ng2_projects/ng-bite-ssr/dist/server.js:136175:19)
at MatGridList.ngOnInit (/Users/vijay/ng2_projects/ng-bite-ssr/dist/server.js:136145:14)
at checkAndUpdateDirectiveInline (/Users/vijay/ng2_projects/ng-bite-ssr/dist/server.js:12846:19)
at checkAndUpdateNodeInline (/Users/vijay/ng2_projects/ng-bite-ssr/dist/server.js:14370:20)
at checkAndUpdateNode (/Users/vijay/ng2_projects/ng-bite-ssr/dist/server.js:14313:16)
at prodCheckAndUpdateNode (/Users/vijay/ng2_projects/ng-bite-ssr/dist/server.js:15037:5)

What are the steps to reproduce?

1. Start with Angular Universal Starter
2. Add Material Module and add MatGridList to a component
3. use a function to define the # of columns, e.g.,

<mat-grid-list [cols]="calcGridColumns(mediaSize)"> ... </mat-grid-list>
  
...
calcGridColumns(size) {
    switch (size) {
      case 'xl': return 8;
      case 'lg': return 8;
      case 'md': return 6;
      case 'sm': return 4;
      case 'xs': return 3;
      default: return 3;
    }
  }

4. Use build steps defined in Step 5 of angular cli story on universal https://github.com/angular/angular-cli/wiki/stories-universal-rendering

What is the use-case or motivation for changing an existing behavior?

App compiles using universal

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/common": "5.2.2",
"@angular/material": "5.0.4",

Is there anything else we should know?

Looks like I'm triggering this code:

https://github.com/angular/material2/blob/master/src/lib/grid-list/grid-list.ts
/** Throw a friendly error if cols property is missing */
  private _checkCols() {
    if (!this.cols) {
      throw Error(`mat-grid-list: must pass in number of columns. ` +
                  `Example: <mat-grid-list cols="3">`);
    }
  }

I think this means that with SSR, [cols]="function(value)" = undefined despite the default value in the switch statement. Trying to understand why thats the case and how to fix.

[goelinsights]

Figured it out. Leaving it here if it's useful for anyone else struggling with SSR/ Universal transition from standard.

Apparently with SSR the checkCols() function throws an error earlier than the size is injected into the component (it's an observable coming from the store detected via ObservableMedia in the app.component). In a normal static process, this works fine, but the server apparently doesn't like it.

[michaeljota]

Did you manage to solve it? I think this can be trigger even in JIT mode. I'm having this exact problem, the value of the columns resolves in an observable and the object does not resolve in enough time.

I think this component should allow someway to input cols property in async mode.

Workaround:

For anyone this may help, you can set a default property with the || (or) operator.

  <mat-grid-list [cols]="(asyncValue | async) || 1">

This will resolve to 1 in the first load, and until the asyncValue gets resolved.

Also, you could set element with a *ngIf statement to load it only after the asyncValue gets resolved.

  <mat-grid-list *ngIf="(asyncValue | async)" [cols]="(asyncValue | async)">

This way, you asure that asyncValue have a valid value before the element is created. (Cause *ngIf only creates the element after the condition have been met.

[xanscale]

a simpler Workaround is to create a class variable with a default value and ObservableMedia to change their value

[ben-wall]

ts

import { Component } from '@angular/core'
import { map } from 'rxjs/operators'
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'
import { Subject } from 'rxjs/Subject'
import { Observable } from 'rxjs/internal/Observable'
import { Subscription } from 'rxjs/Subscription'

const handsetCards = [
  { title: 'Card 1', cols: 1, rows: 1 },
  { title: 'Card 2', cols: 1, rows: 1 },
  { title: 'Card 3', cols: 1, rows: 1 },
  { title: 'Card 4', cols: 1, rows: 1 }
]
const desktopCards = [
  { title: 'Card 1', cols: 2, rows: 1 },
  { title: 'Card 2', cols: 1, rows: 1 },
  { title: 'Card 3', cols: 1, rows: 2 },
  { title: 'Card 4', cols: 1, rows: 1 }
]

@Component({
  selector: 'app-client-overview-dashboard',
  templateUrl: './client-overview-dashboard.component.html',
  styleUrls: ['./client-overview-dashboard.component.sass']
})
export class ClientOverviewDashboardComponent {
  colsSubject: Subject<any> = new Subject<any>()
  colsSub: Subscription
  cols$: Observable<any[]>

  cardsSubject: Subject<any> = new Subject<any>()
  cardsSub: Subscription
  cards$: Observable<number>

  constructor(private breakpointObserver: BreakpointObserver) {
    this.colsSub = this.colsSubject
      .subscribe((data) => {
        this.cols$ = data
      })
    this.cardsSub = this.cardsSubject
      .subscribe((data) => {
        console.log(data)
        this.cards$ = data
      })
    /** Based on the screen size, switch from standard to one column per row */
    breakpointObserver.observe(Breakpoints.Handset)
      .subscribe((data) => {
        console.log('changed', data.matches)
        if (data.matches) {
          this.colsSubject.next(1)
          this.cardsSubject.next(handsetCards)
        } else {
          this.colsSubject.next(2)
          this.cardsSubject.next(desktopCards)
        }
      })
  }
}

html

<div class="grid-container">
  <h1 class="mat-h1">Dashboard</h1>
  <mat-grid-list [cols]="cols$" rowHeight="350px" *ngIf="cards$">
    <mat-grid-tile *ngFor="let card of cards$" [colspan]="card.cols" [rowspan]="card.rows">

      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item>Expand</button>
              <button mat-menu-item>Remove</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div>Card Content Here</div>
        </mat-card-content>
      </mat-card>

    </mat-grid-tile>
  </mat-grid-list>
</div>

This seems to work quite nicely - I could't get the async pipe working as it seems that the template subscribes with async after the breakpoint observer receives it's first change so the cols$ remained at null on first load.
using
(cols$ | async) || 2 was not viable since on mobile the cols initialize as 2 and stay there

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}