Angular Material Elements do not react to changes

Question

No matter what Angular Material Element I add to my Angular 8 Project (mat-tab, mat-button-toggle, mat-select, mat-input...), all of them do not update. For example in mat-tab, the ripple effect is drawn but the tab is not changed. mat-button-toggle shows a similar behavior. The options in mat-select aren't shown and the floating label in mat-input does not float. My code is basically from the Angular Material page:

BrowserModule and BrowserAnimationsModule are imported in the AppModule.

HTML:

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Module:

import { NgModule } from '@angular/core';
import { MatTabsModule } from '@angular/material';
import { CommonModule } from '@angular/common';
import { IhTabComponent } from './tab.component';

@NgModule({
  imports: [
    CommonModule,
    MatTabsModule,
  ],
  declarations: [IhTabComponent],
  exports: [IhTabComponent],
  entryComponents: [IhTabComponent],
})
export class TabModule {}

In my other Angular 7 Project all of the Angular Material elements work fine.

Are you importing all the correct modules, I only see MatTabsModule there. — godhar
Did you Import the BrowsersAnimationModule? That one is necessary — MoxxiManagarm

maidi maidi · Accepted Answer · 2019-11-17T17:26:44

In case someone is interested in the solution. My problmen was caused by ngZone: 'noop' in the main.ts file. It disables change detection.

So changing this

platformBrowserDynamic()
.bootstrapModule(AppModule, {
 ngZone: 'noop'
})
.catch(err => console.error(err));

to this

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

solved my problem with Angular Material Elements.

Angular Material Elements do not react to changes

1 Answers