Expand each part of Ng-Bootstrap accordion by clicking anywhere on the header

Question

How can I trigger the expansion event of each panel by clicking in any part of the header not just on the title?

 <ngb-accordion [closeOthers]="true">
        <ngb-panel title="Vehículo 1">
          <ng-template ngbPanelContent>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem sed ipsum harum, atque excepturi quaerat saepe quia iste
            ratione rem culpa aut praesentium. Quasi voluptatem, beatae iure minus alias ipsa a quas necessitatibus placeat
            itaque esse dolor at impedit vero in atque hic nulla molestiae quod nihil provident aliquam est excepturi? Dignissimos
            harum quasi sed, quibusdam officiis quos ea provident error fugit, vero veniam? Deserunt, laboriosam quasi. Pariatur
            reprehenderit odit dolore voluptates doloremque deserunt, minima reiciendis libero quia! Sunt, itaque possimus
            dignissimos voluptates, hic quasi velit nobis deleniti, quae magni dolor sit excepturi. Tempore deleniti tempora
            delectus cumque provident ipsam.
          </ng-template>
        </ngb-panel>

        <ngb-panel title="Vehículo 2">
          <ng-template ngbPanelContent>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cupiditate quibusdam, eveniet optio libero, adipisci vitae
            iusto numquam laudantium totam veritatis, vero officiis ullam est veniam minima molestiae dolores minus maxime
            enim tenetur ipsam consequuntur aliquam obcaecati. Ad non deleniti consectetur neque doloribus fugiat sed. Modi
            laborum quis labore quod earum quia? Quae rem provident vel quam nulla! Minima id exercitationem dicta blanditiis,
            velit odio similique in, a molestias reprehenderit adipisci possimus maiores eius. Veritatis architecto, ab eveniet
            totam harum quae deleniti rerum voluptatibus qui possimus ipsa maiores magnam tenetur sed inventore officia dolorum
            modi ad obcaecati id repellendus? Consequuntur!
          </ng-template>
        </ngb-panel>
</ngb-accordion>

Answer 1

Simply wrap your card headers in a tag elements like shown in the code snippet below and make sure each a tag has the following attributes:

data-toggle="collapse" data-target="#collapseOne" where "collapseOne" needs to be replaced with the id of the corresponding card-body element.

Click "run code snippet" below and expand to full page for testing (and adjust your Angular code to produce the following HTML output):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container mt-3">
    <div class="row">
        <div class="col">
            <div id="accordion">
                <div class="card">
                    <a href="#" data-toggle="collapse" data-target="#collapseOne">
                        <div class="card-header" id="headingOne">
                            <p class="mb-0 ml-3">
                                Collapsible Group Item #1
                            </p>
                        </div>
                    </a>
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body">
                            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.
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a href="#" data-toggle="collapse" data-target="#collapseTwo">
                        <div class="card-header" id="headingTwo">
                            <p class="mb-0 ml-3">
                                Collapsible Group Item #2
                            </p>
                        </div>
                    </a>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                        <div class="card-body">
                            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.
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a href="#" data-toggle="collapse" data-target="#collapseThree">
                        <div class="card-header" id="headingThree">
                            <p class="mb-0 ml-3">
                                Collapsible Group Item #3
                            </p>
                        </div>
                    </a>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                        <div class="card-body">
                            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.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

You can do it using css and make the accordion title a element full width

/deep/ div.card-header  a {
  display: block;
}

or use a custom header with an html element that has a display block such as a div

<ngb-accordion [closeOthers]="true">

     <ngb-panel >    
        <ng-template ngbPanelTitle  >
          <div>&#9733; <b>Fancy</b> title &#9733;</div>
        </ng-template>  

            <ng-template ngbPanelContent>
                Lorem ipsum dolor sit amet consectetur 
            </ng-template>
        </ngb-panel>

        <ngb-panel title="Vehículo 2">
            <ng-template ngbPanelContent>
                Lorem ipsum dolor sit ame
            </ng-template>
        </ngb-panel>
    </ngb-accordion>