Merge pull request #48 from guillemc23/patch-2

fix: Angular snippets for Indicator
nativescript-community · Sep 11, 2024 · 7fff2cd · 7fff2cd
2 parents 7bf1f63 + 6eccc1a
commit 7fff2cd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/demo-snippets/ng/indicator/indicator.component.html b/demo-snippets/ng/indicator/indicator.component.html
@@ -4,13 +4,16 @@
 </ActionBar>
 
 <StackLayout>
-    <Pager [items]="items" height="300" [selectedIndex]="selectedIndex" (selectedIndexChange)="onIndexChanged($event)"
-        indicator="fill" showIndicator="true">
-        <ng-template let-i="index" let-item="item">
-            <GridLayout [backgroundColor]="item.color">
-                <Label class="label" [text]="item.title"></Label>
-            </GridLayout>
-        </ng-template>
-    </Pager>
+    <GridLayout>
+        <Pager id="pager" [items]="items" height="300" [selectedIndex]="selectedIndex" (selectedIndexChange)="onIndexChanged($event)">
+            <ng-template let-i="index" let-item="item">
+                <GridLayout [backgroundColor]="item.color">
+                    <Label class="label" [text]="item.title"></Label>
+                </GridLayout>
+            </ng-template>
+        </Pager>
+        <PagerIndicator pagerViewId="pager" type="thin_worm" verticalAlignment="bottom" horizontalAlignment="center"
+            marginBottom="10" color="#C3AEC6" selectedColor="#77567a" />
+    </GridLayout>
     <Button text="Reset" (tap)="resetPager()"></Button>
 </StackLayout>
diff --git a/demo-snippets/ng/install.module.ts b/demo-snippets/ng/install.module.ts
@@ -1,7 +1,9 @@
 import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import { NativeScriptCommonModule, NativeScriptModule } from '@nativescript/angular';
+import { NativeScriptCommonModule, NativeScriptModule, registerElement } from '@nativescript/angular';
 
 import { PagerModule } from '@nativescript-community/ui-pager/angular';
+import { PagerIndicator } from "@nativescript-community/ui-pager-indicator";
+registerElement("PagerIndicator", () => PagerIndicator)
 
 import { StaticPagerComponent } from './static-pager/static-pager.component';
 import { BasicPagerComponent } from './basic-pager/basic-pager.component';

diff --git a/packages/ui-pager-indicator/blueprint.md b/packages/ui-pager-indicator/blueprint.md
@@ -28,6 +28,28 @@ Run the following command from the root of your project:
 PagerIndicator add page control for Pager or other Paging Views.
 ```
 
+## Usage in Angular
+
+
+If you are planning to use an indicator, add the following to your module:
+
+```typescript
+import { registerElement } from "@nativescript/angular";
+import { PagerIndicator } from "@nativescript-community/ui-pager-indicator";
+registerElement("PagerIndicator", () => PagerIndicator)
+```
+
+Then in your template:
+```html
+<Pager id="pager" [items]="items"
+    ...
+</Pager>
+<PagerIndicator pagerViewId="pager" />
+```
+
+### Examples
+- [Indicator Pager](demo-snippets/ng/indicator)
+  - A simple pager example using dynamic content and indicator.
 
 ## Usage in Vue