ngx-scrollreveal
ngx-scrollreveal copied to clipboard
tinesoft
Question, Can I use ng-scrollreveal with Loops
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
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).
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'}"
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
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.
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).
Please provide values for tags and treeHeight variables as well, so that i can try reproduce
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.
OK, i'll have a look at it tonight after work. Don't have access to my machine right now...
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?
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>
I tried using ngsRevealService.sync() to refresh the list of children generated dynamically but it didnt make a difference.
@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.
@tinesoft @VikramVasudevan @Vingtoft same issue here. Doesn't work with *ngFor.
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