From 0d6ac92ccbb384dd30049a73071db61af2fc0e4e Mon Sep 17 00:00:00 2001
From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com>
Date: Sat, 3 Jan 2026 21:31:35 -0500
Subject: [PATCH] docs: remove Component suffix from examples in DI & Drag and
 Drop

Updates documentation examples to remove the `Component` suffix, aligning them with the current Angular Style Guide.
---
 .../app/{app.component.css => app.css}        |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../examples/drag-drop/src/axis-lock/main.ts  |   2 +-
 .../app/{app.component.css => app.css}        |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../boundary/app/{app.component.ts => app.ts} |   4 +-
 .../examples/drag-drop/src/boundary/main.ts   |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../src/connected-sorting-group/main.ts       |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/connected-sorting/main.ts   |   2 +-
 .../app/{app.component.css => app.css}        |   0
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../examples/drag-drop/src/copy-list/main.ts  |   2 +-
 .../app/{app.component.css => app.css}        |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/custom-handle/main.ts       |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/custom-placeholder/main.ts  |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/custom-preview/main.ts      |   2 +-
 .../app/app.css}                              |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../examples/drag-drop/src/delay-drag/main.ts |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/disable-drag/main.ts        |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/disable-sorting/main.ts     |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/enter-predicate/main.ts     |   2 +-
 .../app/{app.component.css => app.css}        |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/free-drag-position/main.ts  |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/horizontal-sorting/main.ts  |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/mixed-sorting/main.ts       |   2 +-
 .../app/app.css}                              |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../overview/app/{app.component.ts => app.ts} |   4 +-
 .../examples/drag-drop/src/overview/main.ts   |   2 +-
 .../app/{app.component.css => app.css}        |  14 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/root-element/main.ts        |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../app/{app.component.ts => app.ts}          |   4 +-
 .../drag-drop/src/sort-predicate/main.ts      |   2 +-
 .../app/{app.component.css => app.css}        |   7 +-
 .../app/{app.component.html => app.html}      |   0
 .../sorting/app/{app.component.ts => app.ts}  |   4 +-
 .../examples/drag-drop/src/sorting/main.ts    |   2 +-
 .../guide/di/creating-and-using-services.md   |   2 +-
 .../guide/di/creating-injectable-service.md   |   6 +-
 .../guide/di/defining-dependency-providers.md |  32 ++--
 .../di/hierarchical-dependency-injection.md   | 160 +++++++++---------
 adev/src/content/guide/di/overview.md         |   2 +-
 adev/src/content/guide/drag-drop.md           | 160 +++++++++---------
 82 files changed, 338 insertions(+), 313 deletions(-)
 rename adev/src/content/examples/drag-drop/src/axis-lock/app/{app.component.css => app.css} (59%)
 rename adev/src/content/examples/drag-drop/src/axis-lock/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/axis-lock/app/{app.component.ts => app.ts} (78%)
 rename adev/src/content/examples/drag-drop/src/boundary/app/{app.component.css => app.css} (66%)
 rename adev/src/content/examples/drag-drop/src/boundary/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/boundary/app/{app.component.ts => app.ts} (78%)
 rename adev/src/content/examples/drag-drop/src/connected-sorting-group/app/{app.component.css => app.css} (86%)
 rename adev/src/content/examples/drag-drop/src/connected-sorting-group/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/connected-sorting-group/app/{app.component.ts => app.ts} (93%)
 rename adev/src/content/examples/drag-drop/src/connected-sorting/app/{app.component.css => app.css} (86%)
 rename adev/src/content/examples/drag-drop/src/connected-sorting/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/connected-sorting/app/{app.component.ts => app.ts} (92%)
 rename adev/src/content/examples/drag-drop/src/copy-list/app/{app.component.css => app.css} (100%)
 rename adev/src/content/examples/drag-drop/src/copy-list/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/copy-list/app/{app.component.ts => app.ts} (91%)
 rename adev/src/content/examples/drag-drop/src/custom-handle/app/{app.component.css => app.css} (65%)
 rename adev/src/content/examples/drag-drop/src/custom-handle/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/custom-handle/app/{app.component.ts => app.ts} (80%)
 rename adev/src/content/examples/drag-drop/src/custom-placeholder/app/{app.component.css => app.css} (87%)
 rename adev/src/content/examples/drag-drop/src/custom-placeholder/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/custom-placeholder/app/{app.component.ts => app.ts} (92%)
 rename adev/src/content/examples/drag-drop/src/custom-preview/app/{app.component.css => app.css} (85%)
 rename adev/src/content/examples/drag-drop/src/custom-preview/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/custom-preview/app/{app.component.ts => app.ts} (96%)
 rename adev/src/content/examples/drag-drop/src/{overview/app/app.component.css => delay-drag/app/app.css} (57%)
 rename adev/src/content/examples/drag-drop/src/delay-drag/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/delay-drag/app/{app.component.ts => app.ts} (77%)
 rename adev/src/content/examples/drag-drop/src/disable-drag/app/{app.component.css => app.css} (86%)
 rename adev/src/content/examples/drag-drop/src/disable-drag/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/disable-drag/app/{app.component.ts => app.ts} (89%)
 rename adev/src/content/examples/drag-drop/src/disable-sorting/app/{app.component.css => app.css} (86%)
 rename adev/src/content/examples/drag-drop/src/disable-sorting/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/disable-sorting/app/{app.component.ts => app.ts} (92%)
 rename adev/src/content/examples/drag-drop/src/enter-predicate/app/{app.component.css => app.css} (86%)
 rename adev/src/content/examples/drag-drop/src/enter-predicate/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/enter-predicate/app/{app.component.ts => app.ts} (93%)
 rename adev/src/content/examples/drag-drop/src/free-drag-position/app/{app.component.css => app.css} (57%)
 rename adev/src/content/examples/drag-drop/src/free-drag-position/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/free-drag-position/app/{app.component.ts => app.ts} (86%)
 rename adev/src/content/examples/drag-drop/src/horizontal-sorting/app/{app.component.css => app.css} (86%)
 rename adev/src/content/examples/drag-drop/src/horizontal-sorting/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/horizontal-sorting/app/{app.component.ts => app.ts} (89%)
 rename adev/src/content/examples/drag-drop/src/mixed-sorting/app/{app.component.css => app.css} (82%)
 rename adev/src/content/examples/drag-drop/src/mixed-sorting/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/mixed-sorting/app/{app.component.ts => app.ts} (88%)
 rename adev/src/content/examples/drag-drop/src/{delay-drag/app/app.component.css => overview/app/app.css} (57%)
 rename adev/src/content/examples/drag-drop/src/overview/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/overview/app/{app.component.ts => app.ts} (78%)
 rename adev/src/content/examples/drag-drop/src/root-element/app/{app.component.css => app.css} (55%)
 rename adev/src/content/examples/drag-drop/src/root-element/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/root-element/app/{app.component.ts => app.ts} (94%)
 rename adev/src/content/examples/drag-drop/src/sort-predicate/app/{app.component.css => app.css} (85%)
 rename adev/src/content/examples/drag-drop/src/sort-predicate/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/sort-predicate/app/{app.component.ts => app.ts} (91%)
 rename adev/src/content/examples/drag-drop/src/sorting/app/{app.component.css => app.css} (85%)
 rename adev/src/content/examples/drag-drop/src/sorting/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/drag-drop/src/sorting/app/{app.component.ts => app.ts} (91%)

diff --git a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css b/adev/src/content/examples/drag-drop/src/axis-lock/app/app.css
similarity index 59%
rename from adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/axis-lock/app/app.css
index c3f7eb3c1fa..980f2d87b60 100644
--- a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/axis-lock/app/app.css
@@ -15,13 +15,15 @@
   z-index: 1;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-box:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
