Question, Can I use ng-scrollreveal with Loops

[aemaghrabi]

Hello,
I'm trying to use ng-scrollreveal with Angular2 NgFor, but it seems not working.
My guess is that ng-scrollreveal is only instantiate once the component is created.
So, how can I re-instantiate it after doing NgFor?

Thanks,
Ahmed Mohamed

[aemaghrabi]

Update,
I found method to use ng-scrollreveal dependency with for loop, but it's now not respond to main container scroll, only respond to master page (browser scroll).

[tinesoft]

Hi Ahmed,

Can you post your code?

If your intent is to animate a list of HTML elements, you can use
[ngsRevealSet] directive +
[ngsSelector]="<YOUR_CHILD_ITEM_CSS_SELECTOR>" to specify which item to animate
like this :

<parentElement  [ngsRevealSet] [ngsSelector]=".childItem">
</parent element>

Depending on your template, you might want to change the container which is listened to for the scroll, using the container option: [ngsRevealSet]="{container='.parentElementSelector'}"

[aemaghrabi]

Hi tinesoft,
Actually, I want to animate PrimeNg tree.
I've a forked repo from PrimeNg, you can refer to the link below for the full code.
https://github.com/EgyTechnology/primeng/blob/master/components/tree/tree.ts#L37

You will find 2 component, which I'm interested in; Tree and p-treeNode.
Tree component contain repeater using ngFor that's repeats component p-treeNode.

@Component({
    selector: 'p-treeNode',
    template: `
        <template [ngIf]="node">
            <li class="ui-treenode {{node.styleClass}}" *ngIf="!tree.horizontal" [ngClass]="{'ui-treenode-leaf': isLeaf()}">
                <div class="ui-treenode-content" (click)="onNodeClick($event)" (contextmenu)="onNodeRightClick($event)"
                    [ngClass]="{'ui-treenode-selectable':tree.selectionMode}">
                    <span class="ui-tree-toggler  fa fa-fw" [ngClass]="{'fa-caret-right':!node.expanded,'fa-caret-down':node.expanded}"
                            (click)="toggle($event)"></span
                    ><div class="ui-chkbox" *ngIf="tree.selectionMode == 'checkbox'"><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-c fa" 
                            [ngClass]="{'fa-check':isSelected(),'fa-minus':node.partialSelected}"></span></div></div
                    ><span [class]="getIcon()" *ngIf="node.icon||node.expandedIcon||node.collapsedIcon"></span
                    ><span class="ui-treenode-label ui-corner-all" 
                        [ngClass]="{'ui-state-highlight':isSelected()}">
                            <span *ngIf="!tree.getTemplateForNode(node)">{{node.label}}</span>
                            <span *ngIf="tree.getTemplateForNode(node)">
                                <p-treeNodeTemplateLoader [node]="node" [template]="tree.getTemplateForNode(node)"></p-treeNodeTemplateLoader>
                            </span>
                    </span>
                </div>
                <ul class="ui-treenode-children" style="display: none;" *ngIf="node.children && node.expanded" [style.display]="node.expanded ? 'block' : 'none'">
                    <p-treeNode *ngFor="let childNode of node.children" [node]="childNode" [parentNode]="node"></p-treeNode>
                </ul>
            </li>
...
        </template>
    `
})

@Component({
    selector: 'p-tree',
    template: `
        <div [ngClass]="{'ui-tree ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode}" [ngStyle]="style" [class]="styleClass" *ngIf="!horizontal">
            <ul class="ui-tree-container">
                <p-treeNode *ngFor="let node of value" [node]="node"></p-treeNode>
            </ul>
        </div>
...
    `
})

Thanks For Helping

[tinesoft]

Hi Ahmed,

I never used PrimeNG before, can you post the code (html template and typescript) of your host component ? I mean the one where you use the p-tree component.

If you have custom CSS on this host component, post that as well.

[aemaghrabi]

Sure,
This is what I write in host component to use PrimeNg tree.

        <p-tree #navigatorTree [value]="tags" selectionMode="single" [(selection)]="selectedFile" 
            [style]="{'height': treeHeight, 'overflow':'auto'}"
            (onNodeSelect)="onSelect($event.node)"></p-tree>   

The nodes are loaded to array called tags (in attribute value).

[tinesoft]

Please provide values for tags and treeHeight variables as well, so that i can try reproduce

[aemaghrabi]

Ok, It's will be hard to send you tags values, because I'm receiving tags using services and APIs.
But you can use some dummy data, you can use this structure

let tags: any = [
        {
            "label": "Documents",
            "data": "Documents Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [{
                    "label": "Work",
                    "data": "Work Folder",
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
                },
                {
                    "label": "Home",
                    "data": "Home Folder",
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
                }]
        },
        {
            "label": "Pictures",
            "data": "Pictures Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [
                {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
                {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
                {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
        },
        {
            "label": "Movies",
            "data": "Movies Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [{
                    "label": "Al Pacino",
                    "data": "Pacino Movies",
                    "children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}]
                },
                {
                    "label": "Robert De Niro",
                    "data": "De Niro Movies",
                    "children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}]
                }]
        }
];

Regarding treeHeight it defines the height of the tree, you can use 68vh as default value.

[tinesoft]

OK, i'll have a look at it tonight after work.
Don't have access to my machine right now...

[tinesoft]

Hi @EgyTechnology

Sorry for the delay. I try to reproduce your case by creating a project using the ng-prime library,
but i could not figure out the appropriate css selector, to identify items to be animated.

Did you come up with a solution?

[VikramVasudevan]

was this ever addressed ? Seems like ngsRevealSet does not work when the child divs are dynamically generated using ngFor.

        <div class="reservations-card-container" fxLayout="row wrap"
            [ngsRevealSet]="{ reset:true, container : '.reservations-card-container'}" [ngsInterval]="50"
            [ngsSelector]="'.reservations-card'">
            <div *ngFor="let reservation of reservations" class="reservations-card">
some content here
</div>
</div>

[VikramVasudevan]

I tried using ngsRevealService.sync() to refresh the list of children generated dynamically but it didnt make a difference.

[Vingtoft]

@VikramVasudevan did you find a solution? I have the same problem.
Dynamically generated (fx. in a *ngFor) elements will not work with ngsRevealSet directive.

@tinesoft any help is appreciated.

[ghost]

@tinesoft @VikramVasudevan @Vingtoft same issue here.
Doesn't work with *ngFor.

[tinesoft]

Hi all,

This is a issue I haven't reinvestigated with the lastest possibilities of Angular yet...

I will plunge myself back into it sometime soon, and let you know.

Stay tuned