Ivy true, error matRowDef/matColumnDef

[GlauberF]

Expected Behavior

I created a tables component of the material, where he receives an object to extract the ids of columns and assemble the array, but there are some checks I do, see the image below

Actual Behavior

If I do not have ivy active, after deploy it works 100%, if I activate returns the error of the image below

Environment

Angular CLI: 8.3.8
Node: 10.15.3
OS: linux x64
Angular: 9.0.0-next.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.8
@angular-devkit/build-angular              0.803.8
@angular-devkit/build-optimizer            0.803.8
@angular-devkit/build-webpack              0.803.8
@angular-devkit/core                       8.3.8
@angular-devkit/schematics                 8.3.8
@angular/cdk                               8.2.2
@angular/cli                               8.3.8
@angular/flex-layout                       8.0.0-beta.27
@angular/material                          8.2.2
@angular/material-moment-adapter           8.2.2
@ngtools/webpack                           8.3.8
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.3.8
@schematics/update                         0.803.8
rxjs                                       6.5.3
typescript                                 3.5.3
webpack                                    4.39.2

[crisbeto]

Does the error go away if you remove the ng-container with ngIf="tb.key === 'checkbox'"?

[GlauberF]

@crisbeto I commented but the error continues

[surajtambe]

@GlauberF Solution for above is to take checkbox outside of *ngfor , it will work as expected. I have implemented in similar way for adding checkbox for MatTable. No *ngIf for checkbox then, if checkbox present in columns it will render.

[GlauberF]

@surajtambe
I believe this does not work for me, because in the image above you can see that I commented the checkbox and still the error continues.

[surajtambe]

@GlauberF

<ng-container matColumnDef="checkbox">
          <mat-header-cell *matHeaderCellDef >
            <mat-checkbox
              color="primary"
              (change)="$event ? selectAll() : null"
              [checked]="selection.hasValue() && allSelected()"
              [indeterminate]="selection.hasValue() && !allSelected()"
            >
            </mat-checkbox>
          </mat-header-cell>
          <mat-cell *matCellDef="let row"  fxHide fxShow.gt-sm>
            <mat-checkbox
              color="primary"
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)"
            >
            </mat-checkbox>
          </mat-cell>
        </ng-container>
        <ng-container *ngFor="let col of columns" [matColumnDef]="col.prop">

above works for me with Ivy Enabled.
as checkbox column is commented it will throw error. for sure as column array contains checkbox column and template for same is not defined.
Please try above if doesn't work , Please share any stackblitz example, will be easy to understand issue.

[DutchKevv]

@GlauberF

<ng-container matColumnDef="checkbox">
          <mat-header-cell *matHeaderCellDef >
            <mat-checkbox
              color="primary"
              (change)="$event ? selectAll() : null"
              [checked]="selection.hasValue() && allSelected()"
              [indeterminate]="selection.hasValue() && !allSelected()"
            >
            </mat-checkbox>
          </mat-header-cell>
          <mat-cell *matCellDef="let row"  fxHide fxShow.gt-sm>
            <mat-checkbox
              color="primary"
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)"
            >
            </mat-checkbox>
          </mat-cell>
        </ng-container>
        <ng-container *ngFor="let col of columns" [matColumnDef]="col.prop">

above works for me with Ivy Enabled.
as checkbox column is commented it will throw error. for sure as column array contains checkbox column and template for same is not defined.
Please try above if doesn't work , Please share any stackblitz example, will be easy to understand issue.

@GlauberF

what version(s) are you on?? I'm getting errors with angular 9 (ivy) when using flexLayout

No value exists in scope for the shorthand property 'fxShow'. Either declare one or provide an initializer.

any tips? Thanks!

[surajtambe]

@DutchKevv Issue related to flexLayout is introduced in angular 9.0.0-next.10, for 9.0.0-next.9 works fine. Its related to strictNullInputBindings

/**

• Whether to use strict null types for input bindings for directives.
• If this is true, applications that are compiled with TypeScript's strictNullChecks enabled
• will produce type errors for bindings which can evaluate to undefined or null where the
• inputs's type does not include undefined or null in its type. If set to false, all
• binding expressions are wrapped in a non-null assertion operator to effectively disable strict
• null checks. This may be particularly useful when the directive is from a library that is not
• compiled with strictNullChecks enabled.
  */
  strictNullInputBindings: boolean;

Waiting for Angular 9 to release as angular/flex-layout Team is going to perform changes/fixes after Angular 9 release only if no blocker for Angular 8. Once Angular 9 out angular/flex-layout team may provide support with strictNullChecks: true

[DutchKevv]

@surajtambe

angular/flex-layout team may provide support with strictNullChecks: true

Thanks for heads up, will try

[GlauberF]

@surajtambe In my scenario, I can not leave externally, because if I look at the issue image, inside the checkbox column, I use other information that I get with ngFor.
The solution is @crisbeto pul request

Even taking the checkbox out of ngFor, it will give error with the next field.

[surajtambe]

@surajtambe In my scenario, I can not leave externally, because if I look at the issue image, inside the checkbox column, I use other information that I get with ngFor.
The solution is @crisbeto pul request

Even taking the checkbox out of ngFor, it will give error with the next field.

Thank you for trying out.