diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
index d2ef8d59a23..98835fee790 100644
--- a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +24,24 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   constructor() {
diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
index ccf31cc2cd3..b0b74b8e2f1 100644
--- a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,23 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +25,25 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   themeToggle = false;
@@ -33,18 +70,18 @@ export class ExampleComponent implements OnInit {
   }
 
   // Check/uncheck the toggle and update the theme based on isDark
-  initializeDarkTheme(isDark) {
+  initializeDarkTheme(isDark: boolean) {
     this.themeToggle = isDark;
     this.toggleDarkTheme(isDark);
   }
 
   // Listen for the toggle check/uncheck to toggle the dark theme
-  toggleChange(ev) {
-    this.toggleDarkTheme(ev.detail.checked);
+  toggleChange(event: CustomEvent) {
+    this.toggleDarkTheme(event.detail.checked);
   }
 
   // Add or remove the "dark" class on the document body
-  toggleDarkTheme(shouldAdd) {
+  toggleDarkTheme(shouldAdd: boolean) {
     document.body.classList.toggle('dark', shouldAdd);
   }
 }
diff --git a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md
index 25b522af5b2..fd89be9959a 100644
--- a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md
index 25b522af5b2..fd89be9959a 100644
--- a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md
index ed20c4b5d11..82f5028fa39 100644
--- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,23 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +25,25 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   paletteToggle = false;
@@ -33,18 +70,18 @@ export class ExampleComponent implements OnInit {
   }
 
   // Check/uncheck the toggle and update the palette based on isDark
-  initializeDarkPalette(isDark) {
+  initializeDarkPalette(isDark: boolean) {
     this.paletteToggle = isDark;
     this.toggleDarkPalette(isDark);
   }
 
   // Listen for the toggle check/uncheck to toggle the dark palette
-  toggleChange(ev) {
-    this.toggleDarkPalette(ev.detail.checked);
+  toggleChange(event: CustomEvent) {
+    this.toggleDarkPalette(event.detail.checked);
   }
 
   // Add or remove the "ion-palette-dark" class on the html element
-  toggleDarkPalette(shouldAdd) {
+  toggleDarkPalette(shouldAdd: boolean) {
     document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
   }
 }
diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md
index ebcbdbcb476..9e7539a2e9d 100644
--- a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md
@@ -1,5 +1,23 @@
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -7,6 +25,25 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    FormsModule,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent implements OnInit {
   darkPaletteToggle = false;
@@ -39,34 +76,34 @@ export class ExampleComponent implements OnInit {
   }
 
   // Check/uncheck the toggle and update the palette based on isDark
-  initializeDarkPalette(isDark) {
+  initializeDarkPalette(isDark: boolean) {
     this.darkPaletteToggle = isDark;
     this.toggleDarkPalette(isDark);
   }
 
   // Check/uncheck the toggle and update the palette based on isHighContrast
-  initializeHighContrastPalette(isHighContrast) {
+  initializeHighContrastPalette(isHighContrast: boolean) {
     this.highContrastPaletteToggle = isHighContrast;
     this.toggleHighContrastPalette(isHighContrast);
   }
 
   // Listen for the toggle check/uncheck to toggle the dark palette
-  darkPaletteToggleChange(ev) {
-    this.toggleDarkPalette(ev.detail.checked);
+  darkPaletteToggleChange(event: CustomEvent) {
+    this.toggleDarkPalette(event.detail.checked);
   }
 
   // Listen for the toggle check/uncheck to toggle the high contrast palette
-  highContrastPaletteToggleChange(ev) {
-    this.toggleHighContrastPalette(ev.detail.checked);
+  highContrastPaletteToggleChange(event: CustomEvent) {
+    this.toggleHighContrastPalette(event.detail.checked);
   }
 
   // Add or remove the "ion-palette-dark" class on the html element
-  toggleDarkPalette(shouldAdd) {
+  toggleDarkPalette(shouldAdd: boolean) {
     document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
   }
 
   // Add or remove the "ion-palette-high-contrast" class on the html element
-  toggleHighContrastPalette(shouldAdd) {
+  toggleHighContrastPalette(shouldAdd: boolean) {
     document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd);
   }
 }
diff --git a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md
index 25b522af5b2..fd89be9959a 100644
--- a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md
index 25b522af5b2..fd89be9959a 100644
--- a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md
+++ b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md
@@ -1,5 +1,22 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonRange,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons';
@@ -8,6 +25,23 @@ import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonRange,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  ],
 })
 export class ExampleComponent {
   constructor() {