feat(demo): add setup for eager

projects/demo/src/modules/customization/wrap-in-dialog/eager/examples/1/page-1.module.ts

@@ -15,7 +15,7 @@ import {TuiPage1ExampleComponent} from './page-1.component';
                 path: ``,
                 component: TuiPage1ExampleComponent,
                 children: [
-                    // step 3: use tuiWrapInEagerDialog
+                    // step 3: use tuiWrapInEagerDialog inside children property
                     tuiWrapInEagerDialog(`path/to/dialog`, DialogContentComponent),
                 ],
             },

projects/demo/src/modules/customization/wrap-in-dialog/eager/examples/setup/add-router-outlet.md

@@ -0,0 +1,3 @@
+```angular2html
+<router-outlet></router-outlet>
+```

projects/demo/src/modules/customization/wrap-in-dialog/eager/examples/setup/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiRoutableDialogModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiRoutableDialogModule,
+  ],
+  // ...
+})
+export class MyPageModule {}
+```

projects/demo/src/modules/customization/wrap-in-dialog/eager/examples/setup/use-wrapper.md

@@ -0,0 +1,20 @@
+```ts
+import {TuiRoutableDialogModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    RouterModule.forChild([
+      {
+        path: ``,
+        component: MyPageComponent,
+        children: [tuiWrapInEagerDialog(`path/to/dialog`, MyDialogComponent)],
+      },
+    ]),
+  ],
+  // ...
+})
+export class MyPageModule {}
+```

projects/demo/src/modules/customization/wrap-in-dialog/eager/wrap-in-eager-dialog.component.ts

@@ -15,4 +15,8 @@ export class WrapInEagerDialogComponent {
             './examples/1/dialog-content.component.ts?raw'
         ),
     };
+
+    readonly addRouterOutlet = import('./examples/setup/add-router-outlet.md?raw');
+    readonly importModule = import('./examples/setup/import-module.md?raw');
+    readonly useWrapper = import('./examples/setup/use-wrapper.md?raw');
 }

projects/demo/src/modules/customization/wrap-in-dialog/eager/wrap-in-eager-dialog.module.ts

@@ -21,6 +21,10 @@ import {WrapInEagerDialogComponent} from './wrap-in-eager-dialog.component';
                             (await import(`./examples/1/page-1.module`))
                                 .TuiPage1ExampleModule,
                     },
+                    {
+                        path: `Setup`,
+                        component: WrapInEagerDialogComponent,
+                    },
                 ],
             },
         ]),

projects/demo/src/modules/customization/wrap-in-dialog/eager/wrap-in-eager-dialog.template.html

@@ -2,13 +2,57 @@
     i18n-header
     header="Wrap in eager dialog"
 >
-    <p i18n>Can be used to create eager loading dialogs with custom route</p>
-
-    <tui-doc-example
-        i18n-heading
-        heading="Eager loading dialog"
-        [content]="example1"
-    >
-        <router-outlet></router-outlet>
-    </tui-doc-example>
+    <ng-template pageTab>
+        <p i18n>Can be used to create eager loading dialogs with custom route</p>
+
+        <tui-doc-example
+            i18n-heading
+            heading="Eager loading dialog"
+            [content]="example1"
+        >
+            <router-outlet></router-outlet>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p i18n>
+                    Import
+                    <code>TuiRoutableDialogModule</code>
+                    into a module where you want to use our helper
+                </p>
+
+                <tui-doc-code
+                    filename="my-page.module.ts"
+                    [code]="importModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p i18n>
+                    Add
+                    <code>router-outlet</code>
+                    to the page template:
+                </p>
+
+                <tui-doc-code
+                    filename="my-page.component.html"
+                    [code]="addRouterOutlet"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p i18n>
+                    Use
+                    <code>tuiWrapInEagerDialog</code>
+                    inside children property of page router config
+                </p>
+                <tui-doc-code
+                    filename="my-page.module.ts"
+                    [code]="useWrapper"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
 </tui-doc-page>