fix: angular demo almost working

Author: keerl

demo-snippets/ng/basic/basic.component.html

@@ -3,34 +3,28 @@
     <Label text="Basic Drawer"></Label>
 </ActionBar>
 
-<BottomSheet [(stepIndex)]="stepIndex" [steps]="[56, 156, 456]" scrollViewId="scrollView" backdropColor="#88000000">
+<BottomSheet [(stepIndex)]="stepIndex" [steps]="[56, 156, 456]" backdropColor="#88000000">
     <StackLayout backgroundColor="red">
-        <Label text="This is the main content" />
+        <Label text="This is the main content"></Label>
     </StackLayout>
-    <gridlayout bottomSheet backgroundColor="yellow" rows="56, 100, 300">
-        <stacklayout row="0" orientation="horizontal">
-            <button text="My Profile" class="button" (tap)="stepIndex = 0" />
-            <button text="Settings" class="button" (tap)="stepIndex = 1"/>
-            <button text="Rate Us" class="button" (tap)="stepIndex = 2"/>
-            <button text="Support" class="button" />
-            <button text="Contact" class="button" />
-        </stacklayout>
-        <stacklayout row="1" orientation="horizontal">
-            <button text="My Profile" class="button" />
-            <button text="Settings" class="button" />
-            <button text="Rate Us" class="button" />
-            <button text="Support" class="button" />
-            <button text="Contact" class="button" />
-        </stacklayout>
-        <ListView [items]="items" row="2" id="scrollView" colWidth="50%" rowHeight="100">
-            <v-template>
-                <gridlayout rows="*, auto" [backgroundColor]="item.color" class="item">
-                    <stacklayout row="1">
-                        <label row="1" :text="item.name" class="title" />
-                        <label row="1" :text="item.color" class="subtitle" />
-                    </stacklayout>
-                </gridlayout>
-            </v-template>
+    <GridLayout bottomSheet backgroundColor="yellow" rows="56, 100, 300">
+        <StackLayout row="0" orientation="horizontal">
+            <Button text="Open Step 0" class="Button" (tap)="setIndex(0)"></Button>
+            <Button text="Open Step 1" class="Button" (tap)="setIndex(1)"></Button>
+            <Button text="Open Step 2" class="Button" (tap)="setIndex(2)"></Button>
+        </StackLayout>
+        <StackLayout row="1" backgroundColor="orange">
+            <Label text="Second step section"></Label>
+        </StackLayout>
+        <ListView [items]="items" row="2" colWidth="50%" rowHeight="100">
+            <ng-template let-item="item" let-i="index">
+                <GridLayout rows="*, auto" class="item" [backgroundColor]="item.color">
+                    <StackLayout row="1">
+                        <Label row="1" [text]="item.name" class="title"></Label>
+                        <Label row="1" [text]="item.color" class="subtitle"></Label>
+                    </StackLayout>
+                </GridLayout>
+            </ng-template>
         </ListView>
-    </gridlayout>
+    </GridLayout>
 </BottomSheet>

demo-snippets/ng/basic/basic.component.ts

@@ -32,6 +32,10 @@ export class BasicComponent {
         { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
     ];
 
+    setIndex(index: number) {
+        this.stepIndex = index;
+    }
+
     goBack(): void {
         this.router.back();
     }

demo-snippets/ng/install.module.ts

@@ -1,13 +1,13 @@
 import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 
-import { PersistentBottomSheetComponent } from '@nativescript-community/ui-persistent-bottomsheet/angular';
+import { BottomSheetModule } from '@nativescript-community/ui-persistent-bottomsheet/angular';
 
 import { BasicComponent } from './basic/basic.component';
 
 export const COMPONENTS = [BasicComponent];
 @NgModule({
-    imports: [PersistentBottomSheetComponent],
-    exports: [PersistentBottomSheetComponent],
+    imports: [BottomSheetModule],
+    exports: [BottomSheetModule],
     schemas: [NO_ERRORS_SCHEMA]
 })
 export class InstallModule {}

demo-snippets/package.json

@@ -2,7 +2,7 @@
     "name": "@nativescript-community/template-snippet",
     "version": "0.0.1",
     "dependencies": {
-        "@nativescript-community/ui-persistent-bottomsheet": "file:../packages/ui-persistent-bottomsheet",
-        "@nativescript-community/gesturehandler": "^0.1.50"
+        "@nativescript-community/gesturehandler": "^0.1.50",
+        "@nativescript-community/ui-persistent-bottomsheet": "file:../packages/ui-persistent-bottomsheet"
     }
 }

src/ui-persistent-bottomsheet/angular/module.ts

@@ -47,8 +47,10 @@ export class BottomSheetComponent {
     }
 
     set stepIndex(value) {
-        this._stepIndex = value;
-        this.pbs.stepIndex = this._stepIndex;
+        if (!isNaN(value)) {
+            this._stepIndex = value;
+            this.pbs.stepIndex = this._stepIndex;
+        }
     }
     @Input()
     get backdropColor() {