Count is not dynamically calculated

[rafaelss95]

I'm submitting a ... (check one with "x")

• [x] bug report => search github for a similar issue or PR before submitting
• [ ] feature request

Current behavior: It means that if I have the following template:

<ngx-skeleton-loader [count]="count"></ngx-skeleton-loader>

... and the count changes from, say, 2 to 5, it will remain at 2.

Expected behavior: I expect it to be recognized dynamically.

Reproduction of the problem https://stackblitz.com/edit/ngx-skeleton-loader-sample-yancqj

Language: [all | TypeScript X.X | ES6/7 | ES5] Angular 11, ngx-skeleton-loader 2.6.2.

[willmendesneto]

Hi @rafaelss95 , thanks for open this issue.

This was a design decision to avoid listeners, but I'm interested to know more about your specific scenario. How's your application working that you have to increase and decrease skeleton loaders? Could you elaborate more about your current scenario, please?

[rafaelss95]

Hey @willmendesneto,

This was a design decision to avoid listeners

What do you mean by listeners? When I opened the issue, I didn't go deep into the code, but now I did and unless I'm missing something, you could achieve this easily by using a Pipe that receives a number/string and creates an Array and keep using *ngFor, avoiding any kind of listeners. You can check out this example: https://stackblitz.com/edit/angular-ivy-es4uwb.

-  *ngFor="let item of items" 
+  *ngFor="let item of count | toArray" 

but I'm interested to know more about your specific scenario. How's your application working that you have to increase and decrease skeleton loaders? Could you elaborate more about your current scenario, please?

Of course! I have a monorepo and to share with all projects I created a structural directive that receives all the possible @Inputs of NgxSkeletonLoaderComponent and in this directive I can receive a dynamic count and I just noticed that I can't pass a dynamic count because NgxSkeletonLoaderComponent doesn't support it.

<ng-template [appSkeleton]="loading" [appSkeletonCount]="count">
  <span>Content to be rendered when loading is falsy</span>
</ng-template>

I don't have any specific case I'm aware until now, but since I got a failing test, I decided to open this issue here.

---

That said, if the suggestion I gave doesn't work or you don't want to adopt, wouldn't it be better to use @Attribute instead of @Input, since by design, it isn't supposed to be changed? Also maybe a note on README explaining this would be great.

[willmendesneto]

Great news! Now ngx-skeleton-loader accepts count with binding. It's also documented on the examples and it's available on ngx-skeleton-loader@2.9.0. So feel free to update and enjoy!

Closing this issue since it's solved already. Thanks for raising that!