docs(angular): update playgrounds with existing angular component file to add standalone imports

Author: brandyscarney

static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md

@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel]
 })
 export class ExampleComponent {}
 ```

static/usage/v7/accordion/listen-changes/angular/example_component_ts.md

@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel]
 })
 export class ExampleComponent {
   private values: string[] = ['first', 'second', 'third'];

static/usage/v7/accordion/toggle/angular/example_component_ts.md

@@ -1,10 +1,12 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular/standalone';
 import { IonAccordionGroup } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel]
 })
 export class ExampleComponent {
   @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;

static/usage/v7/action-sheet/controller/angular/example_component_ts.md

@@ -1,11 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton } from '@ionic/angular/standalone';
 
 import { ActionSheetController } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonButton]
 })
 export class ExampleComponent {
   constructor(private actionSheetCtrl: ActionSheetController) {}

static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md

@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonActionSheet, IonButton]
 })
 export class ExampleComponent {
   isActionSheetOpen = false;

static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md

@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonActionSheet, IonButton]
 })
 export class ExampleComponent {
   public actionSheetButtons = [

static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md

@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton]
 })
 export class ExampleComponent {
   public actionSheetButtons = [

static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md

@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton]
 })
 export class ExampleComponent {
   public actionSheetButtons = [

static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md

@@ -1,10 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonActionSheet, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['./example.component.css'],
+  imports: [IonActionSheet, IonButton]
 })
 export class ExampleComponent {
   public actionSheetButtons = [

static/usage/v7/alert/buttons/angular/example_component_ts.md

@@ -1,9 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonAlert, IonButton } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  imports: [IonAlert, IonButton]
 })
 export class ExampleComponent {
   public alertButtons = [