Ngx-bootstrap: Accordions heading with markup

[AndreyYevtukhov]

Bug description or feature request:

• [x] feature request
• [ ] bug description

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.1
Angular: 7.0.1
Bootstrap: 4.1.3

Description

It would be nice to have more control over accordions heading markup.

Sometimes we've got tasks, which require this feature, and we need to use other packages (for one component) or make some changes or "additions" in code, and they are not so simple as we want them to be.

For example to add some buttons or dynamic counters with complicated markup (not just text).

It could be done with ng-template, and look like:

...
<accordion>
  <accordion-group heading="headingTemplate">
    <!-- heading template -->
    <ng-template #headingTemplate>
      <p><b>Awesome heading</b><button class="btn btn-inline" (onclick)="doSomeCoolStaff()">with cool button</button></p>
    </ng-template>

    <!-- group content -->
    <div class='card'>
      <h1>Awesome group heading</h1>
      ...
    </div>
  </accordion-group>
</accordion>
...

[byhoratiss]

This should help, https://stackoverflow.com/questions/48910732/how-can-i-add-icon-into-ngx-bootstrap-accordion-group-heading/48910861#48910861

[AndreyYevtukhov]

@byhoratiss yep, that's it! 👍

P.S. For someone like me, direct link in documentation:
https://valor-software.com/ngx-bootstrap/#/accordion#custom-html