docs(template): add import statements for virtual-view

Karnaukhov-kh · web-flow · commit 3622d4f02831 · 2025-01-24T14:51:13.000+02:00
diff --git a/apps/docs/docs/template/virtual-view-directive.mdx b/apps/docs/docs/template/virtual-view-directive.mdx
@@ -46,6 +46,27 @@ RxVirtualView is designed to work in combination with related directives:
 
 ### Show a widget when it's visible, otherwise show a placeholder
 
+```typescript
+import {
+  RxVirtualView,
+  RxVirtualViewContent,
+  RxVirtualViewObserver,
+  RxVirtualViewPlaceholder,
+} from '@rx-angular/template/virtual-view';
+// Other imports...
+
+@Component({
+  selector: 'my-list',
+  imports: [RxVirtualView,  RxVirtualViewContent,  RxVirtualViewObserver,  RxVirtualViewPlaceholder],
+  templateUrl: './my-list.component.html',
+  styleUrls: ['./my-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyListComponent {
+// Component code
+}
+```
+
 ```html
 <!-- use the root node (html) for the IntersectionObserver -->
 <div rxVirtualViewObserver [root]="null">
@@ -82,6 +103,27 @@ This will make sure you don't run into stuttery scrolling behavior and layout sh
 This example demonstrates how to use RxVirtualView to optimize lists by only rendering the visible list items.
 We are only rendering the `item` component when it's visible to the user. Otherwise, it gets replaced by an empty div.
 
+```typescript
+import {
+  RxVirtualView,
+  RxVirtualViewContent,
+  RxVirtualViewObserver,
+  RxVirtualViewPlaceholder,
+} from '@rx-angular/template/virtual-view';
+// Other imports...
+
+@Component({
+  selector: 'my-list',
+  imports: [RxVirtualView,  RxVirtualViewContent,  RxVirtualViewObserver,  RxVirtualViewPlaceholder],
+  templateUrl: './my-list.component.html',
+  styleUrls: ['./my-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyListComponent {
+// Component code
+}
+```
+
 ```html
 <div rxVirtualViewObserver class="container">
   @for (item of items; track item.id) {
