Angular ng-show section display issue

Question

I'm used Angular-6 and i added ng-bootstrap pills section and put some dive show hide option, that is my issue

When i click the Get Started text open new div in the same section, that is working fine, but i click the second pill (Fancy tittle ), that section sown the same section , you can see my issue on this stack blitz , i wanna know how to hide second and third pill shown that section

code here

.html

<div>
    <ngb-tabset type="pills">
        <ngb-tab title="Simple">
            <div *ngIf="!showDiv">
                <ng-template ngbTabContent>
                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
                        retro synth
                        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
                        butcher retro keffiyeh
                        dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip
                        placeat salvia cillum
                        iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                    <br>
                    <div class="mr-1 adge badge-light" (click)="showDiv = !showDiv">Get Started</div>
                </ng-template>
            </div>
        </ngb-tab>
        <ngb-tab>
            <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
            <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee
                squid.
                <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
                    farm-to-table
                    craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
                    ullamco ad vinyl
                    cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica
                    VHS salvia
                    yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
                    sustainable jean
                    shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr
                    butcher vero
                    sint qui sapiente accusamus tattooed echo park.</p>
            </ng-template>
        </ngb-tab>
        <ngb-tab title="Disabled">
            <ng-template ngbTabContent>
                <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla
                    facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget
                    tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et
                    molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent
                    fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut
                    bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes,
                    nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec
                    tortor vel tellus pulvinar feugiat.</p>
            </ng-template>
        </ngb-tab>
    </ngb-tabset>

    <!----- section Show--->
    <div *ngIf="showDiv">
        <div class="container ">
            <p (click)="showDiv = !showDiv">Go back</p>
            New section
        </div>
    </div>
</div>

.ts

//show div
showDiv: boolean = false;

Thanks

Answer 1

I found the solution

<ngb-tabset type="pills" (tabChange)="showDiv = false">