MatButtonToggle errors with Ivy enabled

[bampakoa]

The MatButtonToggle component throws several errors in ng serve with Ivy compiler enabled.

Reproduction

Not able to reproduct with Stackblitz

Expected Behavior

ng serve should not throw any errors

Actual Behavior

ng serve throws the following errors:

{
  message: "Cannot read property 'selected' of undefined",
  name: 'TypeError',
  stack:
   "TypeError: Cannot read property 'selected' of undefined
      at MatButtonToggleGroup.get selected [as selected]
      at MatButtonToggleGroup._syncButtonToggle
      at MatButtonToggle.set checked [as checked]
      at setInputsFromAttrs
      at postProcessDirective
      at instantiateAllDirectives 
      at createDirectivesAndLocals
      at ɵɵelementStart"
}

{
  message: "Cannot read property 'buttonId' of null",
  name: 'TypeError',
  stack:
   "TypeError: Cannot read property 'buttonId' of null
      at MatButtonToggle_Template
      at executeTemplate
      at checkView
      at componentRefresh
      at refreshChildComponents
      at refreshDescendantViews
      at renderEmbeddedTemplate
      at refreshDynamicEmbeddedViews 
      at refreshDescendantViews
      at checkView"
}

Environment

Angular CLI: 8.1.0
Node: 10.15.3
OS: win32 x64
Angular: 8.2.0-next.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.801.0
@angular-devkit/build-angular 0.801.0
@angular-devkit/build-optimizer 0.801.0
@angular-devkit/build-webpack 0.801.0
@angular-devkit/core 8.1.0
@angular-devkit/schematics 8.1.0
@angular/cdk 8.0.2
@angular/cli 8.1.0
@angular/material 8.0.2
@ngtools/webpack 8.1.0
@schematics/angular 8.1.0
@schematics/update 0.801.0
rxjs 6.5.2
typescript 3.4.5
webpack 4.35.2

[crisbeto]

Can you post what your template looks like? Otherwise it's difficult to investigate.

[bampakoa]

@crisbeto thanks very much for your prompt reply. Here is my template. Not something complicated:

  <mat-drawer mode="side" opened>
      <mat-button-toggle-group vertical>
        <mat-button-toggle checked="true" title="Layers" routerLink="/dashboard">
          <mat-icon>layers</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle title="Collections" routerLink="collections">
          <mat-icon>collections</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle title="Projections" routerLink="projections">
          <mat-icon>map</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle title="Settings" routerLink="settings">
          <mat-icon>settings</mat-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>
      <router-outlet></router-outlet>
   </mat-drawer>

[Qocotzxin]

@crisbeto @bampakoa I'm having same error on testing. Very simple scenario, no conditional neither iteerations, just one simple toggle group.

[crisbeto]

It'll be fixed by #16587. Until the fix is released, you should be able to work around it by binding to checked like this: <mat-button-toggle [checked]="true">.

[ramyasingamsetti]

Hello, still i am facing same issue while running unit tests.
below is my code.

          <mat-button-toggle-group #toggleid="matButtonToggleGroup" value="value1" 
                        (change)="change(toggleid.value)">

           <mat-button-toggle value="value1" checked="true">value1</mat-button-toggle>
            <mat-button-toggle value="value2">value2</mat-button-toggle>
            <mat-button-toggle value="value3">value3</mat-button-toggle>
       </mat-button-toggle-group>

[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.}