Issue
It’s been used MaterialListComponent and MaterialListItemComponent components to make lists in an Application with AngularDart.
When one item of type MaterialListItemComponent is selected, I would like a behaviour similar to first ExpansionPanel example of the AngularDart Gallery. Open the item expanded. But with this component, I didn’t found a way to put more information when it are closed, like image (avatar), more labels, buttons.
Here another example, with the Google Inbox mail:
List items closed:
One Item of the list opened and expanded:
This that I would like to implement.
Is there any way or suggestions to implement this with AngularDart Components?
Solution
MaterialExpansionPanel allows for a few ng-content areas to configure the header area.
The [name], [value], and [action] areas.
In this case it sounds like you want to use the action content area. It only shows when the content is closed. You can see this in the Edit/Duplicate example here. It hides the header, but you wouldn’t need to.
Answered By – Ted Sander
Answer Checked By – Senaida (FlutterFixes Volunteer)