how to make whole row clickable angular 4

Question

I have this array which I mapped in my components. I want whole row to be clickable and open the row right now when I click on row name it does not open it.

my parent html code

  <app-custom-accordion [closeOthers]="true">
  <ngb-panel *ngFor="let panel of panels" id="{{panel.Id}}">
  <ng-template ngbPanelTitle>
  <span class="panel-title">{{panel.Name}}<strong>{{' -' + '(' + panel.Tests.length + ')'}} </strong></span>
    <div class="action-items">
      <span class="material-icons fav" [class.favorited]="panel.Favorite" (click)="onFavoriteClick(panel)"></span>
      <span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(panel.Code), 'next-day-2x': isNextDay(panel.Code)}"></span>
      <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
          (ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
        <span class="custom-control-indicator"></span>
      </label>
    </div>
  </ng-template>
</ngb-panel>

my app-custom-accordion code

<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
  [class.active]="isOpen(panel.id)">
  <a href (click)="!!toggle(panel.id)" [attr.tabindex]="(panel.disabled ? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
    [attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)" [attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
  <ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
  <!-- expansion arrows -->
  <div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-expanded]="isOpen(panel.id)">
    <span class="material-icons expand"></span>
  </div>

</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
  <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>

I want when I click on

<span class="panel-title">{{panel.Name}}<strong>{{' -' + '(' + panel.Tests.length + ')'}} </strong></span>

row should be open

this is my panel

Also want to make some part of the panel title as bold... How can I do that? Any help thanks.

Answer 1

the following demo stackblitz can help solve the following things from your question:

1. an array which is mapped in the components
2. whole row is clickable and opens the content underneath it
3. ( from your comments ) Have the ngbPanel stylable: check the <ng-template ngbPanelTitle> in the HTML code below

on reading the array from the component ... underneath the 2 fixed panels, i have 5 panels which are picked from an array inside the component's ts file:

<ngb-panel id="toggle-2" >
    <ng-template ngbPanelTitle>
      you <span style="color:red">can </span> <i>fetch this</i> like <u>you</u> <strong> want </strong> 
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
<ngb-panel [title]="num" *ngFor="let num of numbers">
    <ng-template ngbPanelContent>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
        non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
        put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
        occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore
        sustainable VHS.
    </ng-template>
</ngb-panel>

to make the whole row clickable , added this css:

  ::ng-deep .btn-link { 
    width: 100%;
    padding: .75rem 1.25rem;
    text-align: left;
  }

  ::ng-deep .card-header {
    padding: 0
  }