docs: convert examples to standalone (#27137)

Converts all of the Components examples to standalone to reduce the amount of boilerplate we need to maintain and to simplify the Stackblitz.

(cherry picked from commit 748f177)

Author: crisbeto

src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts

@@ -1,7 +1,9 @@
 import {DataSource} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {NgForm} from '@angular/forms';
+import {NgForm, FormsModule} from '@angular/forms';
 import {BehaviorSubject, Observable} from 'rxjs';
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
+import {CdkTableModule} from '@angular/cdk/table';
 
 export interface PeriodicElement {
   name: string;
@@ -40,6 +42,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
   selector: 'cdk-popover-edit-cdk-table-flex-example',
   styleUrls: ['cdk-popover-edit-cdk-table-flex-example.css'],
   templateUrl: 'cdk-popover-edit-cdk-table-flex-example.html',
+  standalone: true,
+  imports: [CdkTableModule, CdkPopoverEditModule, FormsModule],
 })
 export class CdkPopoverEditCdkTableFlexExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts

@@ -1,7 +1,9 @@
 import {DataSource} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {NgForm} from '@angular/forms';
+import {NgForm, FormsModule} from '@angular/forms';
 import {BehaviorSubject, Observable} from 'rxjs';
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
+import {CdkTableModule} from '@angular/cdk/table';
 
 export interface PeriodicElement {
   name: string;
@@ -40,6 +42,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
   selector: 'cdk-popover-edit-cdk-table-example',
   styleUrls: ['cdk-popover-edit-cdk-table-example.css'],
   templateUrl: 'cdk-popover-edit-cdk-table-example.html',
+  standalone: true,
+  imports: [CdkTableModule, CdkPopoverEditModule, FormsModule],
 })
 export class CdkPopoverEditCdkTableExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
