Cannot use with ngFor and custom directive

[santekotturi]

trafficstars

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

macOS 10.14.2

Versions

Angular CLI: 7.1.2
Node: 10.0.0
OS: darwin x64
Angular: 7.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.2
@angular-devkit/build-angular     0.11.2
@angular-devkit/build-optimizer   0.11.2
@angular-devkit/build-webpack     0.11.2
@angular-devkit/core              7.1.2
@angular-devkit/schematics        7.1.2
@ngtools/webpack                  7.1.2
@schematics/angular               7.1.2
@schematics/update                0.11.2
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Repro steps

    <div class="itemset" ngsRevealSet [ngsSelector]="'.item'">
            <div *ngFor="let x of [1,2,3]">
                   <my-custom-component class="item"></my-custom-component>
             </div>
    </div>

it also doesn't work with just an *ngFor:

<div
  class="itemset"
  ngsRevealSet
  [ngsSelector]="'.item'"
  *ngFor="let x of [1, 2, 3]"
>
  <div>{{ x }}</div>
</div>

or the same but with a nested div:

<div class="itemset" ngsRevealSet [ngsSelector]="'.item'">
  <div *ngFor="let x of [1, 2, 3]">
    <div>{{ x }}</div>
  </div>
</div>

the example does work, so i know the lib is configured correctly:

    <div class="itemset" ngsRevealSet [ngsSelector]="'.item'">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
        <div class="item5">Item 5 (will not be animated)</div>
    </div>

Desired functionality

<my-custom-component class="item"></my-custom-component> should animate in.

[Shirokuiu]

try this =>

<div class="itemset" ngsReveal ngsRevealSet [ngsSelector]="'.item'">
            <div *ngFor="let x of [1,2,3]">
                   <my-custom-component class="item"></my-custom-component>
             </div>
    </div>

You need to add ngsReveal before ngsRevealSet and [ngsSelector]="'.item'"

[VikramVasudevan]

I have the same issue. Was there a fix for this?

[Vingtoft]

Same problem here. Any solution?

[Vingtoft]

@tinesoft Do you know of any solution to this problem? Thanks!

[tinesoft]

Hi guys,

Sorry for the delay in addressing this issue... I'll have a look soon and let you know if i come up with a solution.

Stay tuned

[tinesoft]

Related to #5

[rvasseur31]

I am using angular 13.3.3, and i confirm that it is working with :

<div
  class="itemset"
  [ngsRevealSet]="{ reset: true }"
  [ngsInterval]="50"
  [ngsSelector]="'.itemset'"
  *ngFor="let x of [1, 2, 3]"
>
  <div>{{ x }}</div>
</div>