build: remove usages of CommonModule in the dev app

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, ViewChild} from '@angular/core';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
@@ -36,7 +36,7 @@ type DisableStateOption = 'none' | 'first-middle-last' | 'all';
   styleUrl: 'autocomplete-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
+    JsonPipe,
     FormsModule,
     MatAutocompleteModule,
     MatButtonModule,
@@ -246,7 +246,7 @@ export class AutocompleteDemo {
     }
   `,
   standalone: true,
-  imports: [CommonModule, FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
+  imports: [FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemoExampleDialog {

src/dev-app/badge/badge-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule} from '@angular/material/badge';
@@ -18,7 +17,7 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'badge-demo.html',
   styleUrl: 'badge-demo.css',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
+  imports: [FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeDemo {

src/dev-app/baseline/baseline-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -22,7 +21,6 @@ import {MatToolbarModule} from '@angular/material/toolbar';
   styleUrl: 'baseline-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     MatCardModule,
     MatCheckboxModule,
     MatFormFieldModule,

src/dev-app/bottom-sheet/bottom-sheet-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
@@ -32,7 +31,6 @@ const defaultConfig = new MatBottomSheetConfig();
   templateUrl: 'bottom-sheet-demo.html',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatBottomSheetModule,
     MatButtonModule,
@@ -80,7 +78,7 @@ export class BottomSheetDemo {
     </mat-nav-list>
   `,
   standalone: true,
