Examples not working on angular 10

[AntonGrekov]

Hi, guys, i have no other place to ask and share my experience.
Our project has mat-angular + ngBootstrap ui libs connected. And none of them has a solution for carousel we need.
Our need is pretty simple one - just a regular carousel with 4-5 items shown in single slide, nothing special.
We need to filter data by input. Data comes from store observable.

Finally i got ngu-carousel to do what i need but it took a lot of time. We are using angular 10, and all examples on github home page of this project rely to lower version. None of them are building on angular 10 - many errors, typescript errors, variable scope errors.

I was unable to find any other carousel for out project without connecting huge libraries. Do you know any ?
https://www.npmjs.com/package/ngx-slick-carousel - was a good one at start - simple setup, also known options(worked with it before), but i was unable to make it work with filtered observable data, and i don't like including jquery only for carousel

ngu-carousel looked to me like a live, advanced project with many options and contributors, but documentation and examples could be better for begginers to start with.

[santoshyadavdev]

Hi @AntonGrekov ,
We are using Angular 10 to build the library as well as the example project is on V10, can you share the log, that will be more useful to help us fix the issues.

[AntonGrekov]

Sure. The first issue i met was TypeScript error that i was unable to fix(due to my beginner skills in TS), i tried many ways. Error is the following:

ERROR in error TS7006: Parameter 'j' implicitly has an 'any' type.

public carouselTileLoad(j) {
error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: never[]; 1: n
ever[]; 2: never[]; 3: never[]; 4: never[]; 5: never[]; }'.

const len = this.carouselTiles[j].length;
               ~~~~~~~~~~~~~~~~~~~~~
Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: never[]; 1: ne
ver[]; 2: never[]; 3: never[]; 4: never[]; 5: never[]; }'.

       this.carouselTiles[j].push(
     ~~~~~~~~~~~~~~~~~~~~~

Related code (taken from 1st example) :

 public carouselTiles = {
    0: [],
    1: [],
    2: [],
    3: [],
    4: [],
    5: []
  };

public carouselTileLoad(j) {
    // console.log(this.carouselTiles[j]);
    const len = this.carouselTiles[j].length;
    if (len <= 30) {
      for (let i = len; i < len + 15; i++) {
        this.carouselTiles[j].push(
          this.imgags[Math.floor(Math.random() * this.imgags.length)]
        );
      }
    }
  }

[AntonGrekov]

Our angular versions are next:

 "@angular/animations": "~10.0.2",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "~10.0.2",
    "@angular/compiler": "~10.0.2",
    "@angular/core": "~10.0.2",
    "@angular/elements": "~10.0.2",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~10.0.2",
    "@angular/localize": "^10.0.2",
    "@angular/material": "^10.0.1",
    "@angular/material-moment-adapter": "^10.1.3",
    "@angular/platform-browser": "~10.0.2",
    "@angular/platform-browser-dynamic": "~10.0.2",
    "@angular/router": "~10.0.2",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ng-select/ng-select": "^4.0.0",

TS - "typescript": "~3.9.5"

[santoshyadavdev]

Got it, looks like your project using strict mode, we will get it fixed, need to change the types internally. Thanks for the help.
Also as of now, you can create an interface for the carouselTiles to fix this issue.

[AntonGrekov]

Great. I was stuck how to make an interface in this particular situation. Would be great if you can point me in the correct direction(typescript article i need to read) or show me how interface should look like.

And if i remove that method. I get following errors that may be related to angular version:

error NG8006: Cannot redeclare variable 'i' as it was previously declared elsewhere for the same template.
    <li *ngFor="let i of myCarousel.pointNumbers; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"
                                                          ~~~~~~~~~~~~~

<li *ngFor="let i of myCarousel.pointNumbers; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"
                            ~~~~~~
    The variable 'i' was first declared here.

error NG8006: Cannot redeclare variable 'j' as it was previously declared elsewhere for the same template.

<li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"
                                                                ~~~~~~~~~~~~~

<li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"
                                  ~~~~~~
    The variable 'j' was first declared here.
      

[VivaThapelo]

When are you guys fixing it?

[etramell]

@santoshyadavdev - Even if you don't have time to actually fix this issue yet, can you at least explain (or point us to an explanation of) the intended logic here?

<li *ngFor="let j of myCarousel.pointNumbers; let j = index" (...omitted...)></li>

(This is directly from the example at https://www.npmjs.com/package/@ngu/carousel, and it is not valid template code because let j appears twice in the same scope.)

Which is it? Is j meant to enumerate "point numbers" or loop indices? It can't be both. What is pointNumbers and why would we use it? Haven't found that in your docs yet. I'm assuming that when the compiler isn't strict, you end up using the second assignment to j (just [0, 1, 2, ...]), so does that mean that pointNumbers is meaningless?

Any advice you can give is appreciated -- thanks!

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity for 6 months. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

Closing this issue due to no activity for 6 months.