Cannot capture click of a button

[Ravi Shah]

I have text as well as a button on SB-item-header. Now if I want to capture a click of a button it is taking the click of the toggle.

I tried to play with event.preventDefault(); but no luck.

Any leads to getting this click?

[Alejandro Soto]

can you please paste markup here ?

[Ravi Shah]

Sorry, didn't include the example.

<squeezebox [multiple]="false">
                <sb-item>
                    <sb-item-head>
                              <span>TEST</span>
                              <button (click)="tempClick()"> </button>
                       </sb-item-head>
                    <sb-item-body>Lorem ipsum dolor</sb-item-body>
                </sb-item>
</squeezebox>

Now, I am trying to capture the event of the button in sb-item-head but I am unable to capture an event.

Hope that makes some sense to you.

[Alejandro Soto]

Don't think is going to work that way, the sb-item-head only receives text as content, under the hood it contains an a tag, if you want to listen when the head is clicked i guess we can update source to make an output method so the head event can be listened, that works for you ? you are also free to contribute with pull request

[Ravi Shah]

Yes, You're right. I saw atag in code under the hood. I can make PR but I didn't get what did you mean by

make an output method so the head event can be listened

[Alejandro Soto]

i meant maybe we can have something like:

<squeezebox [multiple]="false">
    <sb-item>
        <sb-item-head (onItemToggled)="tempClick()">Test</sb-item-head>
        <sb-item-body>Lorem ipsum dolor</sb-item-body>
    </sb-item>  
</squeezebox>

[Ravi Shah]

Okay Thanks
Let me give a try when I have some time and will create PR.

[Ravi Shah]

Well, I got some time to play with it.

What I wanted to do is in the sb-item-header have capabilities to detect button click as well as the tap some other place of the header

This is what the code look like for this

<sb-item-head >
 <test-component [Data]="payment.paymentData (onButtonClick)="buttonDetails($event)">  </test-component>
 </sb-item-head>

You can see here there are two different taps

1. Click on button which is covered by sb-item-header button
   <a role="button" (click)="toggleClick($event)"><ng-content></ng-content><span class="toggle-icon"></span></a>

2. onButtonClick() from test-component

Now, if I try to pass my button event click to sb-item-header still it is getting the (click)="toggleClick($event)" as the button is inside the sb-item-header.

[Alejandro Soto]

mm i see will push an update soon maybe that helps you will be an output on each item so you know when the time is toggled

[Alejandro Soto]

@imrvshah code updated please see the outputs section https://github.com/asotog/squeezebox/#outputs

[hahnjas]

I have resolved this for our Angular 4 application by using the following:
<div [innerHTML]="item.description"></div>. This might help others as well ;)