Search code examples
dartangular-componentsangular-dart

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?

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.