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.

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);
 }

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 {}

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);

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 {

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 {}

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);

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 {

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 {

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);

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 {

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 {

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);

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 {

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);

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 {

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 {}

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);

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 {

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 {

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);

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 {

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 {

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);

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);
 }

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 {}

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);

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 {

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 {

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);

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 {

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 {

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);

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 {

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 {

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);

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);
 }

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 {

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);

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 {

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 {

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);

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 {

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 {

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);

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);
 }

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 {}

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);

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);
 }

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 {

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);

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 {

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 {

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);

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 {

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 {

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);

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);
 }
 ```

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)
 ```
 

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'},

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.
 

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);
 

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