accordion markup missing flexibility

With the new accordion markup introduced by https://github.com/ng-bootstrap/ng-bootstrap/pull/2368, it is no longer possible to style the header based on its collapsed/expanded state.

Suppose one wants to add a chevron pointing right for closed and down for opened panes:

This would be appended to the h5 element like this:

h5 {
        &:after {
            font: normal normal normal 18px/1 FontAwesome;
            content: "\f054";
            margin-top: 4px;
            float: right;
            color: white;
        }

With the new markup, there is no way to get the collapsed/expanded state at the level where style needs to be applied because it is only represented on the button child element. In the previous markup, there was a a element which had the expanded style.

In my view, ng-bootstrap should apply a class at the .card-header level to allow for such styling.

[pvelez-bp3]

Trying to put a button or an anchor with a different action than toggle the content into the title(ngbPanelTitle) does not work in IE11 and firefox because of Content model for button: “Phrasing content, but there must be no interactive content descendant”. Any clue on how to make this work?

[pkozlowski-opensource]

I tend to agree with @benouat analysis - the same work-around should be possible with new markup. Please let us know if something is still blocking so we can have a look.

In any case we want to introduce more flexibility for styling / marking up accordion title via existing issues (#465, #717).