Pager not working in NS 5.1/Angular 7.1

[relez]

Hi there, I am trying to implement a Pager in my app showing some images and since I updated to NS 5.1/Angular 7.1 I am having this issue once I try to navigate to the page where the Pager is:

Class "t41" already implements the "UIScrollViewDelegate" protocol.

I am using uglify/angular aot/webpack to run my app. I also updated to the latest version of the plugin (9.3.13).

Any help?

Thanks!

[triniwiz]

That’s a warning not an error does it crash ?

[relez]

Yes, unfortunately it does. Also, in Android I am getting [object Object], this is how my Pager looks like:

<Pager [items]="colorsList" style="height:320" disableAnimation="true" [selectedIndex]="myIndex">
    <ng-template let-image="item">
        <StackLayout style="padding:10;">
            <Label [text]="image.ColorName" class="colors-colorname" width="100%" style="text-align:center;"></Label>
            <Image [src]="image.ImageURL" width="300" height="300"></Image>
        </StackLayout>
    </ng-template>
</Pager>

Thanks!

[triniwiz]

Did you import the module ?

[relez]

Yes, i did.

[zurie]

it works fine for me. All i get is a console warning... Make sure you import "PagerModule" in your app.module.ts

CONSOLE WARN file:///app/tns_modules/nativescript-pager/pager.js:435:56: Class "UICollectionDelegateImpl" already implements the "UIScrollViewDelegate" protocol.

[ShyshkovOleg]

I've got the same problem. Module imported at app.module.ts
@relez Did you solve it some how?

[relez]

Hey @ShyshkovOleg, I didn't solve it, I solved the situation using horizontal scrolling instead of this plugin. Maybe I should try again.

[mdwe]

Hello! I've the same situation as @relez and @ShyshkovOleg - I am getting [object Object] instead of content passing in ng-template.

NS 5.1 and Angular 6.1.

I'm sure that import works fine. Code example:

<Pager row="1" [items]="items" #pager backgroundColor="lightsteelblue" [selectedIndex]="currentPagerIndex" (selectedIndexChange)="onIndexChanged($event)" class="pager">
        <ng-template let-i="index" let-item="item">
            <GridLayout class="pager-item" rows="*" columns="*" backgroundColor="red">
                <Label [text]="item.title"></Label>
            </GridLayout>
        </ng-template>
    </Pager>

And result:

[tbozhikov]

@mdwe I am getting the same behavior if I add the Pager to the app.module.ts. Adding it to the home.module.ts (the closest to where I am using it) makes it show the items correctly.

[ShyshkovOleg]

@mdwe This issue some how related with targeted API Level or AndroidManifest file. Because when I change Api level Plugin start to work as expected.
1.Try to change API Level
2. tns platform remove android
3. Build app

And One more thing:
TEMPLATE:
[items]="items | async"
Component:
this.items = new BehaviorSubject([ { title: "Slide 1", image: "~/images/latte.png" }]
And module have to be imported as @tbozhikov sad.

[mwalilu]

@mdwe I am getting the same behavior if I add the Pager to the app.module.ts. Adding it to the home.module.ts (the closest to where I am using it) makes it show the items correctly.

This addressed the issue for me.

[danielnitu]

@mdwe I am getting the same behavior if I add the Pager to the app.module.ts. Adding it to the home.module.ts (the closest to where I am using it) makes it show the items correctly.

Same for me in Angular 7.2.x and NS 5.4.x. I'm also using lazy loading for all child modules, but I'm not sure whether that has any effect. Adding it in any other module except the closest one to my component makes the entire app crash without any warnings or errors.