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.

adev/src/content/examples/animations/src/app/about.component.ts

@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-about',
-  templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css'],
-})
-export class AboutComponent {}

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

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

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() {

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

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() {

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() {

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'];
 

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

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 {

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

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

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

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

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

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

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

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

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 {

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;

adev/src/content/examples/animations/src/app/home.component.ts

@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css'],
-})
-export class HomeComponent {}

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

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() {

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

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">

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

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

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

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()) {

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() {

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

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>

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

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

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()) {

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() {

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

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

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'];
 

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

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

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

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() {

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;

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;

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 {

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

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

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

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

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

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() {

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

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

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:
 

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

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

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

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
 

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
 

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.

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

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