chore(demo): update getting started page with standalone example (#4963)

Co-authored-by: Evgeniy Shevtsov <[email protected]>
taiga-family · Aug 1, 2023 · 9a0578f · 9a0578f
1 parent e86244c
commit 9a0578f
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 3 deletions.
diff --git a/projects/demo/src/modules/app/home/examples/app-standalone.md b/projects/demo/src/modules/app/home/examples/app-standalone.md
@@ -0,0 +1,16 @@
+```ts
+import {Component} from '@angular/core';
+import {TuiRootModule} from '@taiga-ui/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./my.component.scss', './my.component.less'],
+  standalone: true,
+  imports: [
+    TuiRootModule,
+    // ...
+  ],
+})
+export class AppComponent {}
+```
diff --git a/projects/demo/src/modules/app/home/examples/main-standalone-optional.md b/projects/demo/src/modules/app/home/examples/main-standalone-optional.md
@@ -0,0 +1,8 @@
+```ts
+import {provideAnimations} from '@angular/platform-browser/animations';
+import {TuiAlertModule, TuiDialogModule, TuiRootModule} from '@taiga-ui/core';
+
+bootstrapApplication(AppComponent, {
+  providers: [importProvidersFrom(TuiRootModule, TuiDialogModule, TuiAlertModule), provideAnimations()],
+}).catch(err => console.error(err));
+```
diff --git a/projects/demo/src/modules/app/home/examples/main-standalone.md b/projects/demo/src/modules/app/home/examples/main-standalone.md
@@ -0,0 +1,8 @@
+```ts
+import {provideAnimations} from '@angular/platform-browser/animations';
+import {TuiRootModule} from '@taiga-ui/core';
+
+bootstrapApplication(AppComponent, {
+  providers: [importProvidersFrom(TuiRootModule), provideAnimations()],
+}).catch(err => console.error(err));
+```
diff --git a/projects/demo/src/modules/app/home/home.component.ts b/projects/demo/src/modules/app/home/home.component.ts
@@ -27,6 +27,11 @@ export class HomeComponent {
     readonly addons = import('./examples/addons.md?raw');
     readonly nxAdd = import('./examples/nx-add.md?raw');
     readonly nxMigrate = import('./examples/nx-migrate.md?raw');
+    readonly standalone = import('./examples/app-standalone.md?raw');
+    readonly standaloneMain = import('./examples/main-standalone.md?raw');
+    readonly standaloneMainOptional = import(
+        './examples/main-standalone-optional.md?raw'
+    );
 
     readonly customGlobalStyle = import(
         '../../../../../styles/taiga-ui-global.less?raw'

diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html
@@ -186,17 +186,50 @@ <h2>Install Taiga UI</h2>
                     filename="app.component.html"
                     [code]="appTemplate"
                 ></tui-doc-code>
+
+                <p>
+                    If you're using
+                    <code>standalone</code>
+                    components:
+                </p>
+
+                <tui-doc-code
+                    filename="app.component.ts"
+                    [code]="standalone"
+                ></tui-doc-code>
+
+                <tui-doc-code
+                    filename="main.ts"
+                    [code]="standaloneMain"
+                ></tui-doc-code>
             </li>
 
             <li id="options">
-                Taiga UI also has optional modules for dialogs and notifications. If you need these features, add
-                modules into your app.module.ts
+                <p>
+                    Taiga UI also has optional modules for dialogs and notifications. If you need these features, add
+                    modules into your app.module.ts
+                </p>
 
                 <tui-doc-code
                     filename="app.module.ts"
-                    class="tui-space_bottom-4"
                     [code]="appModuleOptional"
                 ></tui-doc-code>
+
+                <p>
+                    or for
+                    <code>standalone</code>
+                    components:
+                </p>
+
+                <tui-doc-code
+                    filename="app.component.ts"
+                    [code]="standalone"
+                ></tui-doc-code>
+
+                <tui-doc-code
+                    filename="main.ts"
+                    [code]="standaloneMainOptional"
+                ></tui-doc-code>
             </li>
 
             <li id="icons">