Open an expanded item in a list with AngularDart component


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:
enter image description here

One Item of the list opened and expanded:
enter image description here

This that I would like to implement.

Is there any way or suggestions to implement this with AngularDart Components?


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)

Leave a Reply

Your email address will not be published. Required fields are marked *