How to use custom HTML and Styling in AngularDart Material Expansion Panel heading?

Question

Is it possible to use custom HTML and Styling in a AngularDart Material Expansion Panel heading?

I would ideally like to add a material-chip next to a title. For example next to 'Ordinary Panel' in the image below.

Reading this documentation I can add text to the header through the name input. And I can edit this styling through some css like:

:host ::ng-deep header .primary-text {
    font-weight: bold;
    font-size: 18px;
}

But how would I do something like putting a button or material-chip alongside a title in the header?

What I've tried:

You can add custom buttons to the expansion panel through adding a div with an action tag like so:

<div action>
    <material-button (trigger)="functionCall()">
        Button Text
    </material-button>
</div>

This is also shown in the source code of the documentation of this example:

The DOM shows the action buttons present with this class:

And the header presents with this class.

Creating a div with a 'header' tag has no effect (unsurprisingly) as it's not in the documentation.

Answer 1

Expand icon needs to be disabled, to show custom actions.

alwaysHideExpandIcon bool* If true, the expand icon should never be visible.

<material-expansionpanel
  [alwaysHideExpandIcon]="true"
  [hideExpandedHeader]="true"
  name="Panel with header actions on the right">
  <div action class="action">
    <material-button>
      Edit
    </material-button>
    <material-button>
      Duplicate
    </material-button>
  </div>
  This is a panel with additional actions on the right part of the header.
  Clicking header actions doesn't expand the panel.
</material-expansionpanel>

Here is the source code of Material Expansion Panel

There are few other ng-contents with tags "name" and "value" that you can use. They don't require disabling the expand icon.

One or more panels are grouped together in a expansion-panel-set. When a panel is clicked on, the panel contents expand. A panel consists of a name, a value, optional secondary text, and the expanded panel contents. Content element with attribute value will be used as the "value" of the panel contents when it is in a collapsed state Interactions with a panel are done through the parent expansion-set. The set takes into account the state of the other panels in the set, and issues the appropriate actions onto each individual panel.