clickable panel header overlaps header buttons-CodePudding

I have a panel component which has header with a title and buttons that are located in the right hand corner.

currently the downward arrow (chevron) toggles the expanding/minimising of the panels contents.

when I try to implement that the header is clickable to control the expanding/minimising of the panels contents, this also affects the " " symbols button clickable event to also cause the panel to expand/minimise which is undesirable.

(click)="toggleShowHide()" shouldnt affect the " " button

How do I have it that the " " symbol is unaffected by the whole headers clickable event? Bare in mind that other buttons may also join the " " symbol in future

dashboard.html

<div style="width: 600px">
  <custom-panel heading="TABLE" enableShowHide="true">
    <span  >
      <div >
        <span  title="New content" (click)="addContent()">
          <i  aria-hidden="true"></i>
        </span>
      </div>
    </span>
    //content
  </custom-panel>
</div>

panel.html

<div >
  <div  *ngIf="heading"  (click)="toggleShowHide()">
    {{heading}}

    <span *ngIf="enableShowHide"  (click)="toggleShowHide()" style="cursor: pointer;">
      <i [hidden]="!showPanel" title="Hide"  aria-hidden="true"></i>
      <i [hidden]="showPanel" title="Show"  aria-hidden="true"></i>
    </span>

    <span >
      <ng-content select=".panel-tools"></ng-content>
    </span>
  </div>

  <div  [ngClass]="{'panel-scrolling': panelScrolling }" [hidden]="shouldHidePanel()">
    <div >
    </div>

    <ng-content></ng-content>
  </div>
</div>

panel.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'panel',
  templateUrl: './panel.component.html',
  styleUrls: ['./panel.component.scss']
})
export class PanelComponent {
  @Input() heading: string;
  @Input() size: string;
  @Input() panelScrolling = false;
  @Input() enableShowHide = false;
  @Input() hideFirst = false;
  showPanel = true;

  toggleShowHide(): void {
    this.showPanel = !this.showPanel;
  }

  shouldHidePanel(): boolean {
    if (this.enableShowHide) {
      if (this.hideFirst) {
        this.showPanel = false;
        this.hideFirst = false;
      }

      return !this.showPanel;
    }

    return false;
  }
}

panel.scss

.panel-body {
  padding: 12px;
}

.panel-custom {
  margin: 10px 15px 10px 0;
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  background-color: white;

  .panel-heading {
    color: black;
    font-size: 16px;
    border-bottom: 1px solid black;
    padding: 8px 12px;
    @media (max-width: 1500px) {
      font-size: 14px;
    }
  }

CodePudding user response：

I recommend you to learn about "event bubbling", so you added event listener on parent element and it automatically sets it for all child element (except elements which has own event handler and stopped propagation of parent events (links for example)).

So, you can just in event handler method use method "stopPropagation" in event object which is argument

Write in comments, if you need something, I will try to help you.

CodePudding user response：

Stopping the event from propagating further from origin is a good idea.

<div  *ngIf="heading" (click)="toggleShowHide($event)">
<span title="New content" (click)="addContent($event)">

  toggleShowHide(event : any): void {
    event.stopPropagation();
    this.showPanel = !this.showPanel;
  }

  addContent(event : any): void {
    event.stopPropagation();
  }