From 511d9ca9d261fdcb6f7dc77dc1624ef24472062c Mon Sep 17 00:00:00 2001
From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com>
Date: Mon, 12 Jan 2026 12:27:02 -0500
Subject: [PATCH] docs: remove Component suffix in animations, HTTP, and SSR
 guides

Removes the unnecessary `Component` suffix from examples.
Also fixes button styling in the animations examples, which previously did not render correctly in dark mode.
---
 .../animations/src/app/about.component.ts     |  8 --
 .../app/{about.component.css => about.css}    |  0
 .../app/{about.component.html => about.html}  |  0
 .../examples/animations/src/app/about.ts      |  8 ++
 ...o-height.component.css => auto-height.css} |  2 +-
 ...height.component.html => auto-height.html} |  0
 ...uto-height.component.ts => auto-height.ts} |  6 +-
 ....component.css => increment-decrement.css} |  0
 ...omponent.html => increment-decrement.html} |  0
 ...nt.component.ts => increment-decrement.ts} |  6 +-
 ...remove.component.css => insert-remove.css} |  0
 ...move.component.html => insert-remove.html} |  0
 ...t-remove.component.ts => insert-remove.ts} |  6 +-
 ...pen-close.component.css => open-close.css} |  0
 ...n-close.component.html => open-close.html} |  0
 ...{open-close.component.ts => open-close.ts} |  6 +-
 .../{reorder.component.css => reorder.css}    |  0
 .../{reorder.component.html => reorder.html}  |  0
 .../{reorder.component.ts => reorder.ts}      |  6 +-
 .../{stagger.component.css => stagger.css}    |  0
 .../{stagger.component.html => stagger.html}  |  0
 .../{stagger.component.ts => stagger.ts}      |  6 +-
 .../src/app/{app.component.css => app.css}    |  4 +-
 .../src/app/{app.component.html => app.html}  |  0
 .../examples/animations/src/app/app.routes.ts | 44 ++++-----
 .../src/app/{app.component.ts => app.ts}      |  4 +-
 ...ge.component.ts => hero-list-auto-page.ts} |  6 +-
 ...uto.component.html => hero-list-auto.html} |  0
 ...st-auto.component.ts => hero-list-auto.ts} |  6 +-
 ...onent.ts => hero-list-enter-leave-page.ts} |  6 +-
 ....component.ts => hero-list-enter-leave.ts} |  4 +-
 ...e.component.ts => hero-list-group-page.ts} |  6 +-
 ...roups.component.ts => hero-list-groups.ts} |  4 +-
 ...-page.component.css => hero-list-page.css} | 10 +-
 ...age.component.html => hero-list-page.html} |  0
 ...st-page.component.ts => hero-list-page.ts} |  6 +-
 ...{hero-list.component.css => hero-list.css} |  0
 .../animations/src/app/home.component.ts      |  8 --
 .../src/app/{home.component.css => home.css}  |  0
 .../app/{home.component.html => home.html}    |  0
 .../examples/animations/src/app/home.ts       |  8 ++
 ...remove.component.css => insert-remove.css} |  0
 ...move.component.html => insert-remove.html} |  0
 ...t-remove.component.ts => insert-remove.ts} |  6 +-
 ...o-height.component.css => auto-height.css} | 11 ++-
 ...height.component.html => auto-height.html} |  2 +-
 ...uto-height.component.ts => auto-height.ts} |  6 +-
 ....component.css => increment-decrement.css} |  0
 ...omponent.html => increment-decrement.html} |  0
 ...nt.component.ts => increment-decrement.ts} |  6 +-
 .../{insert.component.css => insert.css}      |  9 ++
 .../{insert.component.html => insert.html}    |  2 +-
 .../{insert.component.ts => insert.ts}        |  6 +-
 ...pen-close.component.css => open-close.css} | 15 ++-
 ...n-close.component.html => open-close.html} |  2 +-
 ...{open-close.component.ts => open-close.ts} |  6 +-
 .../{remove.component.css => remove.css}      | 13 ++-
 .../{remove.component.html => remove.html}    |  2 +-
 .../{remove.component.ts => remove.ts}        |  6 +-
 .../{reorder.component.css => reorder.css}    |  9 ++
 .../{reorder.component.html => reorder.html}  |  2 +-
 .../{reorder.component.ts => reorder.ts}      |  6 +-
 .../{stagger.component.css => stagger.css}    |  9 ++
 .../{stagger.component.html => stagger.html}  |  2 +-
 .../{stagger.component.ts => stagger.ts}      |  6 +-
 ...e-page.component.ts => open-close-page.ts} |  6 +-
 ...ose.component.1.html => open-close.1.html} |  0
 ...n-close.component.1.ts => open-close.1.ts} |  4 +-
 ...ose.component.2.html => open-close.2.html} |  0
 ...n-close.component.2.ts => open-close.2.ts} |  4 +-
 ...ose.component.3.html => open-close.3.html} |  0
 ...n-close.component.3.ts => open-close.3.ts} |  4 +-
 ...ose.component.4.html => open-close.4.html} |  0
 ...n-close.component.4.ts => open-close.4.ts} |  6 +-
 ...pen-close.component.css => open-close.css} |  0
 ...n-close.component.html => open-close.html} |  0
 ...{open-close.component.ts => open-close.ts} |  6 +-
 .../{querying.component.css => querying.css}  |  4 +-
 .../{querying.component.ts => querying.ts}    |  4 +-
 ...age.component.ts => status-slider-page.ts} |  6 +-
 ...slider.component.css => status-slider.css} |  0
 ...ider.component.html => status-slider.html} |  0
 ...s-slider.component.ts => status-slider.ts} |  6 +-
 ...component.ts => toggle-animations-page.ts} |  6 +-
 .../content/examples/animations/src/main.ts   |  2 +-
 .../guide/animations/complex-sequences.md     |  8 +-
 adev/src/content/guide/animations/css.md      | 56 +++++------
 .../src/content/guide/animations/migration.md | 98 +++++++++----------
 adev/src/content/guide/animations/overview.md | 24 ++---
 .../guide/animations/reusable-animations.md   |  2 +-
 .../animations/transition-and-triggers.md     | 40 ++++----
 adev/src/content/guide/http/interceptors.md   |  4 +-
 .../src/content/guide/http/making-requests.md |  2 +-
 adev/src/content/guide/ssr.md                 | 10 +-
 94 files changed, 325 insertions(+), 273 deletions(-)
 delete mode 100755 adev/src/content/examples/animations/src/app/about.component.ts
 rename adev/src/content/examples/animations/src/app/{about.component.css => about.css} (100%)
 rename adev/src/content/examples/animations/src/app/{about.component.html => about.html} (100%)
 create mode 100755 adev/src/content/examples/animations/src/app/about.ts
 rename adev/src/content/examples/animations/src/app/animations-package/{auto-height.component.css => auto-height.css} (86%)
 rename adev/src/content/examples/animations/src/app/animations-package/{auto-height.component.html => auto-height.html} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{auto-height.component.ts => auto-height.ts} (79%)
 rename adev/src/content/examples/animations/src/app/animations-package/{increment-decrement.component.css => increment-decrement.css} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{increment-decrement.component.html => increment-decrement.html} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{increment-decrement.component.ts => increment-decrement.ts} (81%)
 rename adev/src/content/examples/animations/src/app/animations-package/{insert-remove.component.css => insert-remove.css} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{insert-remove.component.html => insert-remove.html} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{insert-remove.component.ts => insert-remove.ts} (78%)
 rename adev/src/content/examples/animations/src/app/animations-package/{open-close.component.css => open-close.css} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{open-close.component.html => open-close.html} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{open-close.component.ts => open-close.ts} (89%)
 rename adev/src/content/examples/animations/src/app/animations-package/{reorder.component.css => reorder.css} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{reorder.component.html => reorder.html} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{reorder.component.ts => reorder.ts} (89%)
 rename adev/src/content/examples/animations/src/app/animations-package/{stagger.component.css => stagger.css} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{stagger.component.html => stagger.html} (100%)
 rename adev/src/content/examples/animations/src/app/animations-package/{stagger.component.ts => stagger.ts} (83%)
 rename adev/src/content/examples/animations/src/app/{app.component.css => app.css} (65%)
 rename adev/src/content/examples/animations/src/app/{app.component.html => app.html} (100%)
 rename adev/src/content/examples/animations/src/app/{app.component.ts => app.ts} (94%)
 rename adev/src/content/examples/animations/src/app/{hero-list-auto-page.component.ts => hero-list-auto-page.ts} (74%)
 rename adev/src/content/examples/animations/src/app/{hero-list-auto.component.html => hero-list-auto.html} (100%)
 rename adev/src/content/examples/animations/src/app/{hero-list-auto.component.ts => hero-list-auto.ts} (82%)
 rename adev/src/content/examples/animations/src/app/{hero-list-enter-leave-page.component.ts => hero-list-enter-leave-page.ts} (73%)
 rename adev/src/content/examples/animations/src/app/{hero-list-enter-leave.component.ts => hero-list-enter-leave.ts} (92%)
 rename adev/src/content/examples/animations/src/app/{hero-list-group-page.component.ts => hero-list-group-page.ts} (74%)
 rename adev/src/content/examples/animations/src/app/{hero-list-groups.component.ts => hero-list-groups.ts} (95%)
 rename adev/src/content/examples/animations/src/app/{hero-list-page.component.css => hero-list-page.css} (91%)
 rename adev/src/content/examples/animations/src/app/{hero-list-page.component.html => hero-list-page.html} (100%)
 rename adev/src/content/examples/animations/src/app/{hero-list-page.component.ts => hero-list-page.ts} (93%)
 rename adev/src/content/examples/animations/src/app/{hero-list.component.css => hero-list.css} (100%)
 delete mode 100755 adev/src/content/examples/animations/src/app/home.component.ts
 rename adev/src/content/examples/animations/src/app/{home.component.css => home.css} (100%)
 rename adev/src/content/examples/animations/src/app/{home.component.html => home.html} (100%)
 create mode 100755 adev/src/content/examples/animations/src/app/home.ts
 rename adev/src/content/examples/animations/src/app/{insert-remove.component.css => insert-remove.css} (100%)
 rename adev/src/content/examples/animations/src/app/{insert-remove.component.html => insert-remove.html} (100%)
 rename adev/src/content/examples/animations/src/app/{insert-remove.component.ts => insert-remove.ts} (81%)
 rename adev/src/content/examples/animations/src/app/native-css/{auto-height.component.css => auto-height.css} (65%)
 rename adev/src/content/examples/animations/src/app/native-css/{auto-height.component.html => auto-height.html} (69%)
 rename adev/src/content/examples/animations/src/app/native-css/{auto-height.component.ts => auto-height.ts} (61%)
 rename adev/src/content/examples/animations/src/app/native-css/{increment-decrement.component.css => increment-decrement.css} (100%)
 rename adev/src/content/examples/animations/src/app/native-css/{increment-decrement.component.html => increment-decrement.html} (100%)
 rename adev/src/content/examples/animations/src/app/native-css/{increment-decrement.component.ts => increment-decrement.ts} (84%)
 rename adev/src/content/examples/animations/src/app/native-css/{insert.component.css => insert.css} (64%)
 rename adev/src/content/examples/animations/src/app/native-css/{insert.component.html => insert.html} (69%)
 rename adev/src/content/examples/animations/src/app/native-css/{insert.component.ts => insert.ts} (64%)
 rename adev/src/content/examples/animations/src/app/native-css/{open-close.component.css => open-close.css} (60%)
 rename adev/src/content/examples/animations/src/app/native-css/{open-close.component.html => open-close.html} (67%)
 rename adev/src/content/examples/animations/src/app/native-css/{open-close.component.ts => open-close.ts} (62%)
 rename adev/src/content/examples/animations/src/app/native-css/{remove.component.css => remove.css} (54%)
 rename adev/src/content/examples/animations/src/app/native-css/{remove.component.html => remove.html} (68%)
 rename adev/src/content/examples/animations/src/app/native-css/{remove.component.ts => remove.ts} (64%)
 rename adev/src/content/examples/animations/src/app/native-css/{reorder.component.css => reorder.css} (64%)
 rename adev/src/content/examples/animations/src/app/native-css/{reorder.component.html => reorder.html} (68%)
 rename adev/src/content/examples/animations/src/app/native-css/{reorder.component.ts => reorder.ts} (82%)
 rename adev/src/content/examples/animations/src/app/native-css/{stagger.component.css => stagger.css} (57%)
 rename adev/src/content/examples/animations/src/app/native-css/{stagger.component.html => stagger.html} (72%)
 rename adev/src/content/examples/animations/src/app/native-css/{stagger.component.ts => stagger.ts} (69%)
 rename adev/src/content/examples/animations/src/app/{open-close-page.component.ts => open-close-page.ts} (78%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.1.html => open-close.1.html} (100%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.1.ts => open-close.1.ts} (93%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.2.html => open-close.2.html} (100%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.2.ts => open-close.2.ts} (86%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.3.html => open-close.3.html} (100%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.3.ts => open-close.3.ts} (90%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.4.html => open-close.4.html} (100%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.4.ts => open-close.4.ts} (89%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.css => open-close.css} (100%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.html => open-close.html} (100%)
 rename adev/src/content/examples/animations/src/app/{open-close.component.ts => open-close.ts} (95%)
 rename adev/src/content/examples/animations/src/app/{querying.component.css => querying.css} (89%)
 rename adev/src/content/examples/animations/src/app/{querying.component.ts => querying.ts} (97%)
 rename adev/src/content/examples/animations/src/app/{status-slider-page.component.ts => status-slider-page.ts} (60%)
 rename adev/src/content/examples/animations/src/app/{status-slider.component.css => status-slider.css} (100%)
 rename adev/src/content/examples/animations/src/app/{status-slider.component.html => status-slider.html} (100%)
 rename adev/src/content/examples/animations/src/app/{status-slider.component.ts => status-slider.ts} (92%)
 rename adev/src/content/examples/animations/src/app/{toggle-animations-page.component.ts => toggle-animations-page.ts} (61%)

