How to edit a ng-template to use my HTML?

问题:

I am building a webcomponent based on the accordion component from ng-bootstrap. You can try the original component on stackblitz. What I would like is that

<ng-template ngbPanelTitle>
</ng-template>

generate

<div role="tab" id="ngb-panel-1-header" class="card-header ">
    <a href="" aria-expanded="false" aria-disabled="false" class="btn btn-block btn-primary" role="button" style="padding: 0.75rem 1.25rem;">
<!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!---->
     </a>
 </div>

instead of

<div role="tab" id="ngb-panel-1-header" class="card-header ">
    <a href="" aria-expanded="false" aria-disabled="false">
<!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!---->
     </a>
 </div>

回答1:

A solution you could use is the power of FOSS! What is the power of FOSS? Well ng-bootstrap is a MIT Open Source project. What you can do is look for the Accordion module and fork it! I dont think it is the easiest way to achieve what you want but at least it will work. Lets see.

1. Search the Accordion module inside ng-bootstrap.
2. Create an empty module in your project. I called it accordion-next.
3. Create an empty component in your project. I called it accordion-toto.
4. Copy/paste the ng-bootstrap module in yours and fix any errors you face. isString for example.
5. Use your module.
6. Enjoy.

stackblitz demo