diff --git a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.html b/adev/src/content/examples/drag-drop/src/axis-lock/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/axis-lock/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts b/adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts
similarity index 78%
rename from adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts
index 0ebe9ff5ce3..506424e8c7e 100755
--- a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-axis-lock-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag],
 })
 export class CdkDragDropAxisLockExample {}
diff --git a/adev/src/content/examples/drag-drop/src/axis-lock/main.ts b/adev/src/content/examples/drag-drop/src/axis-lock/main.ts
index 9dd4043bd49..ac88750d425 100644
--- a/adev/src/content/examples/drag-drop/src/axis-lock/main.ts
+++ b/adev/src/content/examples/drag-drop/src/axis-lock/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropAxisLockExample} from './app/app.component';
+import {CdkDragDropAxisLockExample} from './app/app';
 
 bootstrapApplication(CdkDragDropAxisLockExample);
diff --git a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.css b/adev/src/content/examples/drag-drop/src/boundary/app/app.css
similarity index 66%
rename from adev/src/content/examples/drag-drop/src/boundary/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/boundary/app/app.css
index 39c49591f1f..a95b356e72a 100644
--- a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/boundary/app/app.css
@@ -17,15 +17,17 @@
   padding: 10px;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-box:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .example-boundary {
diff --git a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.html b/adev/src/content/examples/drag-drop/src/boundary/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/boundary/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/boundary/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts b/adev/src/content/examples/drag-drop/src/boundary/app/app.ts
similarity index 78%
rename from adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/boundary/app/app.ts
index 00e0c785acf..d03cb33b4ff 100755
--- a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/boundary/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-boundary-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag],
 })
 export class CdkDragDropBoundaryExample {}
diff --git a/adev/src/content/examples/drag-drop/src/boundary/main.ts b/adev/src/content/examples/drag-drop/src/boundary/main.ts
index f306d14923b..065ccf44237 100644
--- a/adev/src/content/examples/drag-drop/src/boundary/main.ts
+++ b/adev/src/content/examples/drag-drop/src/boundary/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropBoundaryExample} from './app/app.component';
+import {CdkDragDropBoundaryExample} from './app/app';
 
 bootstrapApplication(CdkDragDropBoundaryExample);
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css
index d1f47630d48..a8ff3a9827f 100644
--- a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css
@@ -34,9 +34,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts
similarity index 93%
rename from adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts
index 4da8ffddf37..7d15dbeb0e4 100755
--- a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts
@@ -13,8 +13,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-connected-sorting-group-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })
 export class CdkDragDropConnectedSortingGroupExample {
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting-group/main.ts b/adev/src/content/examples/drag-drop/src/connected-sorting-group/main.ts
index b719638c81c..0db8581977b 100644
--- a/adev/src/content/examples/drag-drop/src/connected-sorting-group/main.ts
+++ b/adev/src/content/examples/drag-drop/src/connected-sorting-group/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropConnectedSortingGroupExample} from './app/app.component';
+import {CdkDragDropConnectedSortingGroupExample} from './app/app';
 
 bootstrapApplication(CdkDragDropConnectedSortingGroupExample);
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css
index d1f47630d48..a8ff3a9827f 100644
--- a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css
@@ -34,9 +34,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/connected-sorting/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts
similarity index 92%
rename from adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts
index 4fbb6d51828..601754c06f1 100755
--- a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts
@@ -12,8 +12,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-connected-sorting-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropConnectedSortingExample {
diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting/main.ts b/adev/src/content/examples/drag-drop/src/connected-sorting/main.ts
index 571d061be12..92e609feaf6 100644
--- a/adev/src/content/examples/drag-drop/src/connected-sorting/main.ts
+++ b/adev/src/content/examples/drag-drop/src/connected-sorting/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropConnectedSortingExample} from './app/app.component';
+import {CdkDragDropConnectedSortingExample} from './app/app';
 
 bootstrapApplication(CdkDragDropConnectedSortingExample);
diff --git a/adev/src/content/examples/drag-drop/src/copy-list/app/app.component.css b/adev/src/content/examples/drag-drop/src/copy-list/app/app.css
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/copy-list/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/copy-list/app/app.css
diff --git a/adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html b/adev/src/content/examples/drag-drop/src/copy-list/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/copy-list/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts b/adev/src/content/examples/drag-drop/src/copy-list/app/app.ts
similarity index 91%
rename from adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/copy-list/app/app.ts
index 6616bf1118a..8d9b30dd16a 100644
--- a/adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/copy-list/app/app.ts
@@ -12,8 +12,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-copy-list-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropCopyListExample {
diff --git a/adev/src/content/examples/drag-drop/src/copy-list/main.ts b/adev/src/content/examples/drag-drop/src/copy-list/main.ts
index 6f79f90aa65..59fdd8ee9b0 100644
--- a/adev/src/content/examples/drag-drop/src/copy-list/main.ts
+++ b/adev/src/content/examples/drag-drop/src/copy-list/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropCopyListExample} from './app/app.component';
+import {CdkDragDropCopyListExample} from './app/app';
 
 bootstrapApplication(CdkDragDropCopyListExample);
diff --git a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css b/adev/src/content/examples/drag-drop/src/custom-handle/app/app.css
similarity index 65%
rename from adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/custom-handle/app/app.css
index 88e48bedbe4..1642a1836be 100644
--- a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/custom-handle/app/app.css
@@ -15,15 +15,17 @@
   z-index: 1;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-box:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .example-handle {
diff --git a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.html b/adev/src/content/examples/drag-drop/src/custom-handle/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/custom-handle/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts b/adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts
similarity index 80%
rename from adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts
index 54f433aa3ab..9fb0da09081 100755
--- a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-handle-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag, CdkDragHandle],
 })
 export class CdkDragDropHandleExample {}
diff --git a/adev/src/content/examples/drag-drop/src/custom-handle/main.ts b/adev/src/content/examples/drag-drop/src/custom-handle/main.ts
index 39be7b167e0..7259c7166b6 100644
--- a/adev/src/content/examples/drag-drop/src/custom-handle/main.ts
+++ b/adev/src/content/examples/drag-drop/src/custom-handle/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropHandleExample} from './app/app.component';
+import {CdkDragDropHandleExample} from './app/app';
 
 bootstrapApplication(CdkDragDropHandleExample);
diff --git a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css b/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.css
similarity index 87%
rename from adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.css
index c8ae685d5f0..d82afc1465c 100644
--- a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.css
@@ -28,9 +28,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-animating {
diff --git a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html b/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts b/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts
similarity index 92%
rename from adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts
index 799069e23f5..b41f45fa17d 100755
--- a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts
@@ -12,8 +12,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-custom-placeholder-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
 })
 export class CdkDragDropCustomPlaceholderExample {
diff --git a/adev/src/content/examples/drag-drop/src/custom-placeholder/main.ts b/adev/src/content/examples/drag-drop/src/custom-placeholder/main.ts
index cd8a7964f52..1bcebdaaea2 100644
--- a/adev/src/content/examples/drag-drop/src/custom-placeholder/main.ts
+++ b/adev/src/content/examples/drag-drop/src/custom-placeholder/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropCustomPlaceholderExample} from './app/app.component';
+import {CdkDragDropCustomPlaceholderExample} from './app/app';
 
 bootstrapApplication(CdkDragDropCustomPlaceholderExample);
