question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(cdk/scrolling): Add support for nested for loop

See original GitHub issue

Feature Description

The Angular Material cdk-virtual-scroll-viewport property is not working correctly for nested *ngFor. The viewport is split into two and the scroll does not work as expected. Please assist in listing in viewport with parent and child.

Use Case

<cdk-virtual-scroll-viewport itemSize="50">
 <div *cdkVirtualFor="let parent of parents">
    <h4>{{ parent.name }}</h4>
    <div>
      <div *ngFor="let child of children">
        <p>{{ child.name }}</p>
      </div>
    </div>
  </div>
</cdk-virtual-scroll-viewport>

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kramarcommented, May 18, 2022

Is it possible to run a new voting round for this one?

0reactions
angular-robot[bot]commented, Apr 3, 2022

Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular virtual scroll not working correctly for nested for loop
If you add a cdk-virtual-scroll in a child component then you will have no problem having multiple nested within each other. Example:.
Read more >
@angular/cdk | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >
https://raw.githubusercontent.com/angular/material...
... feat | **menu:** add support for passing in data to the menu template ... feat(cdk/scrolling): add input to enable append-only mode in...
Read more >
What You Need to Know about Vue CLI 3 - Telerik Blogs
To add ESLint support, for instance, you'd run vue add @vue/eslint . ... in documents with deeply nested bookmark hierarchies and is not ......
Read more >
Falcon Sandbox v8.31 © Hybrid Analysis
... contents to be detected a `for(i in obj)` loop must be used.) ... NOTE: this will get patched up when other animation...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found