-import {NgForm} from '@angular/forms';
+import {NgForm, FormsModule} from '@angular/forms';
+import {NgFor} from '@angular/common';
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 
 export interface Person {
   id: number;
@@ -27,6 +29,8 @@ const PERSON_DATA: Person[] = [
   selector: 'cdk-popover-edit-cell-span-vanilla-table-example',
   styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
   templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
+  standalone: true,
+  imports: [CdkPopoverEditModule, FormsModule, NgFor],
 })
 export class CdkPopoverEditCellSpanVanillaTableExample {
   readonly preservedValues = new WeakMap<Person, any>();

src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
-import {NgForm} from '@angular/forms';
+import {NgForm, FormsModule} from '@angular/forms';
+import {NgFor} from '@angular/common';
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 
 export interface PeriodicElement {
   name: string;
@@ -38,6 +40,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
   selector: 'cdk-popover-edit-tab-out-vanilla-table-example',
   styleUrls: ['cdk-popover-edit-tab-out-vanilla-table-example.css'],
   templateUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.html',
+  standalone: true,
+  imports: [CdkPopoverEditModule, FormsModule, NgFor],
 })
 export class CdkPopoverEditTabOutVanillaTableExample {
   readonly preservedNameValues = new WeakMap<PeriodicElement, any>();

src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
-import {NgForm} from '@angular/forms';
+import {NgForm, FormsModule} from '@angular/forms';
+import {NgFor} from '@angular/common';
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 
 export interface PeriodicElement {
   name: string;
@@ -38,6 +40,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
   selector: 'cdk-popover-edit-vanilla-table-example',
   styleUrls: ['cdk-popover-edit-vanilla-table-example.css'],
   templateUrl: 'cdk-popover-edit-vanilla-table-example.html',
+  standalone: true,
+  imports: [CdkPopoverEditModule, FormsModule, NgFor],
 })
 export class CdkPopoverEditVanillaTableExample {
   readonly preservedNameValues = new WeakMap<PeriodicElement, any>();

src/components-examples/cdk-experimental/popover-edit/index.ts

@@ -1,36 +1,5 @@
-import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
-import {CdkTableModule} from '@angular/cdk/table';
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {CdkPopoverEditCdkTableFlexExample} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
-import {CdkPopoverEditCdkTableExample} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
-import {
-  CdkPopoverEditCellSpanVanillaTableExample,
-  // tslint:disable-next-line:max-line-length
-} from './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
-import {CdkPopoverEditTabOutVanillaTableExample} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
-import {CdkPopoverEditVanillaTableExample} from './cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example';
-
-export {
-  CdkPopoverEditCdkTableFlexExample,
-  CdkPopoverEditCdkTableExample,
-  CdkPopoverEditCellSpanVanillaTableExample,
-  CdkPopoverEditTabOutVanillaTableExample,
-  CdkPopoverEditVanillaTableExample,
-};
-
-const EXAMPLES = [
-  CdkPopoverEditCdkTableExample,
-  CdkPopoverEditCdkTableFlexExample,
-  CdkPopoverEditCellSpanVanillaTableExample,
-  CdkPopoverEditTabOutVanillaTableExample,
-  CdkPopoverEditVanillaTableExample,
-];
-
-@NgModule({
-  imports: [CdkPopoverEditModule, CdkTableModule, FormsModule, CommonModule],
-  declarations: EXAMPLES,
-  exports: EXAMPLES,
-})
-export class CdkPopoverEditExamplesModule {}
+export {CdkPopoverEditCdkTableFlexExample} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
+export {CdkPopoverEditCdkTableExample} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
+export {CdkPopoverEditCellSpanVanillaTableExample} from './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
+export {CdkPopoverEditTabOutVanillaTableExample} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
+export {CdkPopoverEditVanillaTableExample} from './cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example';

src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts

@@ -1,5 +1,6 @@
-import {SelectionChange} from '@angular/cdk-experimental/selection';
+import {SelectionChange, CdkSelectionModule} from '@angular/cdk-experimental/selection';
 import {Component} from '@angular/core';
+import {CdkTableModule} from '@angular/cdk/table';
 
 /**
  * @title CDK Selection Column on a CDK table.
@@ -8,6 +9,8 @@ import {Component} from '@angular/core';
   selector: 'cdk-selection-column-example',
   templateUrl: 'cdk-selection-column-example.html',
   styleUrls: ['cdk-selection-column-example.css'],
+  standalone: true,
+  imports: [CdkTableModule, CdkSelectionModule],
 })
 export class CdkSelectionColumnExample {
   displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];

src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts

@@ -1,12 +1,16 @@
-import {SelectionChange} from '@angular/cdk-experimental/selection';
 import {Component} from '@angular/core';
+import {NgFor, AsyncPipe} from '@angular/common';
+import {SelectionChange, CdkSelectionModule} from '@angular/cdk-experimental/selection';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 /**
  * @title CDK Selection on a simple list.
  */
 @Component({
   selector: 'cdk-selection-list-example',
   templateUrl: 'cdk-selection-list-example.html',
+  standalone: true,
+  imports: [CdkSelectionModule, NgFor, MatCheckboxModule, AsyncPipe],
 })
 export class CdkSelectionListExample {
   data = ELEMENT_NAMES;

src/components-examples/cdk-experimental/selection/index.ts

@@ -1,27 +1,2 @@
-import {CdkSelectionModule} from '@angular/cdk-experimental/selection';
-import {CdkTableModule} from '@angular/cdk/table';
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-
-import {CdkSelectionColumnExample} from './cdk-selection-column/cdk-selection-column-example';
-import {CdkSelectionListExample} from './cdk-selection-list/cdk-selection-list-example';
-
-export {CdkSelectionColumnExample, CdkSelectionListExample};
-
-const EXAMPLES = [CdkSelectionListExample, CdkSelectionColumnExample];
-
-@NgModule({
-  imports: [
-    CdkSelectionModule,
-    CdkTableModule,
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatCheckboxModule,
-  ],
-  declarations: EXAMPLES,
-  exports: EXAMPLES,
-})
-export class CdkSelectionExamplesModule {}
+export {CdkSelectionColumnExample} from './cdk-selection-column/cdk-selection-column-example';
+export {CdkSelectionListExample} from './cdk-selection-list/cdk-selection-list-example';

src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts

@@ -1,11 +1,13 @@
-import {FocusOrigin} from '@angular/cdk/a11y';
+import {A11yModule, FocusOrigin} from '@angular/cdk/a11y';
 import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
 
 /** @title Monitoring focus with FocusMonitor */
 @Component({
   selector: 'focus-monitor-directives-example',
   templateUrl: 'focus-monitor-directives-example.html',
   styleUrls: ['focus-monitor-directives-example.css'],
+  standalone: true,
+  imports: [A11yModule],
 })
 export class FocusMonitorDirectivesExample {
   elementOrigin = this.formatOrigin(null);