diff --git a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css b/adev/src/content/examples/drag-drop/src/custom-preview/app/app.css
similarity index 85%
rename from adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/custom-preview/app/app.css
index 62cc39f5cc8..3cb2b1284f8 100644
--- a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/custom-preview/app/app.css
@@ -28,9 +28,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html b/adev/src/content/examples/drag-drop/src/custom-preview/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/custom-preview/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts b/adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts
similarity index 96%
rename from adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts
index adc079e5f16..cf0a651c0af 100755
--- a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts
@@ -12,8 +12,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-custom-preview-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag, CdkDragPreview],
 })
 export class CdkDragDropCustomPreviewExample {
diff --git a/adev/src/content/examples/drag-drop/src/custom-preview/main.ts b/adev/src/content/examples/drag-drop/src/custom-preview/main.ts
index 5ba7857a62d..6acfc96496d 100644
--- a/adev/src/content/examples/drag-drop/src/custom-preview/main.ts
+++ b/adev/src/content/examples/drag-drop/src/custom-preview/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropCustomPreviewExample} from './app/app.component';
+import {CdkDragDropCustomPreviewExample} from './app/app';
 
 bootstrapApplication(CdkDragDropCustomPreviewExample);
diff --git a/adev/src/content/examples/drag-drop/src/overview/app/app.component.css b/adev/src/content/examples/drag-drop/src/delay-drag/app/app.css
similarity index 57%
rename from adev/src/content/examples/drag-drop/src/overview/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/delay-drag/app/app.css
index bc7616b91eb..06088f43dd7 100644
--- a/adev/src/content/examples/drag-drop/src/overview/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/delay-drag/app/app.css
@@ -14,13 +14,15 @@
   z-index: 1;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-box:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
diff --git a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.html b/adev/src/content/examples/drag-drop/src/delay-drag/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/delay-drag/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts b/adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts
similarity index 77%
rename from adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts
index e634d53bfe2..5b04de361e8 100755
--- a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-delay-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag],
 })
 export class CdkDragDropDelayExample {}
diff --git a/adev/src/content/examples/drag-drop/src/delay-drag/main.ts b/adev/src/content/examples/drag-drop/src/delay-drag/main.ts
index e1c8b564b02..06d38adfab8 100644
--- a/adev/src/content/examples/drag-drop/src/delay-drag/main.ts
+++ b/adev/src/content/examples/drag-drop/src/delay-drag/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropDelayExample} from './app/app.component';
+import {CdkDragDropDelayExample} from './app/app';
 
 bootstrapApplication(CdkDragDropDelayExample);
diff --git a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css b/adev/src/content/examples/drag-drop/src/disable-drag/app/app.css
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/disable-drag/app/app.css
index b552395d52d..caf4693f8de 100644
--- a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/disable-drag/app/app.css
@@ -33,9 +33,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html b/adev/src/content/examples/drag-drop/src/disable-drag/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/disable-drag/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts b/adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts
similarity index 89%
rename from adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts
index 4d25d457466..a47ca2d774e 100755
--- a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-disabled-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropDisabledExample {
diff --git a/adev/src/content/examples/drag-drop/src/disable-drag/main.ts b/adev/src/content/examples/drag-drop/src/disable-drag/main.ts
index cb6f247849d..7d784f1985d 100644
--- a/adev/src/content/examples/drag-drop/src/disable-drag/main.ts
+++ b/adev/src/content/examples/drag-drop/src/disable-drag/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropDisabledExample} from './app/app.component';
+import {CdkDragDropDisabledExample} from './app/app';
 
 bootstrapApplication(CdkDragDropDisabledExample);
diff --git a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css
index 65011080eee..18452c48f12 100644
--- a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css
@@ -33,9 +33,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/disable-sorting/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts
similarity index 92%
rename from adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts
index 5c91b047a40..ffb0b4c8d64 100755
--- a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts
@@ -13,8 +13,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-disabled-sorting-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })
 export class CdkDragDropDisabledSortingExample {
diff --git a/adev/src/content/examples/drag-drop/src/disable-sorting/main.ts b/adev/src/content/examples/drag-drop/src/disable-sorting/main.ts
index dd88f1cb0fb..bf5f962736b 100644
--- a/adev/src/content/examples/drag-drop/src/disable-sorting/main.ts
+++ b/adev/src/content/examples/drag-drop/src/disable-sorting/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropDisabledSortingExample} from './app/app.component';
+import {CdkDragDropDisabledSortingExample} from './app/app';
 
 bootstrapApplication(CdkDragDropDisabledSortingExample);
diff --git a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css
index 65011080eee..18452c48f12 100644
--- a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css
@@ -33,9 +33,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/enter-predicate/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts
similarity index 93%
rename from adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts
index bf66690a44b..d33236c8cd0 100755
--- a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts
@@ -12,8 +12,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-enter-predicate-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropEnterPredicateExample {
diff --git a/adev/src/content/examples/drag-drop/src/enter-predicate/main.ts b/adev/src/content/examples/drag-drop/src/enter-predicate/main.ts
index c040f7ed5ae..5209b4bc820 100644
--- a/adev/src/content/examples/drag-drop/src/enter-predicate/main.ts
+++ b/adev/src/content/examples/drag-drop/src/enter-predicate/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropEnterPredicateExample} from './app/app.component';
+import {CdkDragDropEnterPredicateExample} from './app/app';
 
 bootstrapApplication(CdkDragDropEnterPredicateExample);
diff --git a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css b/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.css
similarity index 57%
rename from adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/free-drag-position/app/app.css
index bc7616b91eb..06088f43dd7 100644
--- a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.css
@@ -14,13 +14,15 @@
   z-index: 1;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-box:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
diff --git a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html b/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/free-drag-position/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts b/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts
index ddc93e7e045..9105419a11a 100755
--- a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-free-drag-position-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag],
 })
 export class CdkDragDropFreeDragPositionExample {
diff --git a/adev/src/content/examples/drag-drop/src/free-drag-position/main.ts b/adev/src/content/examples/drag-drop/src/free-drag-position/main.ts
index b3962a46b0a..4e3dd3a79b4 100644
--- a/adev/src/content/examples/drag-drop/src/free-drag-position/main.ts
+++ b/adev/src/content/examples/drag-drop/src/free-drag-position/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropFreeDragPositionExample} from './app/app.component';
+import {CdkDragDropFreeDragPositionExample} from './app/app';
 
 bootstrapApplication(CdkDragDropFreeDragPositionExample);
diff --git a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css b/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.css
similarity index 86%
rename from adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.css
index 9029b82e9ae..69f6dea19f7 100644
--- a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.css
@@ -30,9 +30,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html b/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts
similarity index 89%
rename from adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts
index 2192aa4a8ac..0bbcd977c0e 100755
--- a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-horizontal-sorting-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropHorizontalSortingExample {
diff --git a/adev/src/content/examples/drag-drop/src/horizontal-sorting/main.ts b/adev/src/content/examples/drag-drop/src/horizontal-sorting/main.ts
index adc9b1a07e0..87988ad61c3 100644
--- a/adev/src/content/examples/drag-drop/src/horizontal-sorting/main.ts
+++ b/adev/src/content/examples/drag-drop/src/horizontal-sorting/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropHorizontalSortingExample} from './app/app.component';
+import {CdkDragDropHorizontalSortingExample} from './app/app';
 
 bootstrapApplication(CdkDragDropHorizontalSortingExample);
