Skip to content

Commit 4d33698

Browse files
crisbetocrisbeto
committed
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)
1 parent 5c3107c commit 4d33698

File tree

452 files changed

+2875
-2684
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

452 files changed

+2875
-2684
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import {DataSource} from '@angular/cdk/collections';
22
import {Component} from '@angular/core';
3-
import {NgForm} from '@angular/forms';
3+
import {NgForm, FormsModule} from '@angular/forms';
44
import {BehaviorSubject, Observable} from 'rxjs';
5+
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
6+
import {CdkTableModule} from '@angular/cdk/table';
57

68
export interface PeriodicElement {
79
name: string;
@@ -40,6 +42,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
4042
selector: 'cdk-popover-edit-cdk-table-flex-example',
4143
styleUrls: ['cdk-popover-edit-cdk-table-flex-example.css'],
4244
templateUrl: 'cdk-popover-edit-cdk-table-flex-example.html',
45+
standalone: true,
46+
imports: [CdkTableModule, CdkPopoverEditModule, FormsModule],
4347
})
4448
export class CdkPopoverEditCdkTableFlexExample {
4549
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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import {DataSource} from '@angular/cdk/collections';
22
import {Component} from '@angular/core';
3-
import {NgForm} from '@angular/forms';
3+
import {NgForm, FormsModule} from '@angular/forms';
44
import {BehaviorSubject, Observable} from 'rxjs';
5+
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
6+
import {CdkTableModule} from '@angular/cdk/table';
57

68
export interface PeriodicElement {
79
name: string;
@@ -40,6 +42,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
4042
selector: 'cdk-popover-edit-cdk-table-example',
4143
styleUrls: ['cdk-popover-edit-cdk-table-example.css'],
4244
templateUrl: 'cdk-popover-edit-cdk-table-example.html',
45+
standalone: true,
46+
imports: [CdkTableModule, CdkPopoverEditModule, FormsModule],
4347
})
4448
export class CdkPopoverEditCdkTableExample {
4549
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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {NgForm} from '@angular/forms';
2+
import {NgForm, FormsModule} from '@angular/forms';
3+
import {NgFor} from '@angular/common';
4+
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
35

46
export interface Person {
57
id: number;
@@ -27,6 +29,8 @@ const PERSON_DATA: Person[] = [
2729
selector: 'cdk-popover-edit-cell-span-vanilla-table-example',
2830
styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
2931
templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
32+
standalone: true,
33+
imports: [CdkPopoverEditModule, FormsModule, NgFor],
3034
})
3135
export class CdkPopoverEditCellSpanVanillaTableExample {
3236
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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {NgForm} from '@angular/forms';
2+
import {NgForm, FormsModule} from '@angular/forms';
3+
import {NgFor} from '@angular/common';
4+
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
35

46
export interface PeriodicElement {
57
name: string;
@@ -38,6 +40,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
3840
selector: 'cdk-popover-edit-tab-out-vanilla-table-example',
3941
styleUrls: ['cdk-popover-edit-tab-out-vanilla-table-example.css'],
4042
templateUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.html',
43+
standalone: true,
44+
imports: [CdkPopoverEditModule, FormsModule, NgFor],
4145
})
4246
export class CdkPopoverEditTabOutVanillaTableExample {
4347
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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {NgForm} from '@angular/forms';
2+
import {NgForm, FormsModule} from '@angular/forms';
3+
import {NgFor} from '@angular/common';
4+
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
35

46
export interface PeriodicElement {
57
name: string;
@@ -38,6 +40,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
3840
selector: 'cdk-popover-edit-vanilla-table-example',
3941
styleUrls: ['cdk-popover-edit-vanilla-table-example.css'],
4042
templateUrl: 'cdk-popover-edit-vanilla-table-example.html',
43+
standalone: true,
44+
imports: [CdkPopoverEditModule, FormsModule, NgFor],
4145
})
4246
export class CdkPopoverEditVanillaTableExample {
4347
readonly preservedNameValues = new WeakMap<PeriodicElement, any>();

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

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,5 @@
1-
import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
2-
import {CdkTableModule} from '@angular/cdk/table';
3-
import {CommonModule} from '@angular/common';
4-
import {NgModule} from '@angular/core';
5-
import {FormsModule} from '@angular/forms';
6-
import {CdkPopoverEditCdkTableFlexExample} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
7-
import {CdkPopoverEditCdkTableExample} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
8-
import {
9-
CdkPopoverEditCellSpanVanillaTableExample,
10-
// tslint:disable-next-line:max-line-length
11-
} from './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
12-
import {CdkPopoverEditTabOutVanillaTableExample} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
13-
import {CdkPopoverEditVanillaTableExample} from './cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example';
14-
15-
export {
16-
CdkPopoverEditCdkTableFlexExample,
17-
CdkPopoverEditCdkTableExample,
18-
CdkPopoverEditCellSpanVanillaTableExample,
19-
CdkPopoverEditTabOutVanillaTableExample,
20-
CdkPopoverEditVanillaTableExample,
21-
};
22-
23-
const EXAMPLES = [
24-
CdkPopoverEditCdkTableExample,
25-
CdkPopoverEditCdkTableFlexExample,
26-
CdkPopoverEditCellSpanVanillaTableExample,
27-
CdkPopoverEditTabOutVanillaTableExample,
28-
CdkPopoverEditVanillaTableExample,
29-
];
30-
31-
@NgModule({
32-
imports: [CdkPopoverEditModule, CdkTableModule, FormsModule, CommonModule],
33-
declarations: EXAMPLES,
34-
exports: EXAMPLES,
35-
})
36-
export class CdkPopoverEditExamplesModule {}
1+
export {CdkPopoverEditCdkTableFlexExample} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
2+
export {CdkPopoverEditCdkTableExample} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
3+
export {CdkPopoverEditCellSpanVanillaTableExample} from './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
4+
export {CdkPopoverEditTabOutVanillaTableExample} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
5+
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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {SelectionChange} from '@angular/cdk-experimental/selection';
1+
import {SelectionChange, CdkSelectionModule} from '@angular/cdk-experimental/selection';
22
import {Component} from '@angular/core';
3+
import {CdkTableModule} from '@angular/cdk/table';
34

45
/**
56
* @title CDK Selection Column on a CDK table.
@@ -8,6 +9,8 @@ import {Component} from '@angular/core';
89
selector: 'cdk-selection-column-example',
910
templateUrl: 'cdk-selection-column-example.html',
1011
styleUrls: ['cdk-selection-column-example.css'],
12+
standalone: true,
13+
imports: [CdkTableModule, CdkSelectionModule],
1114
})
1215
export class CdkSelectionColumnExample {
1316
displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import {SelectionChange} from '@angular/cdk-experimental/selection';
21
import {Component} from '@angular/core';
2+
import {NgFor, AsyncPipe} from '@angular/common';
3+
import {SelectionChange, CdkSelectionModule} from '@angular/cdk-experimental/selection';
4+
import {MatCheckboxModule} from '@angular/material/checkbox';
35

46
/**
57
* @title CDK Selection on a simple list.
68
*/
79
@Component({
810
selector: 'cdk-selection-list-example',
911
templateUrl: 'cdk-selection-list-example.html',
12+
standalone: true,
13+
imports: [CdkSelectionModule, NgFor, MatCheckboxModule, AsyncPipe],
1014
})
1115
export class CdkSelectionListExample {
1216
data = ELEMENT_NAMES;

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

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,2 @@
1-
import {CdkSelectionModule} from '@angular/cdk-experimental/selection';
2-
import {CdkTableModule} from '@angular/cdk/table';
3-
import {CommonModule} from '@angular/common';
4-
import {NgModule} from '@angular/core';
5-
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
6-
import {MatCheckboxModule} from '@angular/material/checkbox';
7-
8-
import {CdkSelectionColumnExample} from './cdk-selection-column/cdk-selection-column-example';
9-
import {CdkSelectionListExample} from './cdk-selection-list/cdk-selection-list-example';
10-
11-
export {CdkSelectionColumnExample, CdkSelectionListExample};
12-
13-
const EXAMPLES = [CdkSelectionListExample, CdkSelectionColumnExample];
14-
15-
@NgModule({
16-
imports: [
17-
CdkSelectionModule,
18-
CdkTableModule,
19-
CommonModule,
20-
FormsModule,
21-
ReactiveFormsModule,
22-
MatCheckboxModule,
23-
],
24-
declarations: EXAMPLES,
25-
exports: EXAMPLES,
26-
})
27-
export class CdkSelectionExamplesModule {}
1+
export {CdkSelectionColumnExample} from './cdk-selection-column/cdk-selection-column-example';
2+
export {CdkSelectionListExample} from './cdk-selection-list/cdk-selection-list-example';

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import {FocusOrigin} from '@angular/cdk/a11y';
1+
import {A11yModule, FocusOrigin} from '@angular/cdk/a11y';
22
import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
33

44
/** @title Monitoring focus with FocusMonitor */
55
@Component({
66
selector: 'focus-monitor-directives-example',
77
templateUrl: 'focus-monitor-directives-example.html',
88
styleUrls: ['focus-monitor-directives-example.css'],
9+
standalone: true,
10+
imports: [A11yModule],
911
})
1012
export class FocusMonitorDirectivesExample {
1113
elementOrigin = this.formatOrigin(null);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@ import {
88
OnDestroy,
99
ViewChild,
1010
} from '@angular/core';
11+
import {MatSelectModule} from '@angular/material/select';
12+
import {MatFormFieldModule} from '@angular/material/form-field';
1113

1214
/** @title Focusing with a specific FocusOrigin */
1315
@Component({
1416
selector: 'focus-monitor-focus-via-example',
1517
templateUrl: 'focus-monitor-focus-via-example.html',
1618
styleUrls: ['focus-monitor-focus-via-example.css'],
19+
standalone: true,
20+
imports: [MatFormFieldModule, MatSelectModule],
1721
})
1822
export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit {
1923
@ViewChild('monitored') monitoredEl: ElementRef<HTMLElement>;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
selector: 'focus-monitor-overview-example',
1515
templateUrl: 'focus-monitor-overview-example.html',
1616
styleUrls: ['focus-monitor-overview-example.css'],
17+
standalone: true,
1718
})
1819
export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
1920
@ViewChild('element') element: ElementRef<HTMLElement>;

‎src/components-examples/cdk/a11y/index.ts

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
import {A11yModule} from '@angular/cdk/a11y';
2-
import {NgModule} from '@angular/core';
3-
import {MatSelectModule} from '@angular/material/select';
4-
import {FocusMonitorDirectivesExample} from './focus-monitor-directives/focus-monitor-directives-example';
5-
import {FocusMonitorFocusViaExample} from './focus-monitor-focus-via/focus-monitor-focus-via-example';
6-
import {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example';
7-
8-
export {FocusMonitorDirectivesExample, FocusMonitorFocusViaExample, FocusMonitorOverviewExample};
9-
10-
const EXAMPLES = [
11-
FocusMonitorDirectivesExample,
12-
FocusMonitorFocusViaExample,
13-
FocusMonitorOverviewExample,
14-
];
15-
16-
@NgModule({
17-
imports: [A11yModule, MatSelectModule],
18-
declarations: EXAMPLES,
19-
exports: EXAMPLES,
20-
})
21-
export class CdkA11yExamplesModule {}
1+
export {FocusMonitorDirectivesExample} from './focus-monitor-directives/focus-monitor-directives-example';
2+
export {FocusMonitorFocusViaExample} from './focus-monitor-focus-via/focus-monitor-focus-via-example';
3+
export {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example';

‎src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import {Component} from '@angular/core';
2+
import {NgFor} from '@angular/common';
3+
import {CdkAccordionModule} from '@angular/cdk/accordion';
24

35
/**
46
* @title Accordion overview
@@ -7,6 +9,8 @@ import {Component} from '@angular/core';
79
selector: 'cdk-accordion-overview-example',
810
templateUrl: 'cdk-accordion-overview-example.html',
911
styleUrls: ['cdk-accordion-overview-example.css'],
12+
standalone: true,
13+
imports: [CdkAccordionModule, NgFor],
1014
})
1115
export class CdkAccordionOverviewExample {
1216
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

‎src/components-examples/cdk/accordion/index.ts

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1 @@
1-
import {CommonModule} from '@angular/common';
2-
import {CdkAccordionModule} from '@angular/cdk/accordion';
3-
import {NgModule} from '@angular/core';
4-
import {CdkAccordionOverviewExample} from './cdk-accordion-overview/cdk-accordion-overview-example';
5-
6-
export {CdkAccordionOverviewExample};
7-
8-
const EXAMPLES = [CdkAccordionOverviewExample];
9-
10-
@NgModule({
11-
imports: [CommonModule, CdkAccordionModule],
12-
declarations: EXAMPLES,
13-
exports: EXAMPLES,
14-
})
15-
export class CdkAccordionExamplesModule {}
1+
export {CdkAccordionOverviewExample} from './cdk-accordion-overview/cdk-accordion-overview-example';

‎src/components-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import {Component} from '@angular/core';
2+
import {ClipboardModule} from '@angular/cdk/clipboard';
3+
import {FormsModule} from '@angular/forms';
24

35
/**
46
* @title Clipboard overview
@@ -7,6 +9,8 @@ import {Component} from '@angular/core';
79
selector: 'cdk-clipboard-overview-example',
810
templateUrl: 'cdk-clipboard-overview-example.html',
911
styleUrls: ['cdk-clipboard-overview-example.css'],
12+
standalone: true,
13+
imports: [FormsModule, ClipboardModule],
1014
})
1115
export class CdkClipboardOverviewExample {
1216
value =

‎src/components-examples/cdk/clipboard/index.ts

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1 @@
1-
import {NgModule} from '@angular/core';
2-
import {FormsModule} from '@angular/forms';
3-
import {ClipboardModule} from '@angular/cdk/clipboard';
4-
import {CdkClipboardOverviewExample} from './cdk-clipboard-overview/cdk-clipboard-overview-example';
5-
6-
export {CdkClipboardOverviewExample};
7-
8-
const EXAMPLES = [CdkClipboardOverviewExample];
9-
10-
@NgModule({
11-
imports: [ClipboardModule, FormsModule],
12-
declarations: EXAMPLES,
13-
exports: EXAMPLES,
14-
})
15-
export class CdkClipboardExamplesModule {}
1+
export {CdkClipboardOverviewExample} from './cdk-clipboard-overview/cdk-clipboard-overview-example';

‎src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Component, Inject} from '@angular/core';
2-
import {Dialog, DIALOG_DATA} from '@angular/cdk/dialog';
2+
import {Dialog, DIALOG_DATA, DialogModule} from '@angular/cdk/dialog';
3+
import {NgIf} from '@angular/common';
34

45
export interface DialogData {
56
animal: 'panda' | 'unicorn' | 'lion';
@@ -11,6 +12,8 @@ export interface DialogData {
1112
@Component({
1213
selector: 'cdk-dialog-data-example',
1314
templateUrl: 'cdk-dialog-data-example.html',
15+
standalone: true,
16+
imports: [DialogModule],
1417
})
1518
export class CdkDialogDataExample {
1619
constructor(public dialog: Dialog) {}
@@ -29,6 +32,8 @@ export class CdkDialogDataExample {
2932
selector: 'cdk-dialog-data-example-dialog',
3033
templateUrl: 'cdk-dialog-data-example-dialog.html',
3134
styleUrls: ['./cdk-dialog-data-example-dialog.css'],
35+
standalone: true,
36+
imports: [NgIf],
3237
})
3338
export class CdkDialogDataExampleDialog {
3439
constructor(@Inject(DIALOG_DATA) public data: DialogData) {}

‎src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {Component, Inject} from '@angular/core';
2-
import {Dialog, DialogRef, DIALOG_DATA} from '@angular/cdk/dialog';
2+
import {Dialog, DialogRef, DIALOG_DATA, DialogModule} from '@angular/cdk/dialog';
3+
import {NgIf} from '@angular/common';
4+
import {FormsModule} from '@angular/forms';
35

46
export interface DialogData {
57
animal: string;
@@ -12,6 +14,8 @@ export interface DialogData {
1214
@Component({
1315
selector: 'cdk-dialog-overview-example',
1416
templateUrl: 'cdk-dialog-overview-example.html',
17+
standalone: true,
18+
imports: [FormsModule, NgIf, DialogModule],
1519
})
1620
export class CdkDialogOverviewExample {
1721
animal: string | undefined;
@@ -36,6 +40,8 @@ export class CdkDialogOverviewExample {
3640
selector: 'cdk-dialog-overview-example-dialog',
3741
templateUrl: 'cdk-dialog-overview-example-dialog.html',
3842
styleUrls: ['cdk-dialog-overview-example-dialog.css'],
43+
standalone: true,
44+
imports: [FormsModule],
3945
})
4046
export class CdkDialogOverviewExampleDialog {
4147
constructor(public dialogRef: DialogRef<string>, @Inject(DIALOG_DATA) public data: DialogData) {}

0 commit comments

Comments
 (0)