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 4fba3916f7a..e6132304d6f 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -7,8 +7,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  templateUrl: 'example.component.html',<% if (css){ %>
-  styleUrls: ['./example.component.css'],<% } %>
+  templateUrl: 'example.component.html',
+<% if (css){ -%>
+  styleUrls: ['./example.component.css'],
+<% } -%>
 })
 export class ExampleComponent {
 }
diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t
index dbba97e762b..fe9b7483a31 100644
--- a/_templates/playground/new/index.md.ejs.t
+++ b/_templates/playground/new/index.md.ejs.t
@@ -1,13 +1,60 @@
 ---
 arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
-# this template is only used if `css` (from the command line prompt) is false
-to: "<%= css ? null : `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
+to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
 ---
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
+<% if (css){ %>
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+<% } else { -%>
 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';
+<% } -%>
 
-<Playground version="<%= version %>" code={{ javascript, react, vue, angular }} src="<%= `usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>" />
+<Playground
+  version="<%= version %>"
+  code={{
+    javascript,
+<% if (css){ -%>
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+<% } else { -%>
+    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,
+<% } -%>
+      },
+    },
+<% } else { -%>
+    angular,
+<% } -%>
+  }}
+  src="usage/v<%= version %>/<%= nameWithoutIon %>/<%= path %>/demo.html"
+/>
diff --git a/_templates/playground/new/index_with_css.md.ejs.t b/_templates/playground/new/index_with_css.md.ejs.t
deleted file mode 100644
index 8f403ea6d85..00000000000
--- a/_templates/playground/new/index_with_css.md.ejs.t
+++ /dev/null
@@ -1,37 +0,0 @@
----
-arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
-# this template is only used if `css` (from the command line prompt) is true
-to: "<%= css ? `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` : null %>"
----
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
-
-<Playground
-  version="<%= version %>"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
-      },
-    },
-  }}
-  src="<%= `usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
-/>
diff --git a/_templates/playground/new/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t
index a011e678ad5..067c56a59c5 100644
--- a/_templates/playground/new/javascript.md.ejs.t
+++ b/_templates/playground/new/javascript.md.ejs.t
@@ -2,11 +2,13 @@
 to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>"
 ---
 ```html
-<<%= name %>></<%= name %>><% if (css){ %>
+<<%= name %>></<%= name %>>
+<% if (css){ -%>
 
 <style>
   <%= name %> {
     /* styles go here */
   }
-</style><% } %>
+</style>
+<% } -%>
 ```
diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t
index 73a5ffde7e1..b1bf2cd21eb 100644
--- a/_templates/playground/new/vue.md.ejs.t
+++ b/_templates/playground/new/vue.md.ejs.t
@@ -16,11 +16,13 @@ to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %
       <%= pascalName %>,
     },
   });
-</script><% if (css){ %>
+</script>
+<% if (css){ -%>
 
 <style scoped>
   <%= name %> {
     /* styles go here */
   }
-</style><% } %>
+</style>
+<% } -%>
 ```