Skip to content

bug(Mat*** all components): no support for zone-less application #23909

@And2s

Description

@And2s

Is this a regression?

  • No

The previous version in which this bug was not present was

  • ...

Description

Cannot use without zone.js / or in components with ChangeDetectorRef detached.
Would be great if Angular Material Team would implement support for zone-less apps (or at least provide public changeDetectorRef param in each component so that developer could manually trigger component changes on need.)

I know it is on your roadmap. However, technically it is a bug, not a missing feature to not have support for native Angular options (ngZone: noop, cdRef.detach)

Reproduction

Steps to reproduce:

  1. cdRef.detach() in component constructor / or in main.ts set ngZone noop (e.g. .....bootstrapModule(AppModule, {ngZone: 'noop'}})
  2. use material component: mat-input, mat-autocomplete, mat-menu, .. etc.
  3. it wont work + on some events will throw console.error (e.g. Cannot read properties of undefined (reading 'nativeElement'))

Stackblitz https://stackblitz.com/edit/components-issue-6urqfj?file=src%2Fapp%2Fexample-component.ts

Expected Behavior

  • It should work in component with detached changes detector.
  • It should not depend (internally) on component change detection strategy at all.

Actual Behavior

  • Unusable material form components.
  • Sometimes manual trigger of change detection on blur / focus events seems to help.

Environment

  • Angular: v13.0.0
  • CDK/Material: 13.0.0
  • Browser(s): all browsers
  • Operating System: all OS

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions