Accordion Feature Request - Title Content that does not cause expand/collapse

Hi Guys, nice work on the library, it’s really starting to take shape! Thanks for your all your effort!

I have a feature request that I’d like to run by you and discuss. From what I can tell, when the ngbPanelTitle directive is used with the accordion, all the content is wrapped in an <a> element and as such all content will toggle the collapse state of the panel.

I have a use case where I’d like to have content in the panel header/title which does not toggle the collapse state.

For example…

<ngb-accordion>
  <ngb-panel>
    <template ngbPanelTitle>
      <span>Click on me to toggle panel</span>
      <span>Non toggle text</span>
      <input placeholder="Should not cause expand/collapse">
    </template>
    <template ngbPanelContent>
        Some Settings
    </template>
  </ngb-panel>
</ngb-accordion>

So with the present implementation, both <span> and the <input> elements will cause the toggling to occur.

Is there a way to achieve this with the current implementation ?

The first idea that comes to mind is to have another directive, say ngbPanelHeader for argument’s sake, that is the same as ngbPanelTitle, but does not get wrapped in the <a> element.

So the above example would now look something like this

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel id="1">
    <template ngbPanelHeader>
      <span (click)="acc.toggle('1')">Click on me to toggle panel</span>
      <span>Non toggle text</span>
      <input placeholder="Should not cause expand/collapse">
    </template>
    <template ngbPanelContent>
        Some Settings
    </template>
  </ngb-panel>
</ngb-accordion>

I realise that this would introduce another way to virtually do the same thing, but I can’t see another way to allow my particular use case, and keep the simplicity of the existing ngbPanelTitle directive for the 95% of use cases.

I’d be happy to help with a contribution if this is something you’d consider supporting in ng-bootstrap.

[amitjindal]

Hi, I was looking for this feature too as I needed to show 3 icon buttons in the collapsed header (Edit/Clone/Delete). Came across this. I understand this is not yet available. However I was able to implement this as a hack with angular events. Posting it in case it helps anyone:

Step 1: Pass $event to handler

    <template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
      <button (click)="clicked($event)">Cool</button>
    </template>

Step 2: Bypass default and use your code in handler

  clicked(event:Event) {
    event.preventDefault();
    console.log("Clicked");
    event.stopPropagation();
  }

http://plnkr.co/edit/y9Iy7pk9Zj6hQ9rQmbWb?p=preview

This is kind of a hack but for now I could not find any other solution that works.

[jhuntoo]

@pkozlowski-opensource ok I’ve just jotted this down, sorry if it’s incoherent!

1. ngbPanelHeader directive with manual click event handling

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel id="1">
    <template ngbPanelHeader>
      <span (click)="acc.toggle('1')">Click on me to toggle panel</span>
     <input placeholder="Should not cause expand/collapse">
    </template>
    <template ngbPanelContent>
        Some Settings
    </template>
  </ngb-panel>
</ngb-accordion>

Pros:

• Preserves the simplicity of ngbPanelTitle

Cons:

• Manual event handling is required.
• Slightly more complex implementation of ngb-panel, it needs to support both ngbPanelHeader and ngbPanelHeader and validate that only one is present.

2. Nested header/title directives (Taken from #465)

<template ngbPanelHeader>
      <!-- prepend something -->
      <template ngbPanelTitle><b>Fancy</b> title</template>
      <!-- append something -->  
</template>

Pros:

• ??

Cons:

• ties the concept of a panel title, to something that is both descriptive text and an action source (panel toggling in this case.) Which makes sense for when ngbPanelTitle is used alone, but could be restrictive when using the more free-form ngbPanelHeader directive.

3a. new ngbAction directive. 1 instance supported

ngbPanelHeader is aware of ngbAction and knows that it should perform toggling. ngbAction adds click event binding to template element. Should this be within the template element??

<template ngbPanelHeader>
       <template ngbAction><b>Fancy</b> title with toggle Action</template>

</template>

Cons:

• it’s not immediately obvious what the action does

Pros:

• ngbAction serves as a marker & event binding directive, that can be used elsewhere like in Tabset

3b. ngbAction directive. Multiple instances supported with targeting

ngbPanelHeader supports mutiple theoretical actions, and so targeting must be used like so. If no targeting is applied, the parent directive will either use a default action, or raise an error.

<template ngbPanelHeader>
       <template ngbAction="toggle"><b>Fancy</b> title with toggle Action</template>
      <template ngbAction="someOtherAction">Secondary Action</template>

</template>

Cons:

• more complexity in supporting multiple actions within a containing directive

Pros:

• opens up many more use-cases, though not sure how likely they are to be needed.

3c. ngbAction directive. Multiple instances supported with targeting and custom event binding

Same 3b, but it with an additional directive for changing which event to bind to. If ngbActionTrigger is not supplied, default to onClick.

<template ngbPanelHeader>
   <template ngbAction="toggle" ngbActionTrigger="onBlur"><input placeholder="this toggles on blur"></template>

</template>

Cons:

• more complexity in configuring the event bindings via another directive

Pros:

• opens up many more use-cases, though not sure how likely they are to be needed.

Without a lot of control library experience, I couldn’t come up with a lot of pros & cons, let me know if you think of anything.

My personal preference would actually be 3c, which is the most complex in terms of library implementation, but IMO the most flexible for users, allowing for arbitrary actions to be define in a template, for any ngb component.