diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t
deleted file mode 100644
index f44075feb06..00000000000
--- a/_templates/playground/new/angular.md.ejs.t
+++ /dev/null
@@ -1,7 +0,0 @@
----
-# this file's location depends on whether or not the css option or angular_ts option is selected via the prompt
-to: "<%= `static/usage/v${version}/${name}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
----
-```html
-<<%= component %>></<%= component %>>
-```
diff --git a/_templates/playground/new/angular_example_component_html.md.ejs.t b/_templates/playground/new/angular_example_component_html.md.ejs.t
new file mode 100644
index 00000000000..98f48fde212
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_html.md.ejs.t
@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>></<%= component %>>
+```
diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
index fb07f495acb..548a45dd57b 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -1,17 +1,16 @@
 ---
-# this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
 ---
 ```ts
 import { Component } from '@angular/core';
+import { <%= pascalComponent %> } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-<% if (css){ -%>
   styleUrls: ['./example.component.css'],
-<% } -%>
+  imports: [<%= pascalComponent %>],
 })
-export class ExampleComponent {
-}
+export class ExampleComponent {}
 ```
diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index a0d4fd89cca..c6f9fb53b6c 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -62,11 +62,6 @@ module.exports = {
               name: 'css',
               message: 'Generate custom CSS files?',
             },
-            {
-              type: 'toggle',
-              name: 'angular_ts',
-              message: 'Generate an Angular TypeScript file?',
-            },
           ])
           .then((answers) => {
             answers.name = answers.name || answers.component.replace('ion-', '');
diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t
index 5c7bbf08e81..148d3e85efe 100644
--- a/_templates/playground/new/index.md.ejs.t
+++ b/_templates/playground/new/index.md.ejs.t
@@ -12,17 +12,12 @@ import react_main_css from './react/main_css.md';
 import react from './react.md';
 <% } -%>
 import vue from './vue.md';
-<% if (css || angular_ts){ %>
+
 import angular_example_component_html from './angular/example_component_html.md';
-<% } else { -%>
-import angular from './angular.md';
-<% } -%>
-<% if (angular_ts){ -%>
-import angular_example_component_ts from './angular/example_component_ts.md';
-<% } -%>
 <% if (css){ -%>
 import angular_example_component_css from './angular/example_component_css.md';
 <% } -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="<%= version %>"
@@ -39,21 +34,15 @@ import angular_example_component_css from './angular/example_component_css.md';
     react,
 <% } -%>
     vue,
-<% if (angular_ts || css){ -%>
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-<% if (angular_ts){ -%>
-        'src/app/example.component.ts': angular_example_component_ts,
-<% } -%>
 <% if (css){ -%>
         'src/app/example.component.css': angular_example_component_css,
 <% } -%>
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
-<% } else { -%>
-    angular,
-<% } -%>
   }}
   src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
 />
diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t
index 8a84f90e57f..a8320a026ba 100644
--- a/_templates/playground/new/react.md.ejs.t
+++ b/_templates/playground/new/react.md.ejs.t
@@ -11,9 +11,10 @@ import './main.css';<% } %>
 
 function Example() {
   return (
-    <<%= pascalComponent %>></<%= pascalComponent %>>
+    <>
+      <<%= pascalComponent %>></<%= pascalComponent %>>
+    </>
   );
 }
 export default Example;
 ```
-