diff --git a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css b/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.css
similarity index 82%
rename from adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.css
index d868e7b7312..855550e8923 100644
--- a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.css
@@ -29,9 +29,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html b/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts
similarity index 88%
rename from adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts
index 65f7d0ad443..be7856bc1cd 100755
--- a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-mixed-sorting-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropMixedSortingExample {
diff --git a/adev/src/content/examples/drag-drop/src/mixed-sorting/main.ts b/adev/src/content/examples/drag-drop/src/mixed-sorting/main.ts
index 6fb838d35ad..e534e83c5b6 100644
--- a/adev/src/content/examples/drag-drop/src/mixed-sorting/main.ts
+++ b/adev/src/content/examples/drag-drop/src/mixed-sorting/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropMixedSortingExample} from './app/app.component';
+import {CdkDragDropMixedSortingExample} from './app/app';
 
 bootstrapApplication(CdkDragDropMixedSortingExample);
diff --git a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css b/adev/src/content/examples/drag-drop/src/overview/app/app.css
similarity index 57%
rename from adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/overview/app/app.css
index bc7616b91eb..06088f43dd7 100644
--- a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/overview/app/app.css
@@ -14,13 +14,15 @@
   z-index: 1;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-box:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
diff --git a/adev/src/content/examples/drag-drop/src/overview/app/app.component.html b/adev/src/content/examples/drag-drop/src/overview/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/overview/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/overview/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/overview/app/app.component.ts b/adev/src/content/examples/drag-drop/src/overview/app/app.ts
similarity index 78%
rename from adev/src/content/examples/drag-drop/src/overview/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/overview/app/app.ts
index 398e0c61bf0..1335cbb8c77 100755
--- a/adev/src/content/examples/drag-drop/src/overview/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/overview/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-overview-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag],
 })
 export class CdkDragDropOverviewExample {}
diff --git a/adev/src/content/examples/drag-drop/src/overview/main.ts b/adev/src/content/examples/drag-drop/src/overview/main.ts
index a007d6c58a9..7f8ba4fd8d2 100644
--- a/adev/src/content/examples/drag-drop/src/overview/main.ts
+++ b/adev/src/content/examples/drag-drop/src/overview/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropOverviewExample} from './app/app.component';
+import {CdkDragDropOverviewExample} from './app/app';
 
 bootstrapApplication(CdkDragDropOverviewExample);
diff --git a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.css b/adev/src/content/examples/drag-drop/src/root-element/app/app.css
similarity index 55%
rename from adev/src/content/examples/drag-drop/src/root-element/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/root-element/app/app.css
index f0e62e88fb9..b59f8fa4f4a 100644
--- a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/root-element/app/app.css
@@ -11,13 +11,15 @@
   border-radius: 4px;
   font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-              0 2px 2px 0 rgba(0, 0, 0, 0.14),
-              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .example-dialog-content:active {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
diff --git a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.html b/adev/src/content/examples/drag-drop/src/root-element/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/root-element/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/root-element/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts b/adev/src/content/examples/drag-drop/src/root-element/app/app.ts
similarity index 94%
rename from adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/root-element/app/app.ts
index 9887b1c2ade..17e960bd297 100755
--- a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/root-element/app/app.ts
@@ -16,8 +16,8 @@ import {
  */
 @Component({
   selector: 'cdk-drag-drop-root-element-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDrag],
 })
 export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy {
diff --git a/adev/src/content/examples/drag-drop/src/root-element/main.ts b/adev/src/content/examples/drag-drop/src/root-element/main.ts
index e482004e84d..44337a664da 100644
--- a/adev/src/content/examples/drag-drop/src/root-element/main.ts
+++ b/adev/src/content/examples/drag-drop/src/root-element/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropRootElementExample} from './app/app.component';
+import {CdkDragDropRootElementExample} from './app/app';
 
 bootstrapApplication(CdkDragDropRootElementExample);
diff --git a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css b/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.css
similarity index 85%
rename from adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/sort-predicate/app/app.css
index 93c1cc8e7eb..432353a03dc 100644
--- a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.css
@@ -27,9 +27,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html b/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/sort-predicate/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts b/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts
similarity index 91%
rename from adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts
index 909c1102c9a..fc226915455 100755
--- a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-sort-predicate-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropSortPredicateExample {
diff --git a/adev/src/content/examples/drag-drop/src/sort-predicate/main.ts b/adev/src/content/examples/drag-drop/src/sort-predicate/main.ts
index f4a1779be51..7e3ac93eaf1 100644
--- a/adev/src/content/examples/drag-drop/src/sort-predicate/main.ts
+++ b/adev/src/content/examples/drag-drop/src/sort-predicate/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropSortPredicateExample} from './app/app.component';
+import {CdkDragDropSortPredicateExample} from './app/app';
 
 bootstrapApplication(CdkDragDropSortPredicateExample);
diff --git a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.css b/adev/src/content/examples/drag-drop/src/sorting/app/app.css
similarity index 85%
rename from adev/src/content/examples/drag-drop/src/sorting/app/app.component.css
rename to adev/src/content/examples/drag-drop/src/sorting/app/app.css
index 0bb2d008bb0..7178be74023 100644
--- a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.css
+++ b/adev/src/content/examples/drag-drop/src/sorting/app/app.css
@@ -28,9 +28,10 @@
   border: none;
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
diff --git a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.html b/adev/src/content/examples/drag-drop/src/sorting/app/app.html
similarity index 100%
rename from adev/src/content/examples/drag-drop/src/sorting/app/app.component.html
rename to adev/src/content/examples/drag-drop/src/sorting/app/app.html
diff --git a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/sorting/app/app.ts
similarity index 91%
rename from adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts
rename to adev/src/content/examples/drag-drop/src/sorting/app/app.ts
index e3548b5646e..4e6c566a669 100755
--- a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts
+++ b/adev/src/content/examples/drag-drop/src/sorting/app/app.ts
@@ -6,8 +6,8 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'cdk-drag-drop-sorting-example',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.css',
+  templateUrl: 'app.html',
+  styleUrl: 'app.css',
   imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropSortingExample {
diff --git a/adev/src/content/examples/drag-drop/src/sorting/main.ts b/adev/src/content/examples/drag-drop/src/sorting/main.ts
index 8628b8f3733..bd996e37158 100644
--- a/adev/src/content/examples/drag-drop/src/sorting/main.ts
+++ b/adev/src/content/examples/drag-drop/src/sorting/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {CdkDragDropSortingExample} from './app/app.component';
+import {CdkDragDropSortingExample} from './app/app';
 
 bootstrapApplication(CdkDragDropSortingExample);
diff --git a/adev/src/content/guide/di/creating-and-using-services.md b/adev/src/content/guide/di/creating-and-using-services.md
index d7b1486f6a2..09a92f33145 100644
--- a/adev/src/content/guide/di/creating-and-using-services.md
+++ b/adev/src/content/guide/di/creating-and-using-services.md
@@ -65,7 +65,7 @@ import { BasicDataStore } from './basic-data-store';
     </div>
   `
 })
-export class ExampleComponent {
+export class Example {
   dataStore = inject(BasicDataStore);
 }
 ```
diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md
index 1dad19288e4..2ad24db3fbc 100644
--- a/adev/src/content/guide/di/creating-injectable-service.md
+++ b/adev/src/content/guide/di/creating-injectable-service.md
@@ -108,20 +108,20 @@ For clarity and maintainability, it is recommended that you define components an
 
 To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it.
 
-The following example specifies the `HeroService` in the `HeroListComponent`.
+The following example specifies the `HeroService` in the `HeroList`.
 The type of `heroService` is `HeroService`.
 
 ```ts
 import {inject} from '@angular/core';
 
-export class HeroListComponent {
+export class HeroList {
   private heroService = inject(HeroService);
 }
 ```
 
 It is also possible to inject a service into a component using the component's constructor:
 
-```ts {header: 'hero-list.component.ts (constructor signature)'}
+```ts {header: 'hero-list.ts (constructor signature)'}
   constructor(private heroService: HeroService)
 ```
 
diff --git a/adev/src/content/guide/di/defining-dependency-providers.md b/adev/src/content/guide/di/defining-dependency-providers.md
index f685b05ef3f..d71616d4a7a 100644
--- a/adev/src/content/guide/di/defining-dependency-providers.md
+++ b/adev/src/content/guide/di/defining-dependency-providers.md
@@ -66,7 +66,7 @@ export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
   selector: 'app-header',
   template: `<h1>Version: {{ config.version }}</h1>`,
 })
-export class HeaderComponent {
+export class Header {
   config = inject(APP_CONFIG); // Automatically available
 }
 ```
@@ -167,7 +167,7 @@ export class LocalDataStore {
   providers: [LocalDataStore],
   template: `...`,
 })
-export class ExampleComponent {
+export class Example {
   dataStore = inject(LocalDataStore);
 }
 ```
@@ -191,7 +191,7 @@ export class DataStore {
   providers: [DataStore],
   template: `...`,
 })
-export class IsolatedComponent {
+export class Isolated {
   dataStore = inject(DataStore); // Component-specific instance
 }
 ```
@@ -242,7 +242,7 @@ import { LocalService } from './local-service';
   selector: 'app-example',
   providers: [LocalService]  // Service without providedIn
 })
-export class ExampleComponent { }
+export class Example { }
 ```
 
 This is actually a shorthand for a more detailed provider configuration:
@@ -291,7 +291,7 @@ import { LocalService } from './local-service';
     { provide: LocalService, useClass: LocalService }
   ]
 })
-export class ExampleComponent { /* ... */ }
+export class Example { /* ... */ }
 ```
 
 The class serves as both the identifier and the implementation, which is why Angular provides the shorthand `providers: [LocalService]`.
@@ -323,7 +323,7 @@ import { DATA_SERVICE_TOKEN } from './tokens';
     { provide: DATA_SERVICE_TOKEN, useClass: LocalDataService }
   ]
 })
