Components: [mdExpansionPanel] Expand/collapse all functionality

[ouq77]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Expand all/collapse all

What is the current behavior?

Unable to expand or collapse multiple expansion panels in a single operation, unless it is possible and I am missing something.

PS Thanks for the great effort so far - was super excited to discover that expansion panels have been added!

[ouq77]

Hey @josephperrott - I've been looking at implementing this feature and just want to run my idea past you before opening a PR.

I propose a couple of public functions on CdkAccordion (expandAll() and collapseAll() or maybe a parameterised one expandAll(expanded: boolean)) which can then be accessed via @ViewChild(MdAccordion) in any implementing components.

These functions, in turn, emits expand/collapse events via an rxjs/Subject to which the MdExpansionPanelHeader subscribe via an rxjs/Subscription. The reasoning here is that the accordion item should only respond to expand/collapse all events if the panel is part of an accordion, with multi enabled, and also exclude any panels which may be disabled.

Hope this makes sense.

[ouq77]

@josephperrott - I'm working on a PR for this feature. I'm unable to figure out how to ensure the material-examples content is working as expected - is there a gulp task I'm not seeing?

[willshowell]

@ouq77 I don't know the official answer, but if you're running material.angular.io locally, you can run gulp fetch-local in that repo to build the assets from your local material2 clone. I think that should pull in your new example.

[josephperrott]

How @willshowell described is the way we check it locally.

[thw0rted]

Anybody watching this issue, is there documentation on how to use the CDK accordion directly (rather than mat-expansion-panel)? I've been looking at this sample but I can't seem to make it work.

[ouq77]

@thw0rted - this ticket is dependant on #8201, which is currently awaiting review.

Not sure I understand the rest of your question?

[thw0rted]

Sorry, I did not explain the issue well. I have a component that I'd like to make collapsible, like a mat-expansion-panel, but styled differently and with different controls. I had hoped that cdk-accordion would do most of the heavy lifting, but it's not in the CDK documentation at all. My original question was looking for documentation on how to use cdk-accordion, maybe with examples of when it's appropriate.

After looking over the sources a bit more, I think it wasn't "working" from my perspective because cdk-accordion doesn't actually apply styles, it just adds or removes classes. I'm going to hack something together based on how mat-expansion-panel handles style and animations.

In future though, I'd like to better understand if/when it's appropriate to use CDK classes directly -- is there any high-level documentation to read about that? The docs I linked above describe a few individual CDK components but I haven't been able to find much about "what is CDK", "what's it for", "when should you use it instead of a Material component", etc etc. I don't mind digging through the sources if I have to but starting from the docs (if they exist) is much simpler.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}