diff --git a/adev/src/content/examples/animations/src/app/about.component.ts b/adev/src/content/examples/animations/src/app/about.component.ts
deleted file mode 100755
index 43f171e65c0..00000000000
--- a/adev/src/content/examples/animations/src/app/about.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-about',
-  templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css'],
-})
-export class AboutComponent {}
diff --git a/adev/src/content/examples/animations/src/app/about.component.css b/adev/src/content/examples/animations/src/app/about.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/about.component.css
rename to adev/src/content/examples/animations/src/app/about.css
diff --git a/adev/src/content/examples/animations/src/app/about.component.html b/adev/src/content/examples/animations/src/app/about.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/about.component.html
rename to adev/src/content/examples/animations/src/app/about.html
diff --git a/adev/src/content/examples/animations/src/app/about.ts b/adev/src/content/examples/animations/src/app/about.ts
new file mode 100755
index 00000000000..da46a63805e
--- /dev/null
+++ b/adev/src/content/examples/animations/src/app/about.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.html',
+  styleUrls: ['./about.css'],
+})
+export class About {}
diff --git a/adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css b/adev/src/content/examples/animations/src/app/animations-package/auto-height.css
similarity index 86%
rename from adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css
rename to adev/src/content/examples/animations/src/app/animations-package/auto-height.css
index c17abaf4a67..c28bc86d677 100644
--- a/adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css
+++ b/adev/src/content/examples/animations/src/app/animations-package/auto-height.css
@@ -8,6 +8,6 @@
   margin-top: 1em;
   font-weight: bold;
   font-size: 20px;
-  background-color: blue;
+  background: #3b82f6;
   color: #ebebeb;
 }
diff --git a/adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html b/adev/src/content/examples/animations/src/app/animations-package/auto-height.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html
rename to adev/src/content/examples/animations/src/app/animations-package/auto-height.html
diff --git a/adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts b/adev/src/content/examples/animations/src/app/animations-package/auto-height.ts
similarity index 79%
rename from adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts
rename to adev/src/content/examples/animations/src/app/animations-package/auto-height.ts
index aa5c288f913..48b996c1b1d 100644
--- a/adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts
+++ b/adev/src/content/examples/animations/src/app/animations-package/auto-height.ts
@@ -10,10 +10,10 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
       transition('false <=> true', animate(1000)),
     ]),
   ],
-  templateUrl: 'auto-height.component.html',
-  styleUrl: 'auto-height.component.css',
+  templateUrl: 'auto-height.html',
+  styleUrl: 'auto-height.css',
 })
-export class AutoHeightComponent {
+export class AutoHeight {
   isOpen = signal(false);
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css b/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css
rename to adev/src/content/examples/animations/src/app/animations-package/increment-decrement.css
diff --git a/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html b/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html
rename to adev/src/content/examples/animations/src/app/animations-package/increment-decrement.html
diff --git a/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts b/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.ts
similarity index 81%
rename from adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts
rename to adev/src/content/examples/animations/src/app/animations-package/increment-decrement.ts
index dd85108c83c..0eb32325dfd 100755
--- a/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts
+++ b/adev/src/content/examples/animations/src/app/animations-package/increment-decrement.ts
@@ -5,8 +5,8 @@ import {trigger, transition, animate, style, query, stagger} from '@angular/anim
 
 @Component({
   selector: 'app-increment-decrement',
-  templateUrl: 'increment-decrement.component.html',
-  styleUrls: ['increment-decrement.component.css'],
+  templateUrl: 'increment-decrement.html',
+  styleUrls: ['increment-decrement.css'],
   animations: [
     trigger('incrementAnimation', [
       transition(':increment', [
@@ -18,7 +18,7 @@ import {trigger, transition, animate, style, query, stagger} from '@angular/anim
     ]),
   ],
 })
-export class IncrementDecrementComponent {
+export class IncrementDecrement {
   num = signal(0);
 
   modify(n: number) {
diff --git a/adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css b/adev/src/content/examples/animations/src/app/animations-package/insert-remove.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css
rename to adev/src/content/examples/animations/src/app/animations-package/insert-remove.css
diff --git a/adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html b/adev/src/content/examples/animations/src/app/animations-package/insert-remove.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html
rename to adev/src/content/examples/animations/src/app/animations-package/insert-remove.html
diff --git a/adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts b/adev/src/content/examples/animations/src/app/animations-package/insert-remove.ts
similarity index 78%
rename from adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts
rename to adev/src/content/examples/animations/src/app/animations-package/insert-remove.ts
index b9c5a47102a..3485e74143b 100755
--- a/adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts
+++ b/adev/src/content/examples/animations/src/app/animations-package/insert-remove.ts
@@ -10,10 +10,10 @@ import {trigger, transition, animate, style} from '@angular/animations';
       transition(':leave', [animate('200ms', style({opacity: 0}))]),
     ]),
   ],
-  templateUrl: 'insert-remove.component.html',
-  styleUrls: ['insert-remove.component.css'],
+  templateUrl: 'insert-remove.html',
+  styleUrls: ['insert-remove.css'],
 })
-export class InsertRemoveComponent {
+export class InsertRemove {
   isShown = false;
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/animations-package/open-close.component.css b/adev/src/content/examples/animations/src/app/animations-package/open-close.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/open-close.component.css
rename to adev/src/content/examples/animations/src/app/animations-package/open-close.css
diff --git a/adev/src/content/examples/animations/src/app/animations-package/open-close.component.html b/adev/src/content/examples/animations/src/app/animations-package/open-close.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/open-close.component.html
rename to adev/src/content/examples/animations/src/app/animations-package/open-close.html
diff --git a/adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts b/adev/src/content/examples/animations/src/app/animations-package/open-close.ts
similarity index 89%
rename from adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts
rename to adev/src/content/examples/animations/src/app/animations-package/open-close.ts
index 152acd2a25f..fa04ba0103d 100644
--- a/adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts
+++ b/adev/src/content/examples/animations/src/app/animations-package/open-close.ts
@@ -35,10 +35,10 @@ import {trigger, transition, state, animate, style, keyframes} from '@angular/an
       ]),
     ]),
   ],
-  templateUrl: 'open-close.component.html',
-  styleUrl: 'open-close.component.css',
+  templateUrl: 'open-close.html',
+  styleUrl: 'open-close.css',
 })
