fix(generation): correct angular imports (#3034)

* Refactor: Improve readability

* Combine index files and fix bug with angular ts generation

Author: mapsandapps

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

_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"
+/>

_templates/playground/new/index_with_css.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>
+<% } -%>
 ```

_templates/playground/new/javascript.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>
+<% } -%>
 ```