-export class ExampleComponent {
+export class Example {
   private dataService = inject(DATA_SERVICE_TOKEN);
 }
 ```
@@ -344,7 +344,7 @@ interface DataService {
     {provide: DataService, useClass: LocalDataService}, // Error!
   ],
 })
-export class ExampleComponent {
+export class Example {
   private dataService = inject(DataService); // Error!
 }
 
@@ -354,7 +354,7 @@ export const DATA_SERVICE_TOKEN = new InjectionToken<DataService>('DataService')
 @Component({
   providers: [{provide: DATA_SERVICE_TOKEN, useClass: LocalDataService}],
 })
-export class ExampleComponent {
+export class Example {
   private dataService = inject(DATA_SERVICE_TOKEN); // Works!
 }
 ```
@@ -428,7 +428,7 @@ export class EvenBetterLogger extends Logger {
     {provide: Logger, useClass: EvenBetterLogger},
   ],
 })
-export class ExampleComponent {
+export class Example {
   private logger = inject(Logger); // Gets EvenBetterLogger instance
 }
 ```
@@ -485,7 +485,7 @@ bootstrapApplication(AppComponent, {
   selector: 'app-header',
   template: `<h1>{{ title }}</h1>`,
 })
-export class HeaderComponent {
+export class Header {
   private config = inject(APP_CONFIG);
   title = this.config.appTitle;
 }
@@ -575,7 +575,7 @@ export const apiClientProvider = {
   selector: 'app-dashboard',
   providers: [apiClientProvider],
 })
-export class DashboardComponent {
+export class Dashboard {
   private apiClient = inject(ApiClient);
 }
 ```
@@ -628,7 +628,7 @@ Use application-level providers in `bootstrapApplication` when:
 
 ```ts
 // main.ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     {provide: API_BASE_URL, useValue: 'https://api.example.com'},
     {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
@@ -676,7 +676,7 @@ Use component or directive providers when:
     { provide: FORM_CONFIG, useValue: { strictMode: true } }
   ]
 })
-export class AdvancedFormComponent { }
+export class AdvancedForm { }
 
 // Modal component with isolated state management
 @Component({
@@ -685,7 +685,7 @@ export class AdvancedFormComponent { }
     ModalStateService  // Each modal manages its own state
   ]
 })
-export class ModalComponent { }
+export class Modal { }
 ```
 
 **Benefits:**
@@ -771,7 +771,7 @@ export function provideAnalytics(config: AnalyticsConfig): Provider[] {
 
 // Usage in consumer app
 // main.ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideAnalytics({
       trackingId: 'GA-12345',
@@ -881,7 +881,7 @@ export function withRetry(config: RetryConfig): HttpFeature {
 }
 
 // Consumer usage with multiple features
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideHttpClient(
       {baseUrl: 'https://api.example.com'},
diff --git a/adev/src/content/guide/di/hierarchical-dependency-injection.md b/adev/src/content/guide/di/hierarchical-dependency-injection.md
index f9a09ce173a..c83aba1dc72 100644
--- a/adev/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev/src/content/guide/di/hierarchical-dependency-injection.md
@@ -68,7 +68,7 @@ There are two more injectors above `root`, an additional `EnvironmentInjector` a
 Consider how Angular bootstraps the application with the following in `main.ts`:
 
 ```ts
-bootstrapApplication(AppComponent, appConfig);
+bootstrapApplication(App, appConfig);
 ```
 
 The `bootstrapApplication()` method creates a child injector of the platform injector which is configured by the `ApplicationConfig` instance.
@@ -193,8 +193,8 @@ Additionally, you can combine all of the modifiers except:
 This way, if it can't be resolved at runtime, Angular resolves the service as `null`, rather than throwing an error.
 In the following example, the service, `OptionalService`, isn't provided in the service, `ApplicationConfig`, `@NgModule()`, or component class, so it isn't available anywhere in the app.
 
-```ts {header:"src/app/optional/optional.component.ts"}
-export class OptionalComponent {
+```ts {header:"src/app/optional/optional.ts"}
+export class Optional {
   public optional? = inject(OptionalService, {optional: true});
 }
 ```
@@ -206,15 +206,15 @@ Use `self` so that Angular will only look at the `ElementInjector` for the curre
 A good use case for `self` is to inject a service but only if it is available on the current host element.
 To avoid errors in this situation, combine `self` with `optional`.
 
-For example, in the following `SelfNoDataComponent`, notice the injected `LeafService` as a property.
+For example, in the following `SelfNoData`, notice the injected `LeafService` as a property.
 
-```ts {header: 'self-no-data.component.ts', highlight: [7]}
+```ts {header: 'self-no-data.ts', highlight: [7]}
 @Component({
   selector: 'app-self-no-data',
-  templateUrl: './self-no-data.component.html',
-  styleUrls: ['./self-no-data.component.css'],
+  templateUrl: './self-no-data.html',
+  styleUrls: ['./self-no-data.css'],
 })
-export class SelfNoDataComponent {
+export class SelfNoData {
   public leaf = inject(LeafService, {optional: true, self: true});
 }
 ```
@@ -224,14 +224,14 @@ In this example, there is a parent provider and injecting the service will retur
 Another example shows the component class with a provider for `FlowerService`.
 In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip 🌷.
 
-```ts {header:"src/app/self/self.component.ts"}
+```ts {header:"src/app/self/self.ts"}
 @Component({
   selector: 'app-self',
-  templateUrl: './self.component.html',
-  styleUrls: ['./self.component.css'],
+  templateUrl: './self.html',
+  styleUrls: ['./self.css'],
   providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
-export class SelfComponent {
+export class Self {
   constructor(@Self() public flower: FlowerService) {}
 }
 ```
@@ -253,15 +253,15 @@ export class LeafService {
 Imagine that in the child component, you had a different value, maple leaf 🍁 but you wanted to use the parent's value instead.
 This is when you'd use `skipSelf`:
 
-```ts {header:"skipself.component.ts" highlight:[[6],[10]]}
+```ts {header:"skipself.ts" highlight:[[6],[10]]}
 @Component({
   selector: 'app-skipself',
-  templateUrl: './skipself.component.html',
-  styleUrls: ['./skipself.component.css'],
+  templateUrl: './skipself.html',
+  styleUrls: ['./skipself.css'],
   // Angular would ignore this LeafService instance
   providers: [{provide: LeafService, useValue: {emoji: '🍁'}}],
 })
-export class SkipselfComponent {
+export class Skipself {
   // Use skipSelf as inject option
   public leaf = inject(LeafService, {skipSelf: true});
 }
@@ -291,21 +291,21 @@ class Person {
 Even if there is a service instance further up the tree, Angular won't continue looking.
 Use `host` as follows:
 
-```ts {header:"host.component.ts" highlight:[[6],[9]]}
+```ts {header:"host.ts" highlight:[[6],[9]]}
 @Component({
   selector: 'app-host',
-  templateUrl: './host.component.html',
-  styleUrls: ['./host.component.css'],
+  templateUrl: './host.html',
+  styleUrls: ['./host.css'],
   // provide the service
   providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
-export class HostComponent {
+export class Host {
   // use host when injecting the service
   flower = inject(FlowerService, {host: true, optional: true});
 }
 ```
 
-Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip <code>🌷</code>.
+Since `Host` has the `host` option , no matter what the parent of `Host` might have as a `flower.emoji` value, the `Host` will use tulip <code>🌷</code>.
 
 ### Modifiers with constructor injection
 
@@ -313,8 +313,8 @@ Similarly as presented before, the behavior of constructor injection can be modi
 
 Import each of them from `@angular/core` and use each in the component class constructor when you inject your service.
 
-```ts {header:"self-no-data.component.ts" highlight:[2]}
-export class SelfNoDataComponent {
+```ts {header:"self-no-data.ts" highlight:[2]}
+export class SelfNoData {
   constructor(@Self() @Optional() public leaf?: LeafService) {}
 }
 ```
@@ -390,22 +390,22 @@ export class FlowerService {
 }
 ```
 
-Consider an application with only an `AppComponent` and a `ChildComponent`.
+Consider an application with only an `App` and a `Child`.
 The most basic rendered view would look like nested HTML elements such as the following:
 
 ```html
 <app-root>
-  <!-- AppComponent selector -->
-  <app-child> <!-- ChildComponent selector --> </app-child>
+  <!-- App selector -->
+  <app-child> <!-- Child selector --> </app-child>
 </app-root>
 ```
 
 However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests:
 
 ```html
-<app-root> <!-- AppComponent selector -->
+<app-root> <!-- App selector -->
   <#VIEW>
-    <app-child> <!-- ChildComponent selector -->
+    <app-child> <!-- Child selector -->
       <#VIEW>
       </#VIEW>
     </app-child>
@@ -421,7 +421,7 @@ Knowledge of this structure can inform how you provide and inject your services,
 Now, consider that `<app-root>` injects the `FlowerService`:
 
 ```typescript
-export class AppComponent {
+export class App {
   flower = inject(FlowerService);
 }
 ```
@@ -474,17 +474,17 @@ In the example case, the constraints are:
 
 ### Using the `providers` array
 
-Now, in the `ChildComponent` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections:
+Now, in the `Child` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections:
 
 ```ts
 @Component({
   selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
+  templateUrl: './child.html',
+  styleUrls: ['./child.css'],
   // use the providers array to provide a service
   providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
 })
-export class ChildComponent {
+export class Child {
   // inject the service
   flower = inject(FlowerService);
 }
@@ -493,13 +493,13 @@ export class ChildComponent {
 Now that the `FlowerService` is provided in the `@Component()` decorator, when the `<app-child>` requests the service, the injector has only to look as far as the `ElementInjector` in the `<app-child>`.
 It won't have to continue the search any further through the injector tree.
 
-The next step is to add a binding to the `ChildComponent` template.
+The next step is to add a binding to the `Child` template.
 
 ```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 ```
 
-To render the new values, add `<app-child>` to the bottom of the `AppComponent` template so the view also displays the sunflower:
+To render the new values, add `<app-child>` to the bottom of the `App` template so the view also displays the sunflower:
 
 ```shell
 Child Component
@@ -555,10 +555,10 @@ export class AnimalService {
 }
 ```
 
-Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `AppComponent` class:
+Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `App` class:
 
 ```ts
-export class AppComponent {
+export class App {
   public flower = inject(FlowerService);
   public animal = inject(AnimalService);
 }
@@ -572,27 +572,27 @@ Here, it has a value of dog 🐶.
 ```typescript
 @Component({
   selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
+  templateUrl: './child.html',
+  styleUrls: ['./child.css'],
   // provide services
   providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
   viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}],
 })
-export class ChildComponent {
+export class Child {
   // inject services
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
 ```
 
-Add bindings to the `ChildComponent` and the `AppComponent` templates.
-In the `ChildComponent` template, add the following binding:
+Add bindings to the `Child` and the `App` templates.
+In the `Child` template, add the following binding:
 
 ```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
 ```
 
-Additionally, add the same to the `AppComponent` template:
+Additionally, add the same to the `App` template:
 
 ```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
@@ -602,7 +602,7 @@ s
 Now you should see both values in the browser:
 
 ```shell
-AppComponent
+App
 Emoji from AnimalService: 🐳
 
 Child Component
@@ -637,35 +637,35 @@ It doesn't need to continue searching the `ElementInjector` tree, nor does it ne
 The `viewProviders` field is conceptually similar to `providers`, but there is one notable difference.
 Configured providers in `viewProviders` are not visible to projected content that ends up as a logical children of the component.
 
-To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `InspectorComponent`.
-`InspectorComponent` will be a child of the `ChildComponent`.
-In `inspector.component.ts`, inject the `FlowerService` and `AnimalService` during property initialization:
+To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `Inspector`.
+`Inspector` will be a child of the `Child`.
+In `inspector.ts`, inject the `FlowerService` and `AnimalService` during property initialization:
 
 ```typescript
-export class InspectorComponent {
+export class Inspector {
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
 ```
 
 You do not need a `providers` or `viewProviders` array.
-Next, in `inspector.component.html`, add the same markup from previous components:
+Next, in `inspector.html`, add the same markup from previous components:
 
 ```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
 ```
 
-Remember to add the `InspectorComponent` to the `ChildComponent` `imports` array.
+Remember to add the `Inspector` to the `Child` `imports` array.
 
 ```ts
 @Component({
   ...
-  imports: [InspectorComponent]
+  imports: [Inspector]
 })
 ```
 
-Next, add the following to `child.component.html`:
+Next, add the following to `child.html`:
 
 ```html
 ...
@@ -679,9 +679,9 @@ Next, add the following to `child.component.html`:
 <app-inspector />
 ```
 
-`<ng-content>` allows you to project content, and `<app-inspector>` inside the `ChildComponent` template makes the `InspectorComponent` a child component of `ChildComponent`.
+`<ng-content>` allows you to project content, and `<app-inspector>` inside the `Child` template makes the `Inspector` a child component of `Child`.
 
-Next, add the following to `app.component.html` to take advantage of content projection.
+Next, add the following to `app.html` to take advantage of content projection.
 
 ```html
 <app-child>
@@ -703,10 +703,10 @@ Emoji from AnimalService: 🐶
 ```
 
 These four bindings demonstrate the difference between `providers` and `viewProviders`.
-Remember that the dog emoji <code>🐶</code> is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content.
+Remember that the dog emoji <code>🐶</code> is declared inside the `<#VIEW>` of `Child` and isn't visible to the projected content.
 Instead, the projected content sees the whale <code>🐳</code>.
 
-However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>🐶</code>.
+However, in the next output section though, the `Inspector` is an actual child component of `Child`, `Inspector` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>🐶</code>.
 
 The `AnimalService` in the logical tree would look like this:
 
@@ -751,7 +751,7 @@ Visibility decorators influence where the search for the injection token begins
 To do this, place visibility configuration at the point of injection, that is, when invoking `inject()`, rather than at a point of declaration.
 
 To alter where the injector starts looking for `FlowerService`, add `skipSelf` to the `<app-child>` `inject()` invocation where `FlowerService` is injected.
-This invocation is a property initializer the `<app-child>` as shown in `child.component.ts`:
+This invocation is a property initializer the `<app-child>` as shown in `child.ts`:
 
 ```typescript
 flower = inject(FlowerService, {skipSelf: true});
@@ -847,7 +847,7 @@ With `skipSelf` in the `<app-child>`, the injector begins its search for the `An
 ### `host` and `viewProviders`
 
 If you just use `host` for the injection of `AnimalService`, the result is dog <code>🐶</code> because the injector finds the `AnimalService` in the `<app-child>` `<#VIEW>` itself.
-The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value.
+The `Child` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value.
 You can also see `host` the `inject()`:
 
 ```typescript
@@ -858,7 +858,7 @@ You can also see `host` the `inject()`:
     { provide: AnimalService, useValue: { emoji: '🐶' } },
   ]
 })
-export class ChildComponent {
+export class Child {
   animal = inject(AnimalService, { host: true })
 }
 ```
@@ -879,24 +879,24 @@ export class ChildComponent {
 </app-root>
 ```
 
-Add a `viewProviders` array with a third animal, hedgehog <code>🦔</code>, to the `app.component.ts` `@Component()` metadata:
+Add a `viewProviders` array with a third animal, hedgehog <code>🦔</code>, to the `app.ts` `@Component()` metadata:
 
 ```typescript
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ],
+  templateUrl: './app.html',
+  styleUrls: [ './app.css' ],
   viewProviders: [
     { provide: AnimalService, useValue: { emoji: '🦔' } },
   ],
 })
 ```
 
-Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.component.ts`.
+Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.ts`.
 Here are `host` and `skipSelf` in the `animal` property initialization:
 
 ```typescript
-export class ChildComponent {
+export class Child {
   animal = inject(AnimalService, {host: true, skipSelf: true});
 }
 ```
@@ -908,7 +908,7 @@ export class ChildComponent {
 When `host` and `skipSelf` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `skipSelf` starts its search in the `<app-child>` injector, but `host` stops searching at `<#VIEW>` —where there is no `FlowerService`
 In the logical tree, you can see that the `FlowerService` is visible in `<app-child>`, not its `<#VIEW>`.
 
-However, the `AnimalService`, which is provided in the `AppComponent` `viewProviders` array, is visible.
+However, the `AnimalService`, which is provided in the `App` `viewProviders` array, is visible.
 
 The logical tree representation shows why this is:
 
@@ -940,34 +940,34 @@ The ability to configure one or more providers at different levels opens up usef
 ### Scenario: service isolation
 
 Architectural reasons may lead you to restrict access to a service to the application domain where it belongs.
-For example, consider we build a `VillainsListComponent` that displays a list of villains.
+For example, consider we build a `VillainsList` that displays a list of villains.
 It gets those villains from a `VillainsService`.
 
 If you provide `VillainsService` in the root `AppModule`, it will make `VillainsService` visible everywhere in the application.
 If you later modify the `VillainsService`, you could break something in other components that started depending this service by accident.
 
-Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
+Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsList` like this:
 
 ```typescript
 @Component({
   selector: 'app-villains-list',
-  templateUrl: './villains-list.component.html',
+  templateUrl: './villains-list.html',
   providers: [VillainsService],
 })
-export class VillainsListComponent {}
+export class VillainsList {}
 ```
 
-By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its subcomponent tree.
+By providing `VillainsService` in the `VillainsList` metadata and nowhere else, the service becomes available only in the `VillainsList` and its subcomponent tree.
 
-`VillainService` is a singleton with respect to `VillainsListComponent` because that is where it is declared.
-As long as `VillainsListComponent` does not get destroyed it will be the same instance of `VillainService` but if there are multiple instances of `VillainsListComponent`, then each instance of `VillainsListComponent` will have its own instance of `VillainService`.
+`VillainService` is a singleton with respect to `VillainsList` because that is where it is declared.
+As long as `VillainsList` does not get destroyed it will be the same instance of `VillainService` but if there are multiple instances of `VillainsList`, then each instance of `VillainsList` will have its own instance of `VillainService`.
 
 ### Scenario: multiple edit sessions
 
 Many applications allow users to work on several open tasks at the same time.
 For example, in a tax preparation application, the preparer could be working on several tax returns, switching from one to the other throughout the day.
 
-To demonstrate that scenario, imagine a `HeroListComponent` that displays a list of super heroes.
+To demonstrate that scenario, imagine a `HeroList` that displays a list of super heroes.
 
 To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
 Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
@@ -978,7 +978,7 @@ Each tax return component has the following characteristics:
 - Can change a tax return without affecting a return in another component
 - Has the ability to save the changes to its tax return or cancel them
 
-Suppose that the `HeroTaxReturnComponent` had logic to manage and restore changes.
+Suppose that the `HeroTaxReturn` had logic to manage and restore changes.
 That would be a straightforward task for a hero tax return.
 In the real world, with a rich tax return data model, the change management would be tricky.
 You could delegate that management to a helper service, as this example does.
@@ -1018,7 +1018,7 @@ export class HeroTaxReturnService {
 }
 ```
 
-Here is the `HeroTaxReturnComponent` that makes use of `HeroTaxReturnService`.
+Here is the `HeroTaxReturn` that makes use of `HeroTaxReturnService`.
 
 ```typescript
 import {Component, input, output} from '@angular/core';
@@ -1027,11 +1027,11 @@ import {HeroTaxReturnService} from './hero-tax-return.service';
 
 @Component({
   selector: 'app-hero-tax-return',
-  templateUrl: './hero-tax-return.component.html',
-  styleUrls: ['./hero-tax-return.component.css'],
+  templateUrl: './hero-tax-return.html',
+  styleUrls: ['./hero-tax-return.css'],
   providers: [HeroTaxReturnService],
 })
-export class HeroTaxReturnComponent {
+export class HeroTaxReturn {
   message = '';
 
   close = output<void>();
@@ -1079,13 +1079,13 @@ The component also asks the service to save and restore this tax return.
 This won't work if the service is an application-wide singleton.
 Every component would share the same service instance, and each component would overwrite the tax return that belonged to another hero.
 
-To prevent this, configure the component-level injector of `HeroTaxReturnComponent` to provide the service, using the `providers` property in the component metadata.
+To prevent this, configure the component-level injector of `HeroTaxReturn` to provide the service, using the `providers` property in the component metadata.
 
 ```typescript
 providers: [HeroTaxReturnService];
 ```
 
-The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
+The `HeroTaxReturn` has its own provider of the `HeroTaxReturnService`.
 Recall that every component _instance_ has its own injector.
 Providing the service at the component level ensures that _every_ instance of the component gets a private instance of the service. This makes sure that no tax return gets overwritten.
 
diff --git a/adev/src/content/guide/di/overview.md b/adev/src/content/guide/di/overview.md
index cb0829d2111..f1bc8672408 100644
--- a/adev/src/content/guide/di/overview.md
+++ b/adev/src/content/guide/di/overview.md
@@ -79,7 +79,7 @@ import { AnalyticsLogger } from './analytics-logger';
     <a href="#" (click)="navigateToDetail($event)">Detail Page</a>
   `,
 })
-export class NavbarComponent {
+export class Navbar {
   private router = inject(Router);
   private analytics = inject(AnalyticsLogger);
 
diff --git a/adev/src/content/guide/drag-drop.md b/adev/src/content/guide/drag-drop.md
index c33451438e5..0382b9da724 100644
--- a/adev/src/content/guide/drag-drop.md
+++ b/adev/src/content/guide/drag-drop.md
@@ -34,8 +34,8 @@ import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
 
 @Component({
-  selector: 'my-custom-component',
-  templateUrl: 'my-custom-component.html',
+  selector: 'drag-drop-example',
+  templateUrl: 'drag-drop-example.html',
   imports: [CdkDrag],
 })
 export class DragDropExample {}
@@ -45,10 +45,10 @@ export class DragDropExample {}
 
 You can make any element draggable by adding the `cdkDrag` directive. By default, all draggable elements support free dragging.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.css"/>
 </docs-code-multifile>
 
 ## Create a list of reorderable draggable elements
@@ -57,10 +57,10 @@ Add the `cdkDropList` directive to a parent element to group draggable elements
 
 The drag and drop directives don't update your data model. To update the data model, listen to the `cdkDropListDropped` event (once the user finishes dragging) and update the data model manually.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/sorting/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST).
@@ -84,15 +84,15 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano
 <div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
 ```
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css"/>
 </docs-code-multifile>
 
 Use the `cdkDropListGroup` directive if you have an unknown number of connected drop lists to set up the connection automatically. Any new `cdkDropList` that is added under a group automatically connects to all other lists.
 
-```html
+```angular-html
 <div cdkDropListGroup>
   <!-- All lists in here will be connected. -->
   @for (list of lists; track list) {
@@ -101,10 +101,10 @@ Use the `cdkDropListGroup` directive if you have an unknown number of connected
 </div>
 ```
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP).
@@ -113,17 +113,17 @@ You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to refere
 
 By default, a user can move `cdkDrag` elements from one container into another connected container. For more fine-grained control over which elements can be dropped into a container, use `cdkDropListEnterPredicate`. Angular calls the predicate whenever a draggable element enters a new container. Depending on whether the predicate returns true or false, the item may or may not be allowed into the new container.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css"/>
 </docs-code-multifile>
 
 ## Attach data
 
 You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData` or `cdkDropListData`, respectively. You can bind to the events fired from both directives that will include this data, allowing you to easily identify the origin of the drag or drop interaction.
 
-```html
+```angular-html
 @for (list of lists; track list) {
 <div cdkDropList [cdkDropListData]="list" (cdkDropListDropped)="drop($event)">
   @for (item of list; track item) {
@@ -139,10 +139,10 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s
 
 By default, the user can drag the entire `cdkDrag` element to move it around. To restrict the user to only be able to do so using a handle element, add the `cdkDragHandle` directive to an element inside of `cdkDrag`. You can have as many `cdkDragHandle` elements as you want.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE).
@@ -155,10 +155,10 @@ To customize the preview, provide a custom template via `*cdkDragPreview`. The c
 
 The cloned element removes its id attribute in order to avoid having multiple elements with the same id on the page. This will cause any CSS that targets that id not to be applied.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW).
@@ -181,10 +181,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `p
 
 While a `cdkDrag` element is being dragged, the directive creates a placeholder element that shows where the element will be placed when dropped. By default, the placeholder is a clone of the element that is being dragged. You can replace the placeholder with a custom one using the `*cdkDragPlaceholder` directive:
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER).
@@ -195,10 +195,10 @@ Set the `cdkDragRootElement` attribute if there's an element that you want to ma
 
 The attribute accepts a selector and looks up the DOM until it finds an element that matches the selector. If an element is found, it becomes draggable. This is useful for cases such as making a dialog draggable.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/root-element/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/root-element/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/root-element/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/root-element/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -207,20 +207,20 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `r
 
 By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM position only when a user manually moves the element. Use the `cdkDragFreeDragPosition` input to explicitly set the element’s position. A common use case for this is restoring a draggable element's position after a user has navigated away and then returned.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.css"/>
 </docs-code-multifile>
 
 ### Restrict movement within an element
 
 To stop the user from being able to drag a `cdkDrag` element outside of another element, pass a CSS selector to the `cdkDragBoundary` attribute. This attribute accepts a selector and looks up the DOM until it finds an element that matches it. If a match is found, the element becomes the boundary that the draggable element can't be dragged outside of `cdkDragBoundary` can also be used when `cdkDrag` is placed inside a `cdkDropList`.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/boundary/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/boundary/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/boundary/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/boundary/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -229,10 +229,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update bo
 
 By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a specific axis, set `cdkDragLockAxis` to either "x" or "y"on `cdkDrag`. To restrict dragging for multiple draggable elements within `cdkDropList`, set `cdkDropListLockAxis` on `cdkDropList` instead.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -243,10 +243,10 @@ By default when the user puts their pointer down on a `cdkDrag`, the dragging se
 
 You can delay the dragging sequence using the `cdkDragStartDelay` input. The input waits for the user to hold down their pointer for the specified number of milliseconds before dragging the element.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -255,10 +255,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dr
 
 If you want to disable dragging for a particular drag item, set the `cdkDragDisabled` input on a `cdkDrag` item to true or false. You can disable an entire list using the `cdkDropListDisabled` input on a `cdkDropList`. It is also possible to disable a specific handle via `cdkDragHandleDisabled` on `cdkDragHandle`.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -269,10 +269,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `d
 
 By default, the `cdkDropList` directive assumes lists are vertical. This can be changed by setting the `cdkDropListOrientation` property to horizontal.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -283,30 +283,30 @@ By default, the `cdkDropList` sorts the draggable elements by moving them around
 
 If you have a sortable list that needs to wrap onto new lines, you can set `cdkDropListOrientation` attribute to `mixed`. This causes the list to use a different strategy of sorting the elements which involves moving them in the DOM. However the list can no longer animate the sorting action .
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.css"/>
 </docs-code-multifile>
 
 ### Selective sorting
 
 By default, `cdkDrag` elements are sorted into any position inside of a `cdkDropList`. To change this behavior, set the `cdkDropListSortPredicate` attribute which takes in a function. The predicate function is called whenever a draggable element is about to be moved into a new index within the drop list. If the predicate returns true, the item will be moved into the new index, otherwise it will keep its current position.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.css"/>
 </docs-code-multifile>
 
 ### Disable sorting
 
 There are cases where draggable elements can be dragged out of one `cdkDropList` into another, however the user shouldn't be able to sort them within the source list. For these cases, add the `cdkDropListSortingDisabled` attribute to prevent the draggable elements in a `cdkDropList` from sorting. This preserves the dragged element's initial position in the source list if it does not get dragged to a new valid position.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -319,10 +319,10 @@ To enable copying, you can set the `cdkDropListHasAnchor` input. This tells the
 
 Combining `cdkDropListHasAnchor` with `cdkDropListSortingDisabled` makes it possible to construct a list from which a user can copy items without being able to reorder the source list (e.g. a product list and a shopping cart).
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/copy-list/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.css"/>
 </docs-code-multifile>
 
 ## Customize animations