-export class OpenCloseComponent {
+export class OpenClose {
   isOpen = signal(false);
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/animations-package/reorder.component.css b/adev/src/content/examples/animations/src/app/animations-package/reorder.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/reorder.component.css
rename to adev/src/content/examples/animations/src/app/animations-package/reorder.css
diff --git a/adev/src/content/examples/animations/src/app/animations-package/reorder.component.html b/adev/src/content/examples/animations/src/app/animations-package/reorder.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/reorder.component.html
rename to adev/src/content/examples/animations/src/app/animations-package/reorder.html
diff --git a/adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts b/adev/src/content/examples/animations/src/app/animations-package/reorder.ts
similarity index 89%
rename from adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts
rename to adev/src/content/examples/animations/src/app/animations-package/reorder.ts
index 9b7c2672629..ce9652ce0bc 100644
--- a/adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts
+++ b/adev/src/content/examples/animations/src/app/animations-package/reorder.ts
@@ -4,8 +4,8 @@ import {trigger, transition, animate, query, style} from '@angular/animations';
 
 @Component({
   selector: 'app-reorder',
-  templateUrl: './reorder.component.html',
-  styleUrls: ['reorder.component.css'],
+  templateUrl: './reorder.html',
+  styleUrls: ['reorder.css'],
   animations: [
     trigger('itemAnimation', [
       transition(':enter', [
@@ -19,7 +19,7 @@ import {trigger, transition, animate, query, style} from '@angular/animations';
     ]),
   ],
 })
-export class ReorderComponent {
+export class Reorder {
   show = signal(true);
   items = ['stuff', 'things', 'cheese', 'paper', 'scissors', 'rock'];
 
diff --git a/adev/src/content/examples/animations/src/app/animations-package/stagger.component.css b/adev/src/content/examples/animations/src/app/animations-package/stagger.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/stagger.component.css
rename to adev/src/content/examples/animations/src/app/animations-package/stagger.css
diff --git a/adev/src/content/examples/animations/src/app/animations-package/stagger.component.html b/adev/src/content/examples/animations/src/app/animations-package/stagger.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/animations-package/stagger.component.html
rename to adev/src/content/examples/animations/src/app/animations-package/stagger.html
diff --git a/adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts b/adev/src/content/examples/animations/src/app/animations-package/stagger.ts
similarity index 83%
rename from adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts
rename to adev/src/content/examples/animations/src/app/animations-package/stagger.ts
index 443ca9facf3..0dac4744515 100755
--- a/adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts
+++ b/adev/src/content/examples/animations/src/app/animations-package/stagger.ts
@@ -5,8 +5,8 @@ import {trigger, transition, animate, style, query, stagger} from '@angular/anim
 
 @Component({
   selector: 'app-stagger',
-  templateUrl: 'stagger.component.html',
-  styleUrls: ['stagger.component.css'],
+  templateUrl: 'stagger.html',
+  styleUrls: ['stagger.css'],
   animations: [
     trigger('pageAnimations', [
       transition(':enter', [
@@ -18,7 +18,7 @@ import {trigger, transition, animate, style, query, stagger} from '@angular/anim
     ]),
   ],
 })
-export class StaggerComponent {
+export class Stagger {
   @HostBinding('@pageAnimations')
   items = [1, 2, 3];
 }
diff --git a/adev/src/content/examples/animations/src/app/app.component.css b/adev/src/content/examples/animations/src/app/app.css
similarity index 65%
rename from adev/src/content/examples/animations/src/app/app.component.css
rename to adev/src/content/examples/animations/src/app/app.css
index de51b7b5db4..4bf7b72fc5b 100644
--- a/adev/src/content/examples/animations/src/app/app.component.css
+++ b/adev/src/content/examples/animations/src/app/app.css
@@ -1,9 +1,9 @@
 nav a {
-  padding: .7rem;
+  padding: 0.7rem;
 }
 
 h1 {
-  margin-bottom: .3rem;
+  margin-bottom: 0.3rem;
 }
 
 form {
diff --git a/adev/src/content/examples/animations/src/app/app.component.html b/adev/src/content/examples/animations/src/app/app.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/app.component.html
rename to adev/src/content/examples/animations/src/app/app.html
diff --git a/adev/src/content/examples/animations/src/app/app.routes.ts b/adev/src/content/examples/animations/src/app/app.routes.ts
index f57ccea1211..02391238b02 100644
--- a/adev/src/content/examples/animations/src/app/app.routes.ts
+++ b/adev/src/content/examples/animations/src/app/app.routes.ts
@@ -1,72 +1,72 @@
 import {Routes} from '@angular/router';
-import {OpenClosePageComponent} from './open-close-page.component';
-import {StatusSliderPageComponent} from './status-slider-page.component';
-import {ToggleAnimationsPageComponent} from './toggle-animations-page.component';
-import {HeroListPageComponent} from './hero-list-page.component';
-import {HeroListGroupPageComponent} from './hero-list-group-page.component';
-import {HeroListEnterLeavePageComponent} from './hero-list-enter-leave-page.component';
-import {HeroListAutoCalcPageComponent} from './hero-list-auto-page.component';
-import {InsertRemoveComponent} from './insert-remove.component';
-import {QueryingComponent} from './querying.component';
-import {HomeComponent} from './home.component';
-import {AboutComponent} from './about.component';
+import {OpenClosePage} from './open-close-page';
+import {StatusSliderPage} from './status-slider-page';
+import {ToggleAnimationsPage} from './toggle-animations-page';
+import {HeroListPage} from './hero-list-page';
+import {HeroListGroupPage} from './hero-list-group-page';
+import {HeroListEnterLeavePage} from './hero-list-enter-leave-page';
+import {HeroListAutoCalcPage} from './hero-list-auto-page';
+import {InsertRemove} from './insert-remove';
+import {Querying} from './querying';
+import {Home} from './home';
+import {About} from './about';
 
 // #docregion route-animation-data
 export const routes: Routes = [
   {path: '', pathMatch: 'full', redirectTo: '/enter-leave'},
   {
     path: 'open-close',
-    component: OpenClosePageComponent,
+    component: OpenClosePage,
     data: {animation: 'openClosePage'},
   },
   {
     path: 'status',
-    component: StatusSliderPageComponent,
+    component: StatusSliderPage,
     data: {animation: 'statusPage'},
   },
   {
     path: 'toggle',
-    component: ToggleAnimationsPageComponent,
+    component: ToggleAnimationsPage,
     data: {animation: 'togglePage'},
   },
   {
     path: 'heroes',
-    component: HeroListPageComponent,
+    component: HeroListPage,
     data: {animation: 'filterPage'},
   },
   {
     path: 'hero-groups',
-    component: HeroListGroupPageComponent,
+    component: HeroListGroupPage,
     data: {animation: 'heroGroupPage'},
   },
   {
     path: 'enter-leave',
-    component: HeroListEnterLeavePageComponent,
+    component: HeroListEnterLeavePage,
     data: {animation: 'enterLeavePage'},
   },
   {
     path: 'auto',
-    component: HeroListAutoCalcPageComponent,
+    component: HeroListAutoCalcPage,
     data: {animation: 'autoPage'},
   },
   {
     path: 'insert-remove',
-    component: InsertRemoveComponent,
+    component: InsertRemove,
     data: {animation: 'insertRemovePage'},
   },
   {
     path: 'querying',
-    component: QueryingComponent,
+    component: Querying,
     data: {animation: 'queryingPage'},
   },
   {
     path: 'home',
-    component: HomeComponent,
+    component: Home,
     data: {animation: 'HomePage'},
   },
   {
     path: 'about',
-    component: AboutComponent,
+    component: About,
     data: {animation: 'AboutPage'},
   },
 ];
diff --git a/adev/src/content/examples/animations/src/app/app.component.ts b/adev/src/content/examples/animations/src/app/app.ts
similarity index 94%
rename from adev/src/content/examples/animations/src/app/app.component.ts
rename to adev/src/content/examples/animations/src/app/app.ts
index 5cf45d82f1b..a39cc1939ce 100755
--- a/adev/src/content/examples/animations/src/app/app.component.ts
+++ b/adev/src/content/examples/animations/src/app/app.ts
@@ -17,8 +17,8 @@ import {slideInAnimation} from './animations';
 // #docregion decorator, toggle-app-animations, define
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css'],
+  templateUrl: 'app.html',
+  styleUrls: ['app.css'],
   imports: [RouterLink, RouterOutlet],
   animations: [
     // #enddocregion decorator
diff --git a/adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-auto-page.ts
similarity index 74%
rename from adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-auto-page.ts
index 351a092a8ad..ba6e819d97d 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-auto-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-auto-page.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {HEROES} from './mock-heroes';
-import {HeroListAutoComponent} from './hero-list-auto.component';
+import {HeroListAuto} from './hero-list-auto';
 
 @Component({
   selector: 'app-hero-list-auto-page',
@@ -11,9 +11,9 @@ import {HeroListAutoComponent} from './hero-list-auto.component';
       <app-hero-list-auto [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-auto>
     </section>
   `,
-  imports: [HeroListAutoComponent],
+  imports: [HeroListAuto],
 })
-export class HeroListAutoCalcPageComponent {
+export class HeroListAutoCalcPage {
   heroes = HEROES.slice();
 
   onRemove(id: number) {
diff --git a/adev/src/content/examples/animations/src/app/hero-list-auto.component.html b/adev/src/content/examples/animations/src/app/hero-list-auto.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/hero-list-auto.component.html
rename to adev/src/content/examples/animations/src/app/hero-list-auto.html
diff --git a/adev/src/content/examples/animations/src/app/hero-list-auto.component.ts b/adev/src/content/examples/animations/src/app/hero-list-auto.ts
similarity index 82%
rename from adev/src/content/examples/animations/src/app/hero-list-auto.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-auto.ts
index a65e90b07d5..d2f3dd7225f 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-auto.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-auto.ts
@@ -5,8 +5,8 @@ import {Hero} from './hero';
 
 @Component({
   selector: 'app-hero-list-auto',
-  templateUrl: 'hero-list-auto.component.html',
-  styleUrls: ['./hero-list-page.component.css'],
+  templateUrl: 'hero-list-auto.html',
+  styleUrls: ['./hero-list-page.css'],
   // #docregion auto-calc
   animations: [
     trigger('shrinkOut', [
@@ -16,7 +16,7 @@ import {Hero} from './hero';
   ],
   // #enddocregion auto-calc
 })
-export class HeroListAutoComponent {
+export class HeroListAuto {
   readonly heroes = input<Hero[]>([]);
 
   @Output() remove = new EventEmitter<number>();
diff --git a/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.ts
similarity index 73%
rename from adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.ts
index 18316ab85b4..3ba98f9fd63 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-enter-leave-page.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {HEROES} from './mock-heroes';
-import {HeroListEnterLeaveComponent} from './hero-list-enter-leave.component';
+import {HeroListEnterLeave} from './hero-list-enter-leave';
 
 @Component({
   selector: 'app-hero-list-enter-leave-page',
@@ -14,9 +14,9 @@ import {HeroListEnterLeaveComponent} from './hero-list-enter-leave.component';
       ></app-hero-list-enter-leave>
     </section>
   `,
-  imports: [HeroListEnterLeaveComponent],
+  imports: [HeroListEnterLeave],
 })
-export class HeroListEnterLeavePageComponent {
+export class HeroListEnterLeavePage {
   heroes = HEROES.slice();
 
   onRemove(id: number) {
diff --git a/adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/adev/src/content/examples/animations/src/app/hero-list-enter-leave.ts
similarity index 92%
rename from adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-enter-leave.ts
index 8cb4a1015d4..8c2ed84b443 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-enter-leave.ts
@@ -17,7 +17,7 @@ import {Hero} from './hero';
       }
     </ul>
   `,
-  styleUrls: ['./hero-list-page.component.css'],
+  styleUrls: ['./hero-list-page.css'],
   // #docregion animationdef
   animations: [
     trigger('flyInOut', [
@@ -28,7 +28,7 @@ import {Hero} from './hero';
   ],
   // #enddocregion animationdef
 })
-export class HeroListEnterLeaveComponent {
+export class HeroListEnterLeave {
   readonly heroes = input<Hero[]>([]);
 
   readonly remove = output<number>();
diff --git a/adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-group-page.ts
similarity index 74%
rename from adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-group-page.ts
index 89197a7cf35..8ab757ad2a5 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-group-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-group-page.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {HEROES} from './mock-heroes';
-import {HeroListGroupsComponent} from './hero-list-groups.component';
+import {HeroListGroups} from './hero-list-groups';
 
 @Component({
   selector: 'app-hero-list-groups-page',
@@ -11,9 +11,9 @@ import {HeroListGroupsComponent} from './hero-list-groups.component';
       <app-hero-list-groups [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-groups>
     </section>
   `,
-  imports: [HeroListGroupsComponent],
+  imports: [HeroListGroups],
 })
-export class HeroListGroupPageComponent {
+export class HeroListGroupPage {
   heroes = HEROES.slice();
 
   onRemove(id: number) {
diff --git a/adev/src/content/examples/animations/src/app/hero-list-groups.component.ts b/adev/src/content/examples/animations/src/app/hero-list-groups.ts
similarity index 95%
rename from adev/src/content/examples/animations/src/app/hero-list-groups.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-groups.ts
index c18d24d566a..3aa27e693dc 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-groups.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-groups.ts
@@ -17,7 +17,7 @@ import {Hero} from './hero';
       }
     </ul>
   `,
-  styleUrls: ['./hero-list-page.component.css'],
+  styleUrls: ['./hero-list-page.css'],
   // #docregion animationdef
   animations: [
     trigger('flyInOut', [
@@ -68,7 +68,7 @@ import {Hero} from './hero';
   ],
   // #enddocregion animationdef
 })
-export class HeroListGroupsComponent {
+export class HeroListGroups {
   readonly heroes = input<Hero[]>([]);
 
   readonly remove = output<number>();
diff --git a/adev/src/content/examples/animations/src/app/hero-list-page.component.css b/adev/src/content/examples/animations/src/app/hero-list-page.css
similarity index 91%
rename from adev/src/content/examples/animations/src/app/hero-list-page.component.css
rename to adev/src/content/examples/animations/src/app/hero-list-page.css
index d06d58bf148..d5b51858b0f 100644
--- a/adev/src/content/examples/animations/src/app/hero-list-page.component.css
+++ b/adev/src/content/examples/animations/src/app/hero-list-page.css
@@ -14,8 +14,8 @@
 
 .heroes .inner {
   flex: 1;
-  background-color: #EEE;
-  margin: .5em;
+  background-color: #eee;
+  margin: 0.5em;
   padding: 0;
   border-radius: 4px;
   display: flex;
@@ -30,7 +30,7 @@
 .heroes button.inner:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
-  left: .1em;
+  left: 0.1em;
 }
 
 .heroes button.inner:active {
@@ -60,7 +60,7 @@
   padding: 0.8em 0.7em 0 0.7em;
   background-color: #405061;
   line-height: 1em;
-  margin-right: .8em;
+  margin-right: 0.8em;
   border-radius: 4px 0 0 4px;
 }
 
@@ -71,7 +71,7 @@
 
 label {
   display: block;
-  padding-bottom: .5rem;
+  padding-bottom: 0.5rem;
 }
 
 input {
diff --git a/adev/src/content/examples/animations/src/app/hero-list-page.component.html b/adev/src/content/examples/animations/src/app/hero-list-page.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/hero-list-page.component.html
rename to adev/src/content/examples/animations/src/app/hero-list-page.html
diff --git a/adev/src/content/examples/animations/src/app/hero-list-page.component.ts b/adev/src/content/examples/animations/src/app/hero-list-page.ts
similarity index 93%
rename from adev/src/content/examples/animations/src/app/hero-list-page.component.ts
rename to adev/src/content/examples/animations/src/app/hero-list-page.ts
index b6f9f1d7758..bbf7b02048c 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-page.ts
@@ -9,8 +9,8 @@ import {Hero} from './hero';
 @Component({
   // #enddocregion filter-animations
   selector: 'app-hero-list-page',
-  templateUrl: 'hero-list-page.component.html',
-  styleUrls: ['hero-list-page.component.css'],
+  templateUrl: 'hero-list-page.html',
+  styleUrls: ['hero-list-page.css'],
   // #docregion page-animations, filter-animations
   animations: [
     // #enddocregion filter-animations
@@ -46,7 +46,7 @@ import {Hero} from './hero';
     // #enddocregion  increment
   ],
 })
-export class HeroListPageComponent implements OnInit {
+export class HeroListPage implements OnInit {
   // #enddocregion filter-animations
   @HostBinding('@pageAnimations')
   public animatePage = true;
diff --git a/adev/src/content/examples/animations/src/app/hero-list.component.css b/adev/src/content/examples/animations/src/app/hero-list.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/hero-list.component.css
rename to adev/src/content/examples/animations/src/app/hero-list.css
diff --git a/adev/src/content/examples/animations/src/app/home.component.ts b/adev/src/content/examples/animations/src/app/home.component.ts
deleted file mode 100755
index 1dc6980f164..00000000000
--- a/adev/src/content/examples/animations/src/app/home.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css'],
-})
-export class HomeComponent {}
diff --git a/adev/src/content/examples/animations/src/app/home.component.css b/adev/src/content/examples/animations/src/app/home.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/home.component.css
rename to adev/src/content/examples/animations/src/app/home.css
diff --git a/adev/src/content/examples/animations/src/app/home.component.html b/adev/src/content/examples/animations/src/app/home.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/home.component.html
rename to adev/src/content/examples/animations/src/app/home.html
diff --git a/adev/src/content/examples/animations/src/app/home.ts b/adev/src/content/examples/animations/src/app/home.ts
new file mode 100755
index 00000000000..ebc72c7e2dd
--- /dev/null
+++ b/adev/src/content/examples/animations/src/app/home.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.html',
+  styleUrls: ['./home.css'],
+})
+export class Home {}
diff --git a/adev/src/content/examples/animations/src/app/insert-remove.component.css b/adev/src/content/examples/animations/src/app/insert-remove.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/insert-remove.component.css
rename to adev/src/content/examples/animations/src/app/insert-remove.css
diff --git a/adev/src/content/examples/animations/src/app/insert-remove.component.html b/adev/src/content/examples/animations/src/app/insert-remove.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/insert-remove.component.html
rename to adev/src/content/examples/animations/src/app/insert-remove.html
diff --git a/adev/src/content/examples/animations/src/app/insert-remove.component.ts b/adev/src/content/examples/animations/src/app/insert-remove.ts
similarity index 81%
rename from adev/src/content/examples/animations/src/app/insert-remove.component.ts
rename to adev/src/content/examples/animations/src/app/insert-remove.ts
index 5cbd9ae6610..ad8e26d5f29 100755
--- a/adev/src/content/examples/animations/src/app/insert-remove.component.ts
+++ b/adev/src/content/examples/animations/src/app/insert-remove.ts
@@ -12,10 +12,10 @@ import {trigger, transition, animate, style} from '@angular/animations';
     ]),
     // #enddocregion enter-leave-trigger
   ],
-  templateUrl: 'insert-remove.component.html',
-  styleUrls: ['insert-remove.component.css'],
+  templateUrl: 'insert-remove.html',
+  styleUrls: ['insert-remove.css'],
 })
-export class InsertRemoveComponent {
+export class InsertRemove {
   isShown = false;
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.css b/adev/src/content/examples/animations/src/app/native-css/auto-height.css
similarity index 65%
rename from adev/src/content/examples/animations/src/app/native-css/auto-height.component.css
rename to adev/src/content/examples/animations/src/app/native-css/auto-height.css
index 0a3f6f3b9ce..6921eb7e137 100644
--- a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.css
+++ b/adev/src/content/examples/animations/src/app/native-css/auto-height.css
@@ -17,7 +17,7 @@
   margin-top: 1em;
   font-weight: bold;
   font-size: 20px;
-  background-color: blue;
+  background: #3b82f6;
   color: #ebebeb;
   overflow: hidden;
 }
@@ -25,3 +25,12 @@
 .container.open .content {
   visibility: visible;
 }
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}
diff --git a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.html b/adev/src/content/examples/animations/src/app/native-css/auto-height.html
similarity index 69%
rename from adev/src/content/examples/animations/src/app/native-css/auto-height.component.html
rename to adev/src/content/examples/animations/src/app/native-css/auto-height.html
index db2f982ae45..fc8012c54a1 100644
--- a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.html
+++ b/adev/src/content/examples/animations/src/app/native-css/auto-height.html
@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2>Auto Height Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Open/Close</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Open/Close</button>
 
 <div class="container" [class.open]="isOpen()">
   <div class="content">
diff --git a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts b/adev/src/content/examples/animations/src/app/native-css/auto-height.ts
similarity index 61%
rename from adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/auto-height.ts
index fd9500586a6..73f0d2dae0f 100644
--- a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/auto-height.ts
@@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core';
 
 @Component({
   selector: 'app-auto-height',
-  templateUrl: 'auto-height.component.html',
-  styleUrls: ['auto-height.component.css'],
+  templateUrl: 'auto-height.html',
+  styleUrls: ['auto-height.css'],
 })
-export class AutoHeightComponent {
+export class AutoHeight {
   isOpen = signal(true);
   toggle() {
     this.isOpen.update((isOpen) => !isOpen);
diff --git a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css
rename to adev/src/content/examples/animations/src/app/native-css/increment-decrement.css
diff --git a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html
rename to adev/src/content/examples/animations/src/app/native-css/increment-decrement.html
diff --git a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts
similarity index 84%
rename from adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts
index 17d90a3a37c..bd18f66d257 100755
--- a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts
@@ -4,10 +4,10 @@ import {Component, ElementRef, OnInit, signal, viewChild} from '@angular/core';
 
 @Component({
   selector: 'app-increment-decrement',
-  templateUrl: 'increment-decrement.component.html',
-  styleUrls: ['increment-decrement.component.css'],
+  templateUrl: 'increment-decrement.html',
+  styleUrls: ['increment-decrement.css'],
 })
-export class IncrementDecrementComponent implements OnInit {
+export class IncrementDecrement implements OnInit {
   num = signal(0);
   el = viewChild<ElementRef<HTMLParagraphElement>>('el');
 
diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.css b/adev/src/content/examples/animations/src/app/native-css/insert.css
similarity index 64%
rename from adev/src/content/examples/animations/src/app/native-css/insert.component.css
rename to adev/src/content/examples/animations/src/app/native-css/insert.css
index cabb573a7eb..5a592d1ae4d 100644
--- a/adev/src/content/examples/animations/src/app/native-css/insert.component.css
+++ b/adev/src/content/examples/animations/src/app/native-css/insert.css
@@ -25,3 +25,12 @@
     transform: translateY(0);
   }
 }
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}
diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.html b/adev/src/content/examples/animations/src/app/native-css/insert.html
similarity index 69%
rename from adev/src/content/examples/animations/src/app/native-css/insert.component.html
rename to adev/src/content/examples/animations/src/app/native-css/insert.html
index 4670a27fe88..f5470c6e396 100644
--- a/adev/src/content/examples/animations/src/app/native-css/insert.component.html
+++ b/adev/src/content/examples/animations/src/app/native-css/insert.html
@@ -2,7 +2,7 @@
 <h2>Insert Element Example</h2>
 
 <nav>
-  <button type="button" (click)="toggle()">Toggle Element</button>
+  <button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 </nav>
 
 @if (isShown()) {
diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.ts b/adev/src/content/examples/animations/src/app/native-css/insert.ts
similarity index 64%
rename from adev/src/content/examples/animations/src/app/native-css/insert.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/insert.ts
index dae1f70696e..2461b1f2d68 100755
--- a/adev/src/content/examples/animations/src/app/native-css/insert.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/insert.ts
@@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core';
 
 @Component({
   selector: 'app-insert',
-  templateUrl: 'insert.component.html',
-  styleUrls: ['insert.component.css'],
+  templateUrl: 'insert.html',
+  styleUrls: ['insert.css'],
 })
-export class InsertComponent {
+export class Insert {
   isShown = signal(false);
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/native-css/open-close.component.css b/adev/src/content/examples/animations/src/app/native-css/open-close.css
similarity index 60%
rename from adev/src/content/examples/animations/src/app/native-css/open-close.component.css
rename to adev/src/content/examples/animations/src/app/native-css/open-close.css
index 7f7dc6a21d3..588f3a48c02 100644
--- a/adev/src/content/examples/animations/src/app/native-css/open-close.component.css
+++ b/adev/src/content/examples/animations/src/app/native-css/open-close.css
@@ -11,16 +11,25 @@
   font-size: 20px;
   height: 100px;
   opacity: 0.8;
-  background-color: blue;
+  background: #3b82f6;
   color: #ebebeb;
   transition-property: height, opacity, background-color, color;
   transition-duration: 1s;
 }
 
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
 .open {
   transition-duration: 0.5s;
   height: 200px;
   opacity: 1;
-  background-color: yellow;
-  color: #000000;
+  background: #475569;
+  color: #f9fafb;
 }
diff --git a/adev/src/content/examples/animations/src/app/native-css/open-close.component.html b/adev/src/content/examples/animations/src/app/native-css/open-close.html
similarity index 67%
rename from adev/src/content/examples/animations/src/app/native-css/open-close.component.html
rename to adev/src/content/examples/animations/src/app/native-css/open-close.html
index fa4bafd5ced..97b886de4ac 100644
--- a/adev/src/content/examples/animations/src/app/native-css/open-close.component.html
+++ b/adev/src/content/examples/animations/src/app/native-css/open-close.html
@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2>Open / Close Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Open/Close</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Open/Close</button>
 
 <div class="open-close-container" [class.open]="isOpen()">
   <p>The box is now {{ isOpen() ? 'Open' : 'Closed' }}!</p>
diff --git a/adev/src/content/examples/animations/src/app/native-css/open-close.component.ts b/adev/src/content/examples/animations/src/app/native-css/open-close.ts
similarity index 62%
rename from adev/src/content/examples/animations/src/app/native-css/open-close.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/open-close.ts
index 3f419af8056..e8dd8127bb9 100644
--- a/adev/src/content/examples/animations/src/app/native-css/open-close.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/open-close.ts
@@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core';
 
 @Component({
   selector: 'app-open-close',
-  templateUrl: 'open-close.component.html',
-  styleUrls: ['open-close.component.css'],
+  templateUrl: 'open-close.html',
+  styleUrls: ['open-close.css'],
 })
-export class OpenCloseComponent {
+export class OpenClose {
   isOpen = signal(true);
   toggle() {
     this.isOpen.update((isOpen) => !isOpen);
diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.css b/adev/src/content/examples/animations/src/app/native-css/remove.css
similarity index 54%
rename from adev/src/content/examples/animations/src/app/native-css/remove.component.css
rename to adev/src/content/examples/animations/src/app/native-css/remove.css
index 3ef4d075cfc..e19a63504ef 100644
--- a/adev/src/content/examples/animations/src/app/native-css/remove.component.css
+++ b/adev/src/content/examples/animations/src/app/native-css/remove.css
@@ -19,5 +19,16 @@
 .deleting {
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 500ms ease-out, transform 500ms ease-out;
+  transition:
+    opacity 500ms ease-out,
+    transform 500ms ease-out;
+}
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
 }
diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.html b/adev/src/content/examples/animations/src/app/native-css/remove.html
similarity index 68%
rename from adev/src/content/examples/animations/src/app/native-css/remove.component.html
rename to adev/src/content/examples/animations/src/app/native-css/remove.html
index 3f5970adefa..2704c07eae8 100644
--- a/adev/src/content/examples/animations/src/app/native-css/remove.component.html
+++ b/adev/src/content/examples/animations/src/app/native-css/remove.html
@@ -2,7 +2,7 @@
 <h2>Remove Element Example</h2>
 
 <nav>
-  <button type="button" (click)="toggle()">Toggle Element</button>
+  <button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 </nav>
 
 @if (isShown()) {
diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.ts b/adev/src/content/examples/animations/src/app/native-css/remove.ts
similarity index 64%
rename from adev/src/content/examples/animations/src/app/native-css/remove.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/remove.ts
index fed2e06267e..00e19f3c941 100755
--- a/adev/src/content/examples/animations/src/app/native-css/remove.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/remove.ts
@@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core';
 
 @Component({
   selector: 'app-remove',
-  templateUrl: 'remove.component.html',
-  styleUrls: ['remove.component.css'],
+  templateUrl: 'remove.html',
+  styleUrls: ['remove.css'],
 })
-export class RemoveComponent {
+export class Remove {
   isShown = signal(false);
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/native-css/reorder.component.css b/adev/src/content/examples/animations/src/app/native-css/reorder.css
similarity index 64%
rename from adev/src/content/examples/animations/src/app/native-css/reorder.component.css
rename to adev/src/content/examples/animations/src/app/native-css/reorder.css
index ac4fa6bfa9c..5ff27b08f2e 100644
--- a/adev/src/content/examples/animations/src/app/native-css/reorder.component.css
+++ b/adev/src/content/examples/animations/src/app/native-css/reorder.css
@@ -27,3 +27,12 @@
     opacity: 0;
   }
 }
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}
diff --git a/adev/src/content/examples/animations/src/app/native-css/reorder.component.html b/adev/src/content/examples/animations/src/app/native-css/reorder.html
similarity index 68%
rename from adev/src/content/examples/animations/src/app/native-css/reorder.component.html
rename to adev/src/content/examples/animations/src/app/native-css/reorder.html
index 9c65a23360f..31209dcd32b 100644
--- a/adev/src/content/examples/animations/src/app/native-css/reorder.component.html
+++ b/adev/src/content/examples/animations/src/app/native-css/reorder.html
@@ -1,6 +1,6 @@
 <!-- #docplaster -->
 <h1>Reordering List Example</h1>
-<button type="button" (click)="randomize()">Randomize</button>
+<button type="button" class="toggle-btn" (click)="randomize()">Randomize</button>
 
 <ul class="items">
   @for (item of items; track item) {
diff --git a/adev/src/content/examples/animations/src/app/native-css/reorder.component.ts b/adev/src/content/examples/animations/src/app/native-css/reorder.ts
similarity index 82%
rename from adev/src/content/examples/animations/src/app/native-css/reorder.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/reorder.ts
index 645bd7a4f15..6efe2284176 100644
--- a/adev/src/content/examples/animations/src/app/native-css/reorder.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/reorder.ts
@@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core';
 
 @Component({
   selector: 'app-reorder',
-  templateUrl: './reorder.component.html',
-  styleUrls: ['reorder.component.css'],
+  templateUrl: './reorder.html',
+  styleUrls: ['reorder.css'],
 })
-export class ReorderComponent {
+export class Reorder {
   show = signal(true);
   items = ['stuff', 'things', 'cheese', 'paper', 'scissors', 'rock'];
 
diff --git a/adev/src/content/examples/animations/src/app/native-css/stagger.component.css b/adev/src/content/examples/animations/src/app/native-css/stagger.css
similarity index 57%
rename from adev/src/content/examples/animations/src/app/native-css/stagger.component.css
rename to adev/src/content/examples/animations/src/app/native-css/stagger.css
index 7503b75673c..78d69475227 100644
--- a/adev/src/content/examples/animations/src/app/native-css/stagger.component.css
+++ b/adev/src/content/examples/animations/src/app/native-css/stagger.css
@@ -14,3 +14,12 @@
     transform: translateX(-10px);
   }
 }
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}
diff --git a/adev/src/content/examples/animations/src/app/native-css/stagger.component.html b/adev/src/content/examples/animations/src/app/native-css/stagger.html
similarity index 72%
rename from adev/src/content/examples/animations/src/app/native-css/stagger.component.html
rename to adev/src/content/examples/animations/src/app/native-css/stagger.html
index 66071bccbb3..0b0c0e607f6 100644
--- a/adev/src/content/examples/animations/src/app/native-css/stagger.component.html
+++ b/adev/src/content/examples/animations/src/app/native-css/stagger.html
@@ -1,6 +1,6 @@
 <!-- #docplaster -->
 <h1>Stagger Example</h1>
-<button type="button" (click)="refresh()">Refresh</button>
+<button type="button" class="toggle-btn" (click)="refresh()">Refresh</button>
 @if (show()) {
   <ul class="items">
     @for (item of items; track item) {
diff --git a/adev/src/content/examples/animations/src/app/native-css/stagger.component.ts b/adev/src/content/examples/animations/src/app/native-css/stagger.ts
similarity index 69%
rename from adev/src/content/examples/animations/src/app/native-css/stagger.component.ts
rename to adev/src/content/examples/animations/src/app/native-css/stagger.ts
index 8c9fc07a2a9..fd971dfcc40 100644
--- a/adev/src/content/examples/animations/src/app/native-css/stagger.component.ts
+++ b/adev/src/content/examples/animations/src/app/native-css/stagger.ts
@@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core';
 
 @Component({
   selector: 'app-stagger',
-  templateUrl: './stagger.component.html',
-  styleUrls: ['stagger.component.css'],
+  templateUrl: './stagger.html',
+  styleUrls: ['stagger.css'],
 })
-export class StaggerComponent {
+export class Stagger {
   show = signal(true);
   items = [1, 2, 3];
 
diff --git a/adev/src/content/examples/animations/src/app/open-close-page.component.ts b/adev/src/content/examples/animations/src/app/open-close-page.ts
similarity index 78%
rename from adev/src/content/examples/animations/src/app/open-close-page.component.ts
rename to adev/src/content/examples/animations/src/app/open-close-page.ts
index 30ea224c68a..bcac44e38fe 100755
--- a/adev/src/content/examples/animations/src/app/open-close-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/open-close-page.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {OpenCloseComponent} from './open-close.component';
+import {OpenClose} from './open-close';
 
 @Component({
   selector: 'app-open-close-page',
@@ -12,9 +12,9 @@ import {OpenCloseComponent} from './open-close.component';
       <app-open-close [logging]="logging"></app-open-close>
     </section>
   `,
-  imports: [OpenCloseComponent],
+  imports: [OpenClose],
 })
-export class OpenClosePageComponent {
+export class OpenClosePage {
   logging = false;
 
   toggleLogging() {
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.1.html b/adev/src/content/examples/animations/src/app/open-close.1.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/open-close.component.1.html
rename to adev/src/content/examples/animations/src/app/open-close.1.html
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.1.ts b/adev/src/content/examples/animations/src/app/open-close.1.ts
similarity index 93%
rename from adev/src/content/examples/animations/src/app/open-close.component.1.ts
rename to adev/src/content/examples/animations/src/app/open-close.1.ts
index 735f8141aef..32cad8301dd 100644
--- a/adev/src/content/examples/animations/src/app/open-close.component.1.ts
+++ b/adev/src/content/examples/animations/src/app/open-close.1.ts
@@ -45,8 +45,8 @@ import {
     ]),
     // #enddocregion trigger
   ],
-  templateUrl: 'open-close.component.html',
-  styleUrls: ['open-close.component.css'],
+  templateUrl: 'open-close.html',
+  styleUrls: ['open-close.css'],
 })
 export class OpenCloseKeyframeComponent {
   isOpen = false;
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.2.html b/adev/src/content/examples/animations/src/app/open-close.2.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/open-close.component.2.html
rename to adev/src/content/examples/animations/src/app/open-close.2.html
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.2.ts b/adev/src/content/examples/animations/src/app/open-close.2.ts
similarity index 86%
rename from adev/src/content/examples/animations/src/app/open-close.component.2.ts
rename to adev/src/content/examples/animations/src/app/open-close.2.ts
index 68ccda26ff4..f2f4429114c 100644
--- a/adev/src/content/examples/animations/src/app/open-close.component.2.ts
+++ b/adev/src/content/examples/animations/src/app/open-close.2.ts
@@ -12,8 +12,8 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
     ]),
   ],
   // #enddocregion trigger-boolean
-  templateUrl: 'open-close.component.2.html',
-  styleUrls: ['open-close.component.css'],
+  templateUrl: 'open-close.2.html',
+  styleUrls: ['open-close.css'],
 })
 export class OpenCloseBooleanComponent {
   isOpen = false;
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.3.html b/adev/src/content/examples/animations/src/app/open-close.3.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/open-close.component.3.html
rename to adev/src/content/examples/animations/src/app/open-close.3.html
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.3.ts b/adev/src/content/examples/animations/src/app/open-close.3.ts
similarity index 90%
rename from adev/src/content/examples/animations/src/app/open-close.component.3.ts
rename to adev/src/content/examples/animations/src/app/open-close.3.ts
index 60befac7688..c05c20f2b5f 100755
--- a/adev/src/content/examples/animations/src/app/open-close.component.3.ts
+++ b/adev/src/content/examples/animations/src/app/open-close.3.ts
@@ -20,8 +20,8 @@ import {transitionAnimation} from './animations';
       ]),
     ]),
   ],
-  templateUrl: 'open-close.component.html',
-  styleUrls: ['open-close.component.css'],
+  templateUrl: 'open-close.html',
+  styleUrls: ['open-close.css'],
 })
 // #enddocregion reusable
 export class OpenCloseBooleanComponent {
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.4.html b/adev/src/content/examples/animations/src/app/open-close.4.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/open-close.component.4.html
rename to adev/src/content/examples/animations/src/app/open-close.4.html
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.4.ts b/adev/src/content/examples/animations/src/app/open-close.4.ts
similarity index 89%
rename from adev/src/content/examples/animations/src/app/open-close.component.4.ts
rename to adev/src/content/examples/animations/src/app/open-close.4.ts
index ef428acae4b..e38b7eb6d82 100755
--- a/adev/src/content/examples/animations/src/app/open-close.component.4.ts
+++ b/adev/src/content/examples/animations/src/app/open-close.4.ts
@@ -7,8 +7,8 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
 @Component({
   // #enddocregion toggle-animation
   selector: 'app-open-close-toggle',
-  templateUrl: 'open-close.component.4.html',
-  styleUrls: ['open-close.component.css'],
+  templateUrl: 'open-close.4.html',
+  styleUrls: ['open-close.css'],
   // #docregion toggle-animation
   animations: [
     trigger('childAnimation', [
@@ -35,7 +35,7 @@ import {trigger, transition, state, animate, style} from '@angular/animations';
     ]),
   ],
 })
-export class OpenCloseChildComponent {
+export class OpenCloseChild {
   isDisabled = false;
   isOpen = false;
   // #enddocregion toggle-animation
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.css b/adev/src/content/examples/animations/src/app/open-close.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/open-close.component.css
rename to adev/src/content/examples/animations/src/app/open-close.css
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.html b/adev/src/content/examples/animations/src/app/open-close.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/open-close.component.html
rename to adev/src/content/examples/animations/src/app/open-close.html
diff --git a/adev/src/content/examples/animations/src/app/open-close.component.ts b/adev/src/content/examples/animations/src/app/open-close.ts
similarity index 95%
rename from adev/src/content/examples/animations/src/app/open-close.component.ts
rename to adev/src/content/examples/animations/src/app/open-close.ts
index c8706636613..886b8f17382 100755
--- a/adev/src/content/examples/animations/src/app/open-close.component.ts
+++ b/adev/src/content/examples/animations/src/app/open-close.ts
@@ -52,11 +52,11 @@ import {trigger, transition, state, animate, style, AnimationEvent} from '@angul
     ]),
   ],
   // #enddocregion trigger-wildcard1
-  templateUrl: 'open-close.component.html',
-  styleUrls: ['open-close.component.css'],
+  templateUrl: 'open-close.html',
+  styleUrls: ['open-close.css'],
 })
 // #docregion events