-  imports: [CommonModule, MatListModule],
+  imports: [MatListModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleBottomSheet {

src/dev-app/button-toggle/button-toggle-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
@@ -18,7 +17,7 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'button-toggle-demo.html',
   styleUrl: 'button-toggle-demo.css',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
+  imports: [FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleDemo {

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts

@@ -7,13 +7,12 @@
  */
 
 import {CdkComboboxModule} from '@angular/cdk-experimental/combobox';
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   templateUrl: 'cdk-combobox-demo.html',
   standalone: true,
-  imports: [CdkComboboxModule, CommonModule],
+  imports: [CdkComboboxModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkComboboxDemo {}

src/dev-app/cdk-menu/cdk-menu-demo.ts

@@ -8,7 +8,6 @@
 
 import {CdkMenuModule} from '@angular/cdk/menu';
 import {ConnectedPosition} from '@angular/cdk/overlay';
-import {CommonModule} from '@angular/common';
 import {
   CdkMenuContextExample,
   CdkMenuInlineExample,
@@ -25,7 +24,6 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
   standalone: true,
   imports: [
     CdkMenuModule,
-    CommonModule,
     CdkMenuStandaloneMenuExample,
     CdkMenuStandaloneStatefulMenuExample,
     CdkMenuMenubarExample,

src/dev-app/checkbox/checkbox-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ANIMATION_MODULE_TYPE, ChangeDetectionStrategy, Component, Directive} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
@@ -51,7 +50,7 @@ export class AnimationsNoop {}
   `,
   templateUrl: 'nested-checklist.html',
   standalone: true,
-  imports: [CommonModule, MatCheckboxModule, FormsModule],
+  imports: [MatCheckboxModule, FormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCheckboxDemoNestedChecklist {
@@ -104,7 +103,6 @@ export class MatCheckboxDemoNestedChecklist {
   styleUrl: 'checkbox-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatCheckboxModule,
     MatInputModule,

src/dev-app/chips/chips-demo.ts

@@ -8,7 +8,6 @@
 
 import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -35,7 +34,6 @@ export interface DemoColor {
   styleUrl: 'chips-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatCardModule,

src/dev-app/connected-overlay/connected-overlay-demo.ts

@@ -16,7 +16,6 @@ import {
   VerticalConnectionPos,
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {CommonModule} from '@angular/common';
 import {CdkOverlayBasicExample} from '@angular/components-examples/cdk/overlay';
 import {
   ChangeDetectionStrategy,
@@ -40,7 +39,6 @@ import {MatRadioModule} from '@angular/material/radio';
   standalone: true,
   imports: [
     CdkOverlayBasicExample,
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatCheckboxModule,

src/dev-app/datepicker/datepicker-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -18,6 +17,7 @@ import {
   ViewEncapsulation,
   inject,
 } from '@angular/core';
+import {JsonPipe} from '@angular/common';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -179,7 +179,7 @@ export class CustomHeaderNgContent<D> {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
+    JsonPipe,
     FormsModule,
     MatButtonModule,
     MatCheckboxModule,

src/dev-app/dev-app/dev-app-layout.html

@@ -32,7 +32,7 @@
     be one level above the density class in the DOM. At the same time, we want the density to apply
     to the toolbar while always keeping it in LTR at the same time.
    -->
-  <main [attr.dir]="state.direction" [ngClass]="getDensityClass()" class="demo-main">
+  <main [attr.dir]="state.direction" [class]="getDensityClass()" class="demo-main">
     <!-- The toolbar should always be in the LTR direction -->
     <mat-toolbar color="primary" dir="ltr">
       <button mat-icon-button (click)="navigation.open('mouse')">
@@ -153,7 +153,7 @@ <h1>Angular Material Demos</h1>
       </div>
     </mat-toolbar>
 
-    <div [ngClass]="getDensityClass()" class="demo-content mat-app-background">
+    <div [class]="getDensityClass()" class="demo-content mat-app-background">
       <ng-content></ng-content>
     </div>
   </main>

src/dev-app/dev-app/dev-app-layout.ts

@@ -7,7 +7,7 @@
  */
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {CommonModule, DOCUMENT} from '@angular/common';
+import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -37,7 +37,6 @@ import {DevAppDirectionality} from './dev-app-directionality';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    CommonModule,
     MatButtonModule,
     MatIconModule,
     MatListModule,

src/dev-app/dialog/dialog-demo.ts

@@ -44,6 +44,7 @@ import {MatSelectModule} from '@angular/material/select';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
+    JsonPipe,
     FormsModule,
     MatButtonModule,
     MatCardModule,

src/dev-app/drag-drop/drag-drop-demo.ts

@@ -17,7 +17,6 @@ import {
   Point,
   DragRef,
 } from '@angular/cdk/drag-drop';
-import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -32,7 +31,6 @@ import {MatCheckbox} from '@angular/material/checkbox';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
     DragDropModule,
     FormsModule,
     MatFormFieldModule,

src/dev-app/example/example-list.ts

@@ -7,7 +7,6 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {CommonModule} from '@angular/common';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {MatExpansionModule} from '@angular/material/expansion';
@@ -17,7 +16,7 @@ import {Example} from './example';
 @Component({
   selector: 'material-example-list',
   standalone: true,
-  imports: [CommonModule, MatExpansionModule, Example],
+  imports: [MatExpansionModule, Example],
   template: `
     <mat-accordion multi>
       @for (id of ids; track id) {

src/dev-app/example/example.ts

@@ -17,14 +17,12 @@ import {
   inject,
 } from '@angular/core';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {CommonModule} from '@angular/common';
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
 import {loadExample} from '@angular/components-examples/private';
 
 @Component({
   selector: 'material-example',
   standalone: true,
-  imports: [CommonModule],
   template: `
     @if (showLabel) {
       <div class="label">

src/dev-app/expansion/expansion-demo.ts

@@ -7,7 +7,6 @@
  */
 
 import {CdkAccordionModule} from '@angular/cdk/accordion';
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -30,7 +29,6 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
   standalone: true,
   imports: [
     CdkAccordionModule,
-    CommonModule,
     FormsModule,
     MatButtonModule,
     MatCheckboxModule,

src/dev-app/focus-trap/focus-trap-demo.ts

@@ -8,7 +8,6 @@
 
 import {A11yModule, CdkTrapFocus} from '@angular/cdk/a11y';
 import {_supportsShadowDom} from '@angular/cdk/platform';
-import {CommonModule} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -47,14 +46,7 @@ export class FocusTrapShadowDomDemo {}
   templateUrl: 'focus-trap-demo.html',
   styleUrl: 'focus-trap-demo.css',
   standalone: true,
-  imports: [
-    A11yModule,
-    CommonModule,
-    MatButtonModule,
-    MatCardModule,
-    MatToolbarModule,
-    FocusTrapShadowDomDemo,
-  ],
+  imports: [A11yModule, MatButtonModule, MatCardModule, MatToolbarModule, FocusTrapShadowDomDemo],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FocusTrapDemo implements AfterViewInit {

src/dev-app/google-map/google-map-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -69,7 +68,6 @@ let apiLoadingPromise: Promise<unknown> | null = null;
   styleUrl: 'google-map-demo.css',
   standalone: true,
   imports: [
-    CommonModule,
     GoogleMap,
     MapBicyclingLayer,
     MapCircle,

src/dev-app/grid-list/grid-list-demo.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -19,14 +18,7 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'grid-list-demo.html',
   styleUrl: 'grid-list-demo.css',
   standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatCardModule,
-    MatGridListModule,
-    MatIconModule,
-  ],
+  imports: [FormsModule, MatButtonModule, MatCardModule, MatGridListModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GridListDemo {