triniwiz / nativescript-pager Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
Having the plugin bound to an ObservableArray
. If you change the bound property the plugin is not refreshed. Also on Android if you try to scroll you get an exception. This is because for the value change of the itemsProperty
you need to have a check and if an ObservableArray
to add an event listener so when it is updated to trigger a refresh of the plugin. Here is how I have it in the GridView plugin:
https://github.com/PeterStaev/NativeScript-Grid-View/blob/8b6120195e82d9918c11a2af1dc003566b22fe69/grid-view-common.ts#L86-L103
Attaching here a sample app. On button tap the bound property is changed to have 2 items.
pager-observable.zip
Hi @triniwiz,
Remember the issues with Angular:
Thanks for this very useful component!
Nicholls
Right now, on each slide, every elements are recreated, it leads to poor performances on android mainly.
It could be great, like on the Vue ListView, that every slide is recycled with the new context, this way only 3 slides are requireds to be created (previous, current, next). And no other will be created, they will just be reused.
Hello Triniwiz,
First of all thanks for this plugin . We just want to know can we use component (using selector name) inside pager ?
if yes then how ?
can you provide us sample code ?
<Pager row="1" [items]="items | async" #pager selectedIndex="5" (selectedIndexChange)="onIndexChanged($event)" class="pager"
backgroundColor="lightsteelblue">
<ng-template let-i="index" let-item="item">
<GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
<ListView class="list-group" [items]="countries">
<ng-template let-country="item">
<RL:Ripple rippleColor="#e6e6e6" (tap)="dealDetails()">
<GridLayout rows="*" columns="*" class="padding">
<StackLayout orientation="vertical">
<Label class=" h6" style="font-size:13;" [text]='country.name'></Label>
</StackLayout>
</GridLayout>
</RL:Ripple>
</ng-template>
</ListView>
</GridLayout>
</ng-template>
</Pager>
is there any way I can control if the pager can go to the next screen?
So I have an ObservableArray
that is first initialized with null
values. Then when the index of the pager is changed I'm loading data from the backend and replacing the null
value with the appropriate Observable
model object for the view. I'm having 2 different templates - one that is for null
object and one for non-null objects. After the data is loaded and I replace the null
object it still shows the blank template for the item. From what I've traced this is due to two problems:
instantiateItem
does not take into consideration the template, it is just based by index:nativescript-pager/src/pager.android.ts
Lines 304 to 312 in 558f1b2
position
to use ${position}-${template.key}
as the key for the cached view map.ObservableArray
is changed the refres()
methos is correctly called but the adapter's notifyDataSetChanged()
does not cause the views to be regenerated. So basically it does nothing... You can read more about the possible solutions here: https://stackoverflow.com/a/7287121/5272836.Hello,
at first, thank you for creating this plugin, it will help us a lot for our project.
After playing around with the plugin for a while, I have some trouble when initializing the pager.
I try to dynamically fill the pager with content that is getting loaded from the server, but the content gets visible only when navigating to another page and back.
Here is what I am doing:
<pager:Pager id="pager" items="{{ items }}">
<pager:Pager.itemTemplate>
<ScrollView>
<GridLayout rows="auto,auto,*" columns="*" backgroundColor="#DBE8C1">
<Label row="0" text="{{ title }}"/>
<Label row="1" text="{{ text }}"/>
</GridLayout>
</ScrollView>
</pager:Pager.itemTemplate>
</pager:Pager>
exports.vmMain = observableModule.fromObject({
selectedIndex: 0,
items: new observableArrayModule.ObservableArray(),
loadStoryChapters: function () {
var self = this;
ffHttpModule.startHttpRequest(
...
//success callback
function(response) {
self.set("items", new observableArrayModule.ObservableArray(response.listItems));
//does not work correctly, title and text are visible after navigating to another page and back
self.get('items').setItem(
0,
{ id: "..." title: "First item", text: "This is the text of the first item..." }
);
}
);
}
});
When using this code for a ListView, the data is shown as expected, so the source of this problem really seems to be somewhere in the pager implementation.
I hope this can be fixed.
i am try this code
items = [1, 2, 3];
public templateSelector = (item: any, index: number, items: any) => {
return index % 2 === 0 ? 'even' : 'odd';
if (index === 0) {
return 'first';
} else if (index === 1) {
return 'second';
} else if (index === 2) {
return 'third';
}
};
<Pager [items]="items" [itemTemplateSelector]="templateSelector">
<ng-template pagerTemplateKey="first" let-i="index" let-item="item">
<StackLayout height="100%">
<router-outlet height="100%"></router-outlet>
</StackLayout>
</ng-template>
<ng-template pagerTemplateKey="second" let-i="index" let-item="item">
<StackLayout height="100%">
<router-outlet name="Graph"></router-outlet>
</StackLayout>
</ng-template>
<ng-template pagerTemplateKey="third" let-i="index" let-item="item">
<router-outlet name="DataList"></router-outlet>
</ng-template>
</Pager>
in IOS when pager Initialize at that time three or four time call ngOnInit of first component and
second component
then i go to second component at that time call third component ngOninit
then never call ngOnint or ngOnDestroy of any component any swipe of page
so how can i known which component is on view
it is also very difficulty to handle different behaviour in Android and IOS
so can you please help me out ?
I'm trying to insert an object in a certain index and eliminating a specific object depending on what I need, but this does not work well in IOS. my variable BehaviorSubject is fine but in the view it doesn't appear as it should. this is my code:
if (checkboxOption.trigger && checkboxOption.option_selected == true) {
let trigger = [];
trigger = this.getCorrectStructureForm(checkboxOption.trigger);
let newItems = (<BehaviorSubject>this.formItems).value;
trigger.forEach(newQuestion => {
newItems.splice(indexPage+1, 0, newQuestion);
});
this.formItems.next(newItems);
this.numItems = this.formItems.value.length;
} else if(checkboxOption.trigger && checkboxOption.option_selected == false) {
let removeItems = (<BehaviorSubject>this.formItems).value;
checkboxOption.trigger.forEach(removeQuestion => {
let indexRemove = removeItems.findIndex(item => item.fuid === removeQuestion.fuid);
removeItems.splice(indexRemove, 1);
});
this.formItems.next(removeItems);
this.numItems = this.formItems.value.length;
}
When I push data into itemData, pager update view is right. But when I unshift item in itemData, pager update view wrong.
Hi,
The selectedIndex seems to be broken in 4.0.1. Also the indexchanged event is firing twice.
export class AppComponent implements OnInit {
watchlists: any = [];
currentPagerIndex = 1;
public constructor() {
}
ngOnInit(): void {
this.watchlists = [{ name: "one" }, { name: "two" }];
}
ngAfterViewInit() {
// this.currentPagerIndex = 1;
}
indexChanged(event) {
console.log(event.newIndex);
}
}
app.component.html
<Pager [items]="watchlists" #pager [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="indexChanged($event)" class="pager"
>
<ng-template pagerItemTemplate let-i="index" let-watchlist="item">
<StackLayout>
<Label text="{{watchlist.name}}"></Label>
</StackLayout>
</ng-template>
</Pager>
package.json
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/router": "4.1.3",
"nativescript-angular": "3.0.0",
"nativescript-pager": "4.0.1",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.8",
"rxjs": "5.4.0",
"tns-core-modules": "~3.0.0",
"zone.js": "~0.8.5"
Thanks for the plugin.
Raghu
@triniwiz Nice work with the plugin.
In my case I need to display different Views (both in terms of structure and functionality) inside the Pager so I cannot use a single itemTemplate.
While inspecting your code I noticed that the "itemsLoading" event can be used to provide a View reference "on-demand" to the Pager.
Would be great if you could add this functionality to the README
Happen only on IOS
There is a bug on IOS rendering.
I want to create a Pager on changed array and it seems that this is an issue with rendering...it takes you the the second page and also black the page, so I should swipe left or right to get it live agian
I think example would be the best to describe it:
*** NS-Angular
TS:
import { Component } from "@angular/core";
@Component({
moduleId: module.id,
selector: "times-selection",
templateUrl: "./timesSelection.component.html"
})
export class TimesSelectionComponent {
public selectedDates: Array<Date> = [];
constructor() {
setTimeout(() => {
this.selectedDates = [new Date(), new Date()];
}, 5000)
}
}
HTML:
<Pager [items]="selectedDates" width="100%" height="100%" [pagesCount]="selectedDates.length">
<ng-template let-item="item">
<GridLayout rows="*" columns="*">
<Label width="100%" row="0" col="0" textAlignment="center" [text]="item"></Label>
</GridLayout>
</ng-template>
</Pager>
but you can see that if you define the selectedDates
in the beginning just like this public selectedDates: Array<Date> = [new Date(), new Date()];
it will work.
any idea why?
Hi,
I am implementing a times picker flow with this pager plugin and I found out that the pager loads only the next and the previous pages, and when I move to two pages a head the first page just get destroyed...
here is a video sample -> https://youtu.be/UaQV7X9wr9I
I tested it only on Android...
Any idea about this? :)
[object Object]
from the first slide.Load new images and refresh the array.
<Pager [items]="images | async" #pager class="pager">
<ng-template let-i="index" let-item="item">
<GridLayout class="pager-item" rows="*" columns="*">
<Image row="1" [src]="item.image"></Image>
<Label [text]="item.title"></Label>
</GridLayout>
</ng-template>
</Pager>
images: Observable<any[]>
ngOnInit() {
myAPI.getImages((images) => {
this.images = of(images)
})
}
CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1052:24: ERROR TypeError: null is not an object (evaluating 'vcRef.clear')
CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1052:24: ERROR TypeError: null is not an object (evaluating 'vcRef.clear')
1 0x10e8add4b NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2 0x10ef5128e ffi_closure_unix64_inner
3 0x10ef51bd2 ffi_closure_unix64
4 0x10fd8604e -[UIViewController __viewDidDisappear:]
5 0x10fd86142 -[UIViewController _endAppearanceTransition:]
6 0x10fd4e7da -[UIPresentationController transitionDidFinish:]
7 0x10ffd319a -[_UICurrentContextPresentationController transitionDidFinish:]
8 0x10fd527b5 __56-[UIPresentationController runTransitionForCurrentState]_block_invoke_2
9 0x110939e89 -[_UIViewControllerTransitionContext completeTransition:]
10 0x10fd4b6be -[UITransitionView notifyDidCompleteTransition:]
11 0x10fd4b335 -[UITransitionView _didCompleteTransition:]
12 0x10fd4d9cc -[UITransitionView _transitionDidStop:finished:]
13 0x10fc7099d -[UIViewAnimationState sendDelegateAnimationDidStop:finished:]
14 0x10fc70fde -[UIViewAnimationState animationDidStop:finished:]
15 0x10fc71092 -[UIViewAnimationState animationDidStop:finished:]
16 0x1135f5a2b CA::Layer::run_animation_callbacks(void*)
17 0x1148b32b5 _dispatch_client_callout
18 0x1148bd496 _dispatch_main_queue_callback_4CF
19 0x114131ee9 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
20 0x1140f6592 __CFRunLoopRun
21 0x1140f59b9 CFRunLoopRunSpecific
22 0x116c339c6 GSEventRunModal
23 0x10fbda5e8 UIApplicationMain
24 0x10ef51a2d ffi_call_unix64
25 0x132e63410
file:///app/tns_modules/nativescript-pager/pager.js:186:18: JS ERROR TypeError: null is not an object (evaluating 'vcRef.clear')
Let me know what you think
Thanks in advance
Tryed on Android but probably affects both
Hello @triniwiz,
When I try to create a multitemplate pager in a angular app on android platform, templates are ignored and just the first one is picked up.
I debugged a little bit your plugin and I noted that pagerTemplateKey are correctly parsed and registerTemplate method is called. The problem is that registerTemplate fills _templateMap variable but internally pager uses itemTemplates property to look for registered templates which is filled by setItemTemplates. But the latest is never called when a new template is registered.
I added a call to setItemTemplates at the end of registerTemplate and things seem to work again, but I'm not sure it is the right solution, maybe you can tell me something better.
Here is what i changed:
farzeni@fd3b525
Thank you for your work
When manually (programmatically) setting current pager index, pager instantly changes page to new index, without transition.
On android page change is smoothly animated.
Example gif in readme here suggests that switching pages should be animated (clicking previous and next page). I tried downloading demo but its the same thing. Pages are instantly changed without transition.
Adding PagerModule
to the @NgModule imports array crashes the app with the error at the bottom. Code below.
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { ItemService } from "./item/item.service";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
import { SearchComponent } from './search/search.component';
import { DropDownModule } from 'nativescript-drop-down/angular';
import { BuildingsComponent } from './buildings/buildings.component';
import { ListingCardComponent } from './listing-card/listing-card.component';
import { PagerModule } from 'nativescript-pager/angular';
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";
// Uncomment and add to NgModule imports if you need to use the HTTP wrapper
// import { NativeScriptHttpModule } from "nativescript-angular/http";
@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
DropDownModule,
PagerModule // <====== CRASH HERE
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent,
SearchComponent,
BuildingsComponent,
ListingCardComponent
],
providers: [
ItemService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule {
}
Tried upgrading tns-angular to 3.4.0, tried upgrading Angular to >5, none worked.
Any idea? Thanks.
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err:
System.err: Error calling module function
System.err:
System.err: Error calling module function
System.err:
System.err: Cannot compile /data/data/org.nativescript.tnsapp/files/app/tns_modules/nativescript-pager/angular/index.js
System.err:
System.err: SyntaxError: Unexpected token import
System.err: File: "file:///data/data/org.nativescript.tnsapp/files/app/tns_modules/nativescript-pager/angular/index.js, line: 1, column: 60
System.err:
System.err: StackTrace:
System.err: Frame: function:'require', file:'', line: 1, column: 266
System.err: Frame: function:'', file:'file:///data/data/org.nativescript.tnsapp/files/app/app.module.js', line: 14, column: 17
System.err: Frame: function:'require', file:'', line: 1, column: 266
System.err: Frame: function:'', file:'file:///data/data/org.nativescript.tnsapp/files/app/main.js', line: 5, column: 20
System.err: Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:
System.err: SyntaxError: Unexpected token import
System.err: File: "<unknown>, line: 1, column: 265
Thanks for the good work so far! This plugin is exactly what I need for a new app we're building.
I have been playing with the plugin for a couple of days but I can't manage to add the content dynamically with angular. Trying to use *ngFor results in an exception like:
JS: com.tns.gen.android.support.v4.view.PagerAdapter_frnal_ts_helpers_l58_c38__PagerAdapter.instantiateItem(android.support.v4.view.PagerAdapter.java)
JS: android.support.v4.view.ViewPager.addNewItem(ViewPager.java:1034)
...
JS: Caused by: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup
JS: android.view.ViewGroup.addView(ViewGroup.java:4189)
JS: android.view.ViewGroup.addView(ViewGroup.java:4171)
I also tried creating the Nativescript views with code and pushing them to the items array:
this.pager.nativeElement.items.push(someStackLayoutWithChildren);
In the end the problem seems to be the _nativeView property being undefined
in instantiateItem
.
Could you guys provide some guidance on how this could be achieved? I'm using the android emulator.
Thanks in advance!
How to reproduce:
When you navigate from one page with a pager to another page crashes with this log:
CONSOLE ERROR file:///app/providers/authentication.service.js:62:30: NativeScriptError: Error: View not added to this instance. View: StackLayout(430) CurrentParent: Pager(422) ExpectedParent: StackLayout(420)
CONSOLE ERROR file:///app/providers/authentication.service.js:64:30: NativeScriptError: Error: View not added to this instance. View: StackLayout(430) CurrentParent: Pager(422) ExpectedParent: StackLayout(420)
1 0x1057056db NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2 0x105dda11e ffi_closure_unix64_inner
3 0x105ddaa52 ffi_closure_unix64
4 0x106b005e0 -[UIViewController __viewDidDisappear:]
5 0x106b006d4 -[UIViewController _endAppearanceTransition:]
6 0x106b35865 -[UINavigationController navigationTransitionView:didEndTransition:fromView:toView:]
7 0x106b2b2d4 __49-[UINavigationController _startCustomTransition:]_block_invoke
8 0x107486d1c -[_UIViewControllerTransitionContext completeTransition:]
9 0x10693f3c0 __53-[_UINavigationParallaxTransition animateTransition:]_block_invoke.99
10 0x106a10024 -[UIViewAnimationBlockDelegate _didEndBlockAnimation:finished:context:]
11 0x1069e3257 -[UIViewAnimationState sendDelegateAnimationDidStop:finished:]
12 0x1069e3796 -[UIViewAnimationState animationDidStop:finished:]
13 0x10bbf068e CA::Layer::run_animation_callbacks(void*)
14 0x10a3b5792 _dispatch_client_callout
15 0x10a39d247 _dispatch_main_queue_callback_4CF
16 0x109b2d909 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
17 0x109af3ae4 __CFRunLoopRun
18 0x109af3016 CFRunLoopRunSpecific
19 0x10b41fa24 GSEventRunModal
20 0x106957134 UIApplicationMain
21 0x105dda8ad ffi_call_unix64
22 0x127a7c480
file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:470:142: JS ERROR Error: View not added to this instance. View: StackLayout(430) CurrentParent: Pager(422) ExpectedParent: StackLayout(420)
Jul 21 14:44:54 MacBook-Pro-de-Daniel-2 com.apple.CoreSimulator.SimDevice.2DFF44D9-2015-43A5-8854-2491254845BF.launchd_sim[82859] (UIKitApplication:pt.minsaude.spms.ces[0x2c06][82882][85181]): Service exited due to Segmentation fault: 11
โโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโ
โ Component โ Current version โ Latest version โ Information โ
โ nativescript โ 3.1.2 โ 3.1.2 โ Up to date โ
โ tns-core-modules โ 3.1.0 โ 3.1.0 โ Up to date โ
โ tns-android โ 3.1.1 โ 3.1.1 โ Up to date โ
โ tns-ios โ 3.1.0 โ 3.1.0 โ Up to date โ
โโโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโ
Hi @triniwiz
After updating the app to Nativescript 3 I found this issue.
The app has tabs (Home, Profiles, etc.). When I switch from Home to Profiles and then click on any button I get this error:
[Error] Error: Uncaught (in promise): Error: View not added to this instance. View: Label(209) CurrentParent: Pager(202) ExpectedParent: DockLayout(185) _removeView@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:470:28 [angular] removeChild@file:///app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:53:25 [angular] removeChild@file:///app/tns_modules/nativescript-angular/view-util.js:70:31 [angular] removeChild@file:///app/tns_modules/nativescript-angular/renderer.js:82:34 [angular] removeChild@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:13356:34 [angular] execRenderNodeAction@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9089:33 [angular] visitRenderNode@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9057:33 [angular] visitSiblingRenderNodes@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:8988:28 [angular] visitRootRenderNodes@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:8972:28 [angular] renderDetachView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9793:25 [angular] detachEmbeddedView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9731:21 [angular] detach@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:10169:55 [angular] destroy@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:10252:42 [angular] file:///app/tns_modules/nativescript-pager/angular/index.js:16:24 [angular] notify@file:///app/tns_modules/tns-core-modules/data/observable/observable.js:103:31 [angular] _emit@file:///app/tns_modules/tns-core-modules/data/observable/observable.js:120:24 [angular] onUnloaded@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:220:19 [angular] file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:243:33 [angular] file:///app/tns_modules/nativescript-pager/src/ios/pager.js:61:25 [angular] forEach@[native code] [angular] eachChildView@file:///app/tns_modules/nativescript-pager/src/ios/pager.js:60:34 [angular] eachChild@file:///app/tns_modules/tns-core-modules/ui/core/view/view-common.js:690:27 [angular] _unloadEachChild@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:241:23 [angular] onUnloaded@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:218:30 [angular] file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:243:33 [angular] eachChildView@file:///app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:125:34 [angular] eachChild@file:///app/tns_modules/tns-core-modules/ui/core/view/view-common.js:690:27 [angular] _unloadEachChild@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:241:23 [angular] onUnloaded@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:218:30 [angular] file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:243:33 [angular] eachChildView@file:///app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:125:34 [angular] eachChild@file:///app/tns_modules/tns-core-modules/ui/core/view/view-common.js:690:27 [angular] _unloadEachChild@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:241:23 [angular] onUnloaded@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:218:30 [angular] file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:243:33 [angular] eachChildView@file:///app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:125:34 [angular] eachChild@file:///app/tns_modules/tns-core-modules/ui/core/view/view-common.js:690:27 [angular] _unloadEachChild@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:241:23 [angular] onUnloaded@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:218:30 [angular] _removeViewCore@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:484:28 [angular] _removeViewCore@file:///app/tns_modules/tns-core-modules/ui/core/view/view.js:27:46 [angular] _removeView@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:475:29 [angular] removeChild@file:///app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:53:25 [angular] removeChild@file:///app/tns_modules/nativescript-angular/view-util.js:70:31 [angular] removeChild@file:///app/tns_modules/nativescript-angular/renderer.js:82:34 [angular] removeChild@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:13356:34 [angular] execRenderNodeAction@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9089:33 [angular] visitRenderNode@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9057:33 [angular] visitSiblingRenderNodes@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:8988:28 [angular] visitRootRenderNodes@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:8972:28 [angular] renderDetachView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9793:25 [angular] detachEmbeddedView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9731:21 [angular] detach@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:10169:55 [angular] destroy@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:10252:42 [angular] destroy@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9999:74 [angular] deactivate@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:5298:35 [angular] deactiveRouteAndOutlet@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4578:30 [angular] deactiveRouteAndItsChildren@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4538:40 [angular] file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4571:50 [angular] forEach@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:475:21 [angular] deactiveRouteAndOutlet@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4569:16 [angular] deactiveRouteAndItsChildren@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4538:40 [angular] deactivateRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4467:49 [angular] file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4429:35 [angular] forEach@[native code] [angular] deactivateChildRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4428:36 [angular] activate@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4415:35 [angular] file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4034:30 [angular] file:///app/tns_modules/rxjs/Observable.js:110:25 [angular] __tryOrSetError@file:///app/tns_modules/rxjs/Subscriber.js:247:20 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:187:42 [angular] _next@file:///app/tns_modules/rxjs/Subscriber.js:125:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34 [angular] _next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] _innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55 [angular] _tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23 [angular] _next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34 [angular] _next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _complete@file:///app/tns_modules/rxjs/operator/reduce.js:119:34 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] _innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55 [angular] _tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23 [angular] _next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34 [angular] _next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34 [angular] _next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyComplete@file:///app/tns_modules/rxjs/operator/every.js:53:30 [angular] _complete@file:///app/tns_modules/rxjs/operator/every.js:70:28 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] _innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55 [angular] _tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23 [angular] _next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyComplete@file:///app/tns_modules/rxjs/operator/every.js:53:30 [angular] _complete@file:///app/tns_modules/rxjs/operator/every.js:70:28 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] _innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55 [angular] _tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23 [angular] _next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34 [angular] _next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] _innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55 [angular] _tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23 [angular] _next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34 [angular] _next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] _innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55 [angular] _tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23 [angular] _next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/Subscriber.js:125:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _next@file:///app/tns_modules/rxjs/operator/map.js:83:30 [angular] next@file:///app/tns_modules/rxjs/Subscriber.js:89:23 [angular] _complete@file:///app/tns_modules/rxjs/operator/last.js:110:29 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _complete@file:///app/tns_modules/rxjs/operator/mergeAll.js:94:38 [angular] complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27 [angular] _subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:51:36 [angular] _trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26 [angular] file:///app/tns_modules/rxjs/Observable.js:89:43 [angular] forEach@file:///app/tns_modules/rxjs/Observable.js:85:31 [angular] file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4015:25 [angular] runNavigate@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:3946:27 [angular] onInvoke@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:4156:43 [angular] onInvokeTask@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:4147:47 [angular] promiseReactionJob@[native code] [<root>] UIApplicationMain@[native code] [<root>] start@file:///app/tns_modules/tns-core-modules/application/application.js:211:26 [<root>] bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:73:28 [<root>] bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:61:26 [<root>] anonymous@file:///app/main.js:12:57 [<root>] evaluate@[native code] [<root>] moduleEvaluation@[native code] [<root>] [native code] [<root>] promiseReactionJob@[native code] [<root>] โ zone-nativescript.js:993 (anonymous function) (console.js:26) consoleError (zone-nativescript.js:571) handleUnhandledRejection (zone-nativescript.js:574) _loop_1 (zone-nativescript.js:609) drainMicroTaskQueue (zone-nativescript.js:613) promiseReactionJob UIApplicationMain start (application.js:211) bootstrapApp (platform-common.js:73) bootstrapModule (platform-common.js:61) anonymous (main.js:12) evaluate moduleEvaluation (anonymous function) promiseReactionJob
"dependencies": {
"@angular/animations": "~4.1.0",
"@angular/common": "~4.1.0",
"@angular/compiler": "~4.1.0",
"@angular/core": "~4.1.0",
"@angular/forms": "~4.1.0",
"@angular/http": "~4.1.0",
"@angular/platform-browser": "~4.1.0",
"@angular/router": "~4.1.0",
"nativescript-accelerometer": "^2.0.1",
"nativescript-angular": "^3.0.0",
"nativescript-appversion": "^1.4.1",
"nativescript-bottombar": "^3.0.5",
"nativescript-cardview": "^2.0.1",
"nativescript-contacts-lite": "^0.2.3",
"nativescript-email": "^1.4.0",
"nativescript-ibeacon": "^0.8.1",
"nativescript-iqkeyboardmanager": "^1.1.0",
"nativescript-loading-indicator": "^2.3.2",
"nativescript-localstorage": "^1.1.5",
"nativescript-mixpanel": "^1.0.8",
"nativescript-ngx-fonticon": "^2.2.1",
"nativescript-pager": "^5.0.2",
"nativescript-permissions": "^1.2.3",
"nativescript-phone": "^1.3.0",
"nativescript-status-bar": "^1.1.1",
"nativescript-telerik-ui": "^3.0.4",
"nativescript-theme-core": "~1.0.4",
"nativescript-timedatepicker": "^1.2.0",
"nativescript-toast": "^1.4.5",
"nativescript-trace-raven": "^1.0.0",
"nativescript-virtual-ibeacon": "^0.8.4",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.3.0",
"tns-core-modules": "^3.1.0",
"tns-platform-declarations": "^3.1.0",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-android-snapshot": "^0..",
"nativescript-dev-typescript": "~0.3.5",
"typescript": "2.3.2"
}`
Hello, we have implemented this plugin in our ios application. we are not getting tap event of label or listview or image . it is working only for button . We have attached the demo code, can some one please help us in order to get this working?
we have implemented tap event for label in attached demo project as follows:
test.component.html
<Pager [items]="items | async" #pager [selectedIndex]="currentPagerIndex" readOnly="false" (selectedIndexChanged)="onIndexChanged($event)"
class="pager">
<template pagerItemTemplate let-i="index" let-item="item">
<GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
<Label [text]="item.title" (tap)="itemTapped()"></Label>
<!--<Button [text]="item.title" (tap) = "itemTapped()"></Button>-->
<Image stretch="fill" row="1" [src]="item.image"></Image>
</GridLayout>
</template>
</Pager>
test.component.ts
itemTapped(){
console.log("itemTapped");
}
I emplement via references but get a error message
System.err: Error: com.tns.NativeScriptException: Failed to find module: "vue/pager", relative to: app/tns_modules/
tns --version: 3.1.1
nativescript-angular: 3.1.1
tns-core-modules: 3.1.0
I have added router-outlet in in my html code as follows:
<GridLayout rows="*, auto" columns="*" class="page">
<Pager #pager [pagesCount]="numItems" [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
<StackLayout height="100%">
<router-outlet height="100%"></router-outlet>
</StackLayout>
<StackLayout height="100%">
<router-outlet name="Graph"></router-outlet>
</StackLayout>
<StackLayout height="100%">
<router-outlet name="DataList"></router-outlet>
</StackLayout>
</Pager>
</GridLayout>
And routing elements as follows:
{
path: "DetailScreen", component: DetailViewComponent, children: [
//DetailScreen1 child Components
{ path: "", component: DatalistingComponent, outlet: "DataList" },
{ path: "", component: GraphComponent, outlet: "Graph" },
{ path: "", component: OverviewComponent },
]
},
The code is working fine in version 2.3.0 but working in version 5.0.0.
Any help,
Thank you
Please add mode with static pages items for using as TabView.
Because TabView is low customizable
Thanks
Hello,
<Pager #pager [pagesCount]="numItems" [itemTemplateSelector]="templateSelector" [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)"
class="pager" height="100%" width="100%">
<StackLayout height="100%">
<selector-one></selector-one>
</StackLayout>
<StackLayout height="100%">
<selector-two></selector-two>
</StackLayout>
</Pager>
is it possible to use pager with load different Component ?
Above code is not working so please help me how to load different Component.
I have added router-outlet in in my html code as follows:
<GridLayout rows="*, auto" columns="*" class="page">
<Pager #pager [pagesCount]="numItems" [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
<StackLayout height="100%">
<router-outlet height="100%"></router-outlet>
</StackLayout>
<StackLayout height="100%">
<router-outlet name="Graph"></router-outlet>
</StackLayout>
<StackLayout height="100%">
<router-outlet name="DataList"></router-outlet>
</StackLayout>
</Pager>
</GridLayout>
And routing elements as follows:
{
path: "DetailScreen", component: DetailViewComponent, children: [
//DetailScreen1 child Components
{ path: "", component: DatalistingComponent, outlet: "DataList" },
{ path: "", component: GraphComponent, outlet: "Graph" },
{ path: "", component: OverviewComponent },
]
},
i known 3 + version uses templates
how to achieve Dynamic page load in 3 + version ?
Is there a slide changed event that can be listened to?
It seems to me when using nativescript-pager with Angular, that when I apply css classes to Pager content Layouts, they fail to apply. Haven't tested with just NS.
<Pager>
<StackLayout class="m-20 bg-primary my-page">
<Label text="Test"></Label>
</StackLayout>
</Pager>
^ classes are not respected and content is completely plain.
This leads to having to use a lot of style="" attributes, which is annoying.
@triniwiz any idea why this might be?
Hello triniwiz. nice work with the pager, please can there be support for multiple item template as it is with a listview here
i am try .
items = [1, 2, 3];
public templateSelector = (item: any, index: number, items: any) => {
return index % 2 === 0 ? 'even' : 'odd';
if (index === 0) {
return 'first';
} else if (index === 1) {
return 'second';
} else if (index === 2) {
return 'third';
}
};
<Pager [items]="items" [itemTemplateSelector]="templateSelector">
<ng-template pagerTemplateKey="first" let-i="index" let-item="item">
<StackLayout height="100%">
<router-outlet height="100%"></router-outlet>
</StackLayout>
</ng-template>
<ng-template pagerTemplateKey="second" let-i="index" let-item="item">
<StackLayout height="100%">
<router-outlet name="Graph"></router-outlet>
</StackLayout>
</ng-template>
<ng-template pagerTemplateKey="third" let-i="index" let-item="item">
<router-outlet name="DataList"></router-outlet>
</ng-template>
</Pager>
In android when i go to second component from first component at that time call third component ngOnit
always but never call ngOnDestroy
also
when i go to second component from third component at that time call first component ngOnit method always but never call ngOnDestroy
so i think when i go to second component from first component at that time call third component ngOnit
also have to call first component ngOnDestroy
so i think when i go to second component from third component at that time call first component ngOnit
also have to call third component ngOnDestroy
actually when i start timer in third component so it will never stop and always create new timer when ngOninit call
can you please give me a suggestion how can i handle this..
I don't need to describe more here. Just as title.
app-routing.ts:
{
path: "home",
loadChildren: "./views/dummy/dummy.module#DummyModule"
},
dummy.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { DummyRoutingModule } from "./dummy-routing.modules";
import { DummyComponent } from "./dummy.component";
import { ReactiveFormsModule } from "@angular/forms";
@NgModule({
imports: [
NativeScriptCommonModule,
ReactiveFormsModule,
// SharedModule,
DummyRoutingModule,
],
declarations: [
DummyComponent,
],
schemas: [
NO_ERRORS_SCHEMA,
],
})
export class DummyModule {}
test.component.html
<ActionBar title="My NG Demo" class="action-bar">
</ActionBar>
<GridLayout rows="*, auto" columns="*" class="page">
<Pager [items]="items | async" #pager [selectedIndex]="currentPagerIndex" (selectedIndexChange)="onIndexChanged($event)" class="pager">
<ng-template pagerItemTemplate let-i="index" let-item="item">
<GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
<Label [text]="item.title"></Label>
<Image stretch="fill" row="1" [src]="item.image"></Image>
</GridLayout>
</ng-template>
</Pager>
<DockLayout row="1" orientation="horizontal" stretchLastChild="true" class="bg-primary">
<Button dock="left" text="Prev" (tap)="prevPage()" class="btn btn-primary"></Button>
<Button dock="right" text="Next" (tap)="nextPage()" class="btn btn-primary"></Button>
<Button text="nav" [nsRouterLink]="['/dummy']" class="btn btn-primary"></Button>
</DockLayout>
</GridLayout>
Error
ystem.err: com.tns.NativeScriptException:
System.err: Calling js method instantiateItem failed
System.err: TypeError: Cannot read property 'nativeView' of null
System.err: File: "file:///data/data/org.nativescript.demong/files/app/tns_modules/nativescript-pager/src/android/pager.js, line: 242, column: 31
System.err: StackTrace:
System.err: Frame: function:'PagerAdapter.instantiateItem', file:'file:///data/data/org.nativescript.demong/files/app/tns_modules/nativescript-pager/src/android/pager.js', line: 242, column: 32
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
It seems to me, that the line
pager.notify({ eventName: Pager.selectedIndexChangedEvent, object: pager, oldIndex: oldValue, newIndex: newValue });
after 60 line in file
node_modules\nativescript-pager\src\common.js
is lost.
Because without it the event selectedIndexChanged
isn't triggered. Can you please fix it in your plugin?
Hi,
Currently we can see now one slide in whole screen. Is it possible to show previous and next slide too ? i mean 3 slide at a time ?
should i give pager weight show for showing half of index page right and left inside view
_```
<AbsoluteLayout style="margin-top:50;">
<!-- <Label text="10, 10" left="0" top="50" width="90" height="90" backgroundColor="red"></Label> -->
<GridLayout left="0" top="50" rows="auto" backgroundColor="yellow" top="20" columns="*,*,*,*,*,*,*">
<Label text="This text should be on top of pager" ></Label>
</GridLayout>
</AbsoluteLayout>
<Pager row="1" [items]="items | async" #pager (selectedIndexChange)="onIndexChanged($event)" class="pager" backgroundColor="lightsteelblue">
<ng-template let-i="index" let-item="item">
<GridLayout rows="*" columns="*">
<StackLayout orientation="vertical" backgroundColor="red">
<Label class=" h6" style="font-size:13;" [text]='item.title'></Label>
</StackLayout>
</GridLayout>
</ng-template>
</Pager>
``
Is there a possibility to add support for pager indicator like in HTML slideshow (dots at the bottom) indicating which pagerView you are on? And if that can be another customisable view, that would be great.
If selectedIndex is not set on Pager, it will simply not work and crash on swipe. It should probably default to 0.
Using Angular and on iOS if I set selectedIndex without binding it, the first selected page will show "Pager.items not set", until you change page to another and back again.
It seems that binding the selectedIndex property and changing it from code does not work on iOS, it doesn't change page to the new index. Works on Android.
Yes, that is what I was trying to do, but the demo app doesn't run.
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x103b1d89b NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2 0x1041c11ee ffi_closure_unix64_inner
3 0x1041c1b32 ffi_closure_unix64
4 0x10749a9cb _CFXRegistrationPost
5 0x10749a732 ___CFXNotificationPost_block_invoke
6 0x1074e31e2 -[_CFXNotificationRegistrar find:object:observer:enumerator:]
7 0x107392679 _CFXNotificationPost
8 0x1047cfcd9 -[NSNotificationCenter postNotificationName:object:userInfo:]
9 0x104c5cf66 -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:]
10 0x104c63568 -[UIApplication _runWithMainScene:transitionContext:completion:]
11 0x104c60714 -[UIApplication workspaceDidEndTransaction:]
12 0x107eb08c8 __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__
13 0x107eb0741 -[FBSSerialQueue _performNext]
14 0x107eb0aca -[FBSSerialQueue _performNextFromRunLoopSource]
15 0x1073f6301 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
16 0x1073ec22c __CFRunLoopDoSources0
17 0x1073eb6e3 __CFRunLoopRun
18 0x1073eb0f8 CFRunLoopRunSpecific
19 0x104c5ff21 -[UIApplication _run]
20 0x104c64f09 UIApplicationMain
21 0x1041c198d ffi_call_unix64
22 0x117c9fb80
JavaScript stack trace:
1 @file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:208:56
2 @file:///app/tns_modules/tns-core-modules/xml/xml.js:148:20
3 parse@file:///app/tns_modules/tns-core-modules/js-libs/easysax/easysax.js:751:34
4 parse@file:///app/tns_modules/tns-core-modules/xml/xml.js:195:27
5 parse@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:214:32
6 parseInternal@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:47:16
7 loadPage@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:143:40
8 @file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:94:34
9 @file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:113:35
10 navigate@file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:213:48
11 createRootView@file:///app/tns_modules/tns-core-modules/application/application.js:216:27
12 didFinishLaunchingWithOptions@file:///app/tns_modules/tns-core-modules/application/application.js:122:38
13 @[native code]
14 onReceive@file:///app/tns_modules/tns-core-modules/application/application.js:55:32
15 UIApplicationMain@[native code]
16 start@file:///app/tns_modules/tns-core-modules/application/application.js:235:26
17 anonymous@file:///app/app.js:5:18
18 evaluate@[native code]
19 moduleEvaluation@[native code]
20 @[native code]
21 promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:208:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:14:5
15:17:25 - Compilation complete. Watching for file changes.
Under iOS if you bind selectedIndex
to some model property it never selects the correct page. It just shows a blank screen. Once you try to swipe back/forth the content shows. Under android this works as expected.
Here is a playground demonstrating the problem: https://play.nativescript.org/?template=play-tsc&id=VfBiYQ
When navigating to a new component and then returning back to a page with a Pager component on, the app crashes with this log:
src/ios/pager.js:79:29: JS ERROR TypeError: null is not an object (evaluating 'this._ios.view')
See demo branch here:
https://github.com/ddfreiling/nativescript-pager/commits/demo-ng-test
How I can use Page Curl Transition for tranformer?
I have problem when run in emulator. it does not work. No error throw in console
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.