-export class OpenCloseComponent {
+export class OpenClose {
   // #enddocregion events1, events, component
   logging = input(false);
   // #docregion component
diff --git a/adev/src/content/examples/animations/src/app/querying.component.css b/adev/src/content/examples/animations/src/app/querying.css
similarity index 89%
rename from adev/src/content/examples/animations/src/app/querying.component.css
rename to adev/src/content/examples/animations/src/app/querying.css
index 3ee3c939363..b8266ee3143 100644
--- a/adev/src/content/examples/animations/src/app/querying.component.css
+++ b/adev/src/content/examples/animations/src/app/querying.css
@@ -12,7 +12,7 @@ section > * {
   align-items: center;
   border-radius: 4px;
   color: black;
-  background-color: #DDD;
+  background-color: #ddd;
 }
 
 .hero .badge {
@@ -21,7 +21,7 @@ section > * {
   color: white;
   padding: 0.5rem;
   background-color: #3d5157;
-  margin-right: .8em;
+  margin-right: 0.8em;
   border-radius: 4px 0 0 4px;
   align-self: stretch;
 }
diff --git a/adev/src/content/examples/animations/src/app/querying.component.ts b/adev/src/content/examples/animations/src/app/querying.ts
similarity index 97%
rename from adev/src/content/examples/animations/src/app/querying.component.ts
rename to adev/src/content/examples/animations/src/app/querying.ts
index db7ae216821..348b7523b33 100755
--- a/adev/src/content/examples/animations/src/app/querying.component.ts
+++ b/adev/src/content/examples/animations/src/app/querying.ts
@@ -34,7 +34,7 @@ import {HEROES} from './mock-heroes';
       </section>
     }
   `,
-  styleUrls: ['./querying.component.css'],
+  styleUrls: ['./querying.css'],
   animations: [
     trigger('query', [
       transition(':enter', [
@@ -83,7 +83,7 @@ import {HEROES} from './mock-heroes';
     ]),
   ],
 })
-export class QueryingComponent {
+export class Querying {
   toggleDisabled = false;
   show = true;
   hero = HEROES[0];
diff --git a/adev/src/content/examples/animations/src/app/status-slider-page.component.ts b/adev/src/content/examples/animations/src/app/status-slider-page.ts
similarity index 60%
rename from adev/src/content/examples/animations/src/app/status-slider-page.component.ts
rename to adev/src/content/examples/animations/src/app/status-slider-page.ts
index 2ff1edac235..f58f3572336 100755
--- a/adev/src/content/examples/animations/src/app/status-slider-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/status-slider-page.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {StatusSliderComponent} from './status-slider.component';
+import {StatusSlider} from './status-slider';
 
 @Component({
   selector: 'app-status-slider-page',
@@ -9,6 +9,6 @@ import {StatusSliderComponent} from './status-slider.component';
       <app-status-slider></app-status-slider>
     </section>
   `,
-  imports: [StatusSliderComponent],
+  imports: [StatusSlider],
 })
-export class StatusSliderPageComponent {}
+export class StatusSliderPage {}
diff --git a/adev/src/content/examples/animations/src/app/status-slider.component.css b/adev/src/content/examples/animations/src/app/status-slider.css
similarity index 100%
rename from adev/src/content/examples/animations/src/app/status-slider.component.css
rename to adev/src/content/examples/animations/src/app/status-slider.css
diff --git a/adev/src/content/examples/animations/src/app/status-slider.component.html b/adev/src/content/examples/animations/src/app/status-slider.html
similarity index 100%
rename from adev/src/content/examples/animations/src/app/status-slider.component.html
rename to adev/src/content/examples/animations/src/app/status-slider.html
diff --git a/adev/src/content/examples/animations/src/app/status-slider.component.ts b/adev/src/content/examples/animations/src/app/status-slider.ts
similarity index 92%
rename from adev/src/content/examples/animations/src/app/status-slider.component.ts
rename to adev/src/content/examples/animations/src/app/status-slider.ts
index 33e480b0f43..f97f810295b 100755
--- a/adev/src/content/examples/animations/src/app/status-slider.component.ts
+++ b/adev/src/content/examples/animations/src/app/status-slider.ts
@@ -3,8 +3,8 @@ import {trigger, transition, state, animate, style, keyframes} from '@angular/an
 
 @Component({
   selector: 'app-status-slider',
-  templateUrl: 'status-slider.component.html',
-  styleUrls: ['status-slider.component.css'],
+  templateUrl: 'status-slider.html',
+  styleUrls: ['status-slider.css'],
   animations: [
     trigger('slideStatus', [
       state('inactive', style({backgroundColor: 'blue'})),
@@ -48,7 +48,7 @@ import {trigger, transition, state, animate, style, keyframes} from '@angular/an
     ]),
   ],
 })
-export class StatusSliderComponent {
+export class StatusSlider {
   status: 'active' | 'inactive' = 'inactive';
 
   toggle() {
diff --git a/adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts b/adev/src/content/examples/animations/src/app/toggle-animations-page.ts
similarity index 61%
rename from adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts
rename to adev/src/content/examples/animations/src/app/toggle-animations-page.ts
index b7da85ef353..c8f0930c6a0 100755
--- a/adev/src/content/examples/animations/src/app/toggle-animations-page.component.ts
+++ b/adev/src/content/examples/animations/src/app/toggle-animations-page.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {OpenCloseChildComponent} from './open-close.component.4';
+import {OpenCloseChild} from './open-close.4';
 
 @Component({
   selector: 'app-toggle-animations-child-page',
@@ -10,6 +10,6 @@ import {OpenCloseChildComponent} from './open-close.component.4';
       <app-open-close-toggle></app-open-close-toggle>
     </section>
   `,
-  imports: [OpenCloseChildComponent],
+  imports: [OpenCloseChild],
 })
-export class ToggleAnimationsPageComponent {}
+export class ToggleAnimationsPage {}
diff --git a/adev/src/content/examples/animations/src/main.ts b/adev/src/content/examples/animations/src/main.ts
index a48343eb518..2a4aeb3a190 100755
--- a/adev/src/content/examples/animations/src/main.ts
+++ b/adev/src/content/examples/animations/src/main.ts
@@ -1,5 +1,5 @@
 import {bootstrapApplication} from '@angular/platform-browser';
-import {AppComponent} from './app/app.component';
+import {AppComponent} from './app/app';
 import {appConfig} from './app/app.config';
 
 bootstrapApplication(AppComponent, appConfig);
diff --git a/adev/src/content/guide/animations/complex-sequences.md b/adev/src/content/guide/animations/complex-sequences.md
index ddd3fe3899d..2b0aab5cf64 100644
--- a/adev/src/content/guide/animations/complex-sequences.md
+++ b/adev/src/content/guide/animations/complex-sequences.md
@@ -54,7 +54,7 @@ The following example demonstrates how to use the `query()` and `stagger()` func
 - Use `stagger()` to delay each animation by 30 milliseconds
 - Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="page-animations"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="page-animations"/>
 
 ## Parallel animation using group() function
 
@@ -67,7 +67,7 @@ HELPFUL: The [`group()`](api/animations/group) function is used to group animati
 
 The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel.
 
-<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" region="animationdef"/>
+<docs-code header="hero-list-groups.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.ts" region="animationdef"/>
 
 ## Sequential vs. parallel animations
 
@@ -91,11 +91,11 @@ The heroes list gradually re-enters the page as you delete each letter in the fi
 
 The HTML template contains a trigger called `filterAnimation`.
 
-<docs-code header="hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" region="filter-animations" language="angular-html"/>
+<docs-code header="hero-list-page.html" path="adev/src/content/examples/animations/src/app/hero-list-page.html" region="filter-animations" language="angular-html"/>
 
 The `filterAnimation` in the component's decorator contains three transitions.
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="filter-animations"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="filter-animations"/>
 
 The code in this example performs the following tasks:
 
diff --git a/adev/src/content/guide/animations/css.md b/adev/src/content/guide/animations/css.md
index a88a32ef70f..8d08ff0e588 100644
--- a/adev/src/content/guide/animations/css.md
+++ b/adev/src/content/guide/animations/css.md
@@ -52,10 +52,10 @@ Similarly, you can use `transition-duration`, `transition-delay`, and `transitio
 
 Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. Here's an example:
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
 </docs-code-multifile>
 
 ## Transition and Triggers
@@ -64,10 +64,10 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p
 
 You can use css-grid to animate to auto height.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css"  />
 </docs-code-multifile>
 
 If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -76,18 +76,18 @@ If you don't have to worry about supporting all browsers, you can also check out
 
 You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
+    <docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
+    <docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
+    <docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css"  />
 </docs-code-multifile>
 
 Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
+    <docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
+    <docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
+    <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
 </docs-code-multifile>
 
 For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -96,10 +96,10 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and
 
 Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
 </docs-code-multifile>
 
 ### Disabling an animation or all animations
@@ -147,10 +147,10 @@ Animations are often more complicated than just a simple fade in or fade out. Yo
 
 One common effect is to stagger the animations of each item in a list to create a cascade effect. This can be accomplished by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
 </docs-code-multifile>
 
 ### Parallel Animations
@@ -171,10 +171,10 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu
 
 Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example below.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
 </docs-code-multifile>
 
 ## Programmatic control of animations
diff --git a/adev/src/content/guide/animations/migration.md b/adev/src/content/guide/animations/migration.md
index 69d0b479654..bf2cebbd8ce 100644
--- a/adev/src/content/guide/animations/migration.md
+++ b/adev/src/content/guide/animations/migration.md
@@ -38,7 +38,7 @@ The animations package allowed you to define various states using the [`state()`
 
 #### With Animations Package
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="state1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
 
 This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
 
@@ -69,17 +69,17 @@ The animations package required specifying triggers using the `trigger()` functi
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.css"/>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.css"/>
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
 </docs-code-multifile>
 
 ## Transition and Triggers
@@ -97,19 +97,19 @@ The animations package offers the ability to animate things that have been histo
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css" />
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.css" />
 </docs-code-multifile>
 
 You can use css-grid to animate to auto height.
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css"  />
 </docs-code-multifile>
 
 If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -121,29 +121,25 @@ The animations package offered the previously mentioned pattern matching for ent
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts" />
-    <docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html" />
-    <docs-code header="insert-remove.component.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css" />
+    <docs-code header="insert-remove.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.ts" />
+    <docs-code header="insert-remove.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.html" />
+    <docs-code header="insert-remove.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-Here's how the same thing can be accomplished without the animations package using `animate.enter`.
-
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
+    <docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
+    <docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
+    <docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css"  />
 </docs-code-multifile>
 
 #### With Native CSS
 
-Use `animate.leave` to animate elements as they leave the view, which will apply the specified CSS classes to the element as it leaves the view.
-
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
+    <docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
+    <docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
+    <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
 </docs-code-multifile>
 
 For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -155,17 +151,17 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
 </docs-code-multifile>
 
 ### Parent / Child Animations
@@ -226,17 +222,17 @@ The `stagger()` function allowed you to delay the animation of each item in a li
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.css" />
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
 </docs-code-multifile>
 
 ### Parallel Animations
@@ -260,17 +256,17 @@ Items reordering in a list works out of the box using the previously described t
 #### With Animations Package<
 
 <docs-code-multifile>
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.css" />
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
 </docs-code-multifile>
 
 ## Migrating usages of AnimationPlayer
diff --git a/adev/src/content/guide/animations/overview.md b/adev/src/content/guide/animations/overview.md
index 04981eaa651..9871859ffc1 100644
--- a/adev/src/content/guide/animations/overview.md
+++ b/adev/src/content/guide/animations/overview.md
@@ -52,7 +52,7 @@ For `NgModule` based applications import `BrowserAnimationsModule`, which introd
 <docs-step title="Importing animation functions into component files">
 If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
 
-<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" region="imports"/>
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="imports"/>
 
 See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide.
 
@@ -61,7 +61,7 @@ See all [available animation functions](guide/legacy-animations#animations-api-s
 In the component file, add a metadata property called `animations:` within the `@Component()` decorator.
 You put the trigger that defines an animation within the `animations` metadata property.
 
-<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" region="decorator"/>
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="decorator"/>
 </docs-step>
 </docs-workflow>
 
@@ -84,7 +84,7 @@ Run the following command in terminal to generate the component:
 ng g component open-close
 ```
 
-This will create the component at `src/app/open-close.component.ts`.
+This will create the component at `src/app/open-close.ts`.
 
 ### Animation state and styles
 
@@ -99,11 +99,11 @@ Let's see how Angular's [`state()`](api/animations/state) function works with th
 In this code snippet, multiple style attributes are set at the same time for the state.
 In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="state1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
 
 In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="state2"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state2"/>
 
 ### Transitions and timing
 
@@ -171,7 +171,7 @@ HELPFUL: See the Material Design website's topic on [Natural easing curves](http
 
 This example provides a state transition from `open` to `closed` with a 1-second transition between states.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="transition1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition1"/>
 
 In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional.
 Within the transition, `animate()` specifies how long the transition takes.
@@ -179,7 +179,7 @@ In this case, the state change from `open` to `closed` takes 1 second, expressed
 
 This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="transition2"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition2"/>
 
 HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
 
@@ -212,7 +212,7 @@ However, it's possible for multiple triggers to be active at once.
 Animations are defined in the metadata of the component that controls the HTML element to be animated.
 Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="component"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
 
 When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol.
 Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
@@ -225,7 +225,7 @@ The animation is executed or triggered when the expression value changes to a ne
 
 The following code snippet binds the trigger to the value of the `isOpen` property.
 
-<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" region="trigger"/>
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
 
 In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change.
 Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
@@ -242,9 +242,9 @@ In the HTML template file, use the trigger name to attach the defined animations
 Here are the code files discussed in the transition example.
 
 <docs-code-multifile>
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="component"/>
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" region="trigger"/>
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/open-close.css"/>
 </docs-code-multifile>
 
 ### Summary
diff --git a/adev/src/content/guide/animations/reusable-animations.md b/adev/src/content/guide/animations/reusable-animations.md
index 350aaa4b4a4..c2fee0af08c 100644
--- a/adev/src/content/guide/animations/reusable-animations.md
+++ b/adev/src/content/guide/animations/reusable-animations.md
@@ -23,7 +23,7 @@ For example, the following snippet exports the animation `trigger`.
 From this point, you can import reusable animation variables in your component class.
 For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" region="reusable"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.3.ts" region="reusable"/>
 
 ## More on Angular animations
 
diff --git a/adev/src/content/guide/animations/transition-and-triggers.md b/adev/src/content/guide/animations/transition-and-triggers.md
index 1856a2e2493..dc5b9167e52 100644
--- a/adev/src/content/guide/animations/transition-and-triggers.md
+++ b/adev/src/content/guide/animations/transition-and-triggers.md
@@ -23,11 +23,11 @@ Instead of defining each state-to-state transition pair, any transition to `clos
 
 This allows the addition of new states without having to include separate transitions for each one.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="trigger-wildcard1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="trigger-wildcard1"/>
 
 Use a double arrow syntax to specify state-to-state transitions in both directions.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="trigger-wildcard2"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="trigger-wildcard2"/>
 
 ### Use wildcard state with multiple transition states
 
@@ -37,7 +37,7 @@ If the button can change from `open` to either `closed` or something like `inPro
 
 <img alt="wildcard state with 3 states" src="assets/images/guide/animations/wildcard-3-states.png">
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="trigger-transition"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="trigger-transition"/>
 
 The `* => *` transition applies when any change between two states takes place.
 
@@ -52,7 +52,7 @@ To do this, list the more specific transitions _before_ `* => *`.
 Use the wildcard `*` with a style to tell the animation to use whatever the current style value is, and animate with that.
 Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="transition4"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition4"/>
 
 ### Void state
 
@@ -76,7 +76,7 @@ Add a new behavior:
 - When you add a hero to the list of heroes, it appears to fly onto the page from the left
 - When you remove a hero from the list, it appears to fly out to the right
 
-<docs-code header="hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" region="animationdef"/>
+<docs-code header="hero-list-enter-leave.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.ts" region="animationdef"/>
 
 In the preceding code, you applied the `void` state when the HTML element isn't attached to a view.
 
@@ -105,11 +105,11 @@ As a rule of thumb consider that any element being added to the DOM by Angular p
 This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`.
 The HTML template contains the following code.
 
-<docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" region="insert-remove"/>
+<docs-code header="insert-remove.html" path="adev/src/content/examples/animations/src/app/insert-remove.html" region="insert-remove"/>
 
 In the component file, the `:enter` transition sets an initial opacity of 0. It then animates it to change that opacity to 1 as the element is inserted into the view.
 
-<docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" region="enter-leave-trigger"/>
+<docs-code header="insert-remove.ts" path="adev/src/content/examples/animations/src/app/insert-remove.ts" region="enter-leave-trigger"/>
 
 Note that this example doesn't need to use [`state()`](api/animations/state).
 
@@ -121,13 +121,13 @@ Use these to kick off a transition when a numeric value has increased or decreas
 HELPFUL: The following example uses `query()` and `stagger()` methods.
 For more information on these methods, see the [complex sequences](guide/legacy-animations/complex-sequences) page.
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="increment"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="increment"/>
 
 ## Boolean values in transitions
 
 If a trigger contains a Boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`.
 
-<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" region="trigger-boolean"/>
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.2.html" region="trigger-boolean"/>
 
 In the code snippet above, the HTML template binds a `<div>` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`.
 This pattern is an alternative to the practice of creating two named states like `open` and `close`.
@@ -136,7 +136,7 @@ Inside the `@Component` metadata under the `animations:` property, when the stat
 In this case, the animation uses whatever height the element already had before the animation started.
 When the element is `closed`, the element gets animated to a height of 0, which makes it invisible.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" region="trigger-boolean"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.2.ts" region="trigger-boolean"/>
 
 ## Multiple animation triggers
 
@@ -156,8 +156,8 @@ When true, the `@.disabled` binding prevents all animations from rendering.
 The following code sample shows how to use this feature.
 
 <docs-code-multifile>
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" region="toggle-animation"/>
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" region="toggle-animation" language="typescript"/>
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.4.html" region="toggle-animation"/>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.4.ts" region="toggle-animation" language="typescript"/>
 </docs-code-multifile>
 
 When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off.
@@ -177,7 +177,7 @@ Those elements can still animate.
 
 To turn off all animations for an Angular application, place the `@.disabled` host binding on the topmost Angular component.
 
-<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" region="toggle-app-animations"/>
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="toggle-app-animations"/>
 
 HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E\) testing.
 
@@ -186,12 +186,12 @@ HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E
 The animation `trigger()` function emits _callbacks_ when it starts and when it finishes.
 The following example features a component that contains an `openClose` trigger.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="events1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="events1"/>
 
 In the HTML template, the animation event is passed back via `$event`, as `@triggerName.start` and `@triggerName.done`, where `triggerName` is the name of the trigger being used.
 In this example, the trigger `openClose` appears as follows.
 
-<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" region="callbacks"/>
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.3.html" region="callbacks"/>
 
 A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup.
 For example, an **InProgress** button can be set up to have its own looping animation while the backend system operation finishes.
@@ -204,7 +204,7 @@ An animation can influence an end user to _perceive_ the operation as faster, ev
 Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console.
 The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="events"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="events"/>
 
 ## Keyframes
 
@@ -217,7 +217,7 @@ For example, the button, instead of fading, could change color several times ove
 
 The code for this color change might look like this.
 
-<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" region="keyframes"/>
+<docs-code header="status-slider.ts" path="adev/src/content/examples/animations/src/app/status-slider.ts" region="keyframes"/>
 
 ### Offset
 
@@ -233,7 +233,7 @@ Specifying an offset of 0.8 for the middle transition in the preceding example m
 
 The code with offsets specified would be as follows.
 
-<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" region="keyframesWithOffsets"/>
+<docs-code header="status-slider.ts" path="adev/src/content/examples/animations/src/app/status-slider.ts" region="keyframesWithOffsets"/>
 
 You can combine keyframes with `duration`, `delay`, and `easing` within a single animation.
 
@@ -250,7 +250,7 @@ Here's an example of using keyframes to create a pulse effect:
 
 The code snippet for this animation might look like this.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" region="trigger"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.1.ts" region="trigger"/>
 
 ### Animatable properties and units
 
@@ -285,7 +285,7 @@ In these cases, you can use a special wildcard `*` property value under `style()
 The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page.
 The animation takes whatever height the element has before it leaves, and animates from that height to zero.
 
-<docs-code header="hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" region="auto-calc"/>
+<docs-code header="hero-list-auto.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.ts" region="auto-calc"/>
 
 ### Keyframes summary
 
diff --git a/adev/src/content/guide/http/interceptors.md b/adev/src/content/guide/http/interceptors.md
index cb8ae2d7c57..5561365175b 100644
--- a/adev/src/content/guide/http/interceptors.md
+++ b/adev/src/content/guide/http/interceptors.md
@@ -45,7 +45,7 @@ In order for this interceptor to actually intercept requests, you must configure
 You declare the set of interceptors to use when configuring `HttpClient` through dependency injection, by using the `withInterceptors` feature:
 
 ```ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))],
 });
 ```
@@ -275,7 +275,7 @@ export class LoggingInterceptor implements HttpInterceptor {
 DI-based interceptors are configured through a dependency injection multi-provider:
 
 ```ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideHttpClient(
       // DI-based interceptors must be explicitly enabled.
diff --git a/adev/src/content/guide/http/making-requests.md b/adev/src/content/guide/http/making-requests.md
index da3792294fb..23a3d24ead0 100644
--- a/adev/src/content/guide/http/making-requests.md
+++ b/adev/src/content/guide/http/making-requests.md
@@ -659,7 +659,7 @@ import { AsyncPipe } from '@angular/common';
     }
   `,
 })
-export class UserProfileComponent {
+export class UserProfile {
   userId = input.required<string>();
   user$!: Observable<User>;
 
diff --git a/adev/src/content/guide/ssr.md b/adev/src/content/guide/ssr.md
index d1b38b91434..27f9daf6d56 100644
--- a/adev/src/content/guide/ssr.md
+++ b/adev/src/content/guide/ssr.md
@@ -71,11 +71,11 @@ When using the [App shell pattern](ecosystem/service-workers/app-shell), you mus
 
 ```typescript
 import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr';
-import {AppShellComponent} from './app-shell/app-shell.component';
+import {AppShell} from './app-shell';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShellComponent)),
+    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell)),
     // ... other providers ...
   ],
 };
@@ -433,7 +433,7 @@ By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contai
 import {bootstrapApplication} from '@angular/platform-browser';
 import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideClientHydration(
       withHttpTransferCacheOptions({
@@ -516,7 +516,7 @@ import {
   withNoHttpTransferCache,
 } from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withNoHttpTransferCache())],
 });
 ```
@@ -532,7 +532,7 @@ import {
   withHttpTransferCacheOptions,
 } from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideClientHydration(
       withHttpTransferCacheOptions({