CODEWITHSUNDEEP
htmlangular
Tom
Tom

Reputation: 8681

toggling three divs in angular 4

I am looking at toggling between three divs in my angular 4 application. I basically have three divs for the following Income Statement Cash Flow Statement Balance Sheet

If you notice anchor tags within ul - li tag . Clicking on the anchor tag should display the corresponding div. I have set the href to href="javascript:void(0); and trying to toggle based on showTable variable which is set to true by default on the component code. For some reason it doesnt work. Could somebody tell me how can I go about achieving it

<div class="card-body">
            <ul class="nav nav-pills financial-tab" id="financial-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" [ngClass]="showTable ? '' : 'active' " id="sincome-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="table"
                        aria-selected="true" (click)="showTable = !showTable">Income Statement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" [ngClass]="!showTable ? '' : 'active' " id="cash-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart"
                        aria-selected="false" (click)="showTable = !showTable">Cash Flow Statement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" [ngClass]="!showTable ? '' : 'active' " id="balance-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart"
                        aria-selected="false" (click)="showTable = !showTable">Balance Sheet</a>
                </li>
            </ul>

             <div class="tab-content Financial-content" id="pills-tabContent">
                <!-- Income table -->
                <div  *ngIf="showTable" class="tab-pane fade active show" id="base-strategy--fs-statement" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>2017</th>
                                <th>2018</th>
                                <th>2019</th>
                                <th>2020</th>
                                <th>2021</th>
                              </tr>
                        </thead>
                        <tbody>       

                             <tr>
                                <td>Direct premiums written</td>
                                <td>33,150,000</td>
                                <td>33,813,000</td>
                                <td>35,179,045 </td>
                                <td>35,882,626 </td>
                                <td>35,882,626 </td>
                            </tr>
                            <tr>
                                <td>Assumed premiums written</td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                                <td>-</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <div  *ngIf="showTable" class="tab-pane fade" id="base-strategy--fs-cashflow" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                <table class="table">
                    <thead> 
                         <tr>
                                <th></th>
                                <th>2017</th>
                                <th>2018</th>
                                <th>2019</th>
                                <th>2020</th>
                                <th>2021</th>
                              </tr>
                        </thead>
                         <tbody>
                        <tr>
                            <th colspan="6">Cash flows provided (used) by operating</th>
                        </tr>
                        <tr>
                            <td>Premiums Collected -net of ceded premium</td>
                            <td>33,150,000</td>
                            <td>33,813,000</td>
                            <td>35,179,045 </td>
                            <td>35,882,626 </td>
                            <td>35,882,626 </td>
                        </tr>
                        <tr>
                            <td>Loss and LAE Paid</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                         </tbody>
                </table>
            </div>  
             <div class="tab-pane fade" id="base-strategy--fs-balancesheet" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                <table class="table">
                    <thead>
                        <tr>
                            <th>As of the end of the period</th>
                            <th>2017</th>
                            <th>2018</th>
                            <th>2019</th>
                            <th>2020</th>
                            <th>2021</th>
                        </tr> 
                    </thead>
                    <tbody>
                         <tr>
                            <th colspan="6">Assets</th>
                        </tr>
                        <tr>
                            <td>Cash, Cash Equivalents </td>
                            <td>18,387,125</td>
                            <td>33,813,000</td>
                            <td>35,179,045 </td>
                            <td>35,882,626 </td>
                            <td>35,882,626 </td>
                        </tr>
                        <tr>
                            <td>Short Term Investments</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        </tbody>
                </table>
            </div>
        </div>  
    </div>

Upvotes: 0

Views: 176

Answers (1)

Pranay Rana
Pranay Rana

Reputation: 176906

if you wan to display div based on anchor click and toggle then do as below.

displayDivNumber:number;

onAnchorClick(no) {
 this.displayDivNumber = no;
}

html with ngSwitch 

<a (click)= "onAnchorClick(1)"> </a>
<a (click)= "onAnchorClick(2)"> </a>
<a (click)= "onAnchorClick(3)"> </a>

<div [ngSwitch]="displayDivNumber">
      <div *ngSwitchCase="1">Tab content 1</div>
      <div *ngSwitchCase="2">Tab content 2</div>
      <div *ngSwitchCase="3">Tab content 3</div>
</div>

or if need to make visible on/off indivisually then you should try to do as below by creating individual variable for each.

displayDiv1:boolean=true;
displayDiv2:boolean=false;
displayDiv3:boolean=false;    
onAnchorClick(no) {
 if(no===1) {
  displayDiv1 = !displayDiv1;
 } else if(no===2) {
  displayDiv2 = !displayDiv2;
 } else if(no===3) {
  displayDiv3 = !displayDiv3;
 }
}

html 

<a (click)= "onAnchorClick(1)"> </a>
<a (click)= "onAnchorClick(2)"> </a>
<a (click)= "onAnchorClick(3)"> </a>

<div [ngSwitch]="displayDivNumber">
      <div *ngIf="displayDiv1">Tab content 1</div>
      <div *ngIf="displayDiv2">Tab content 2</div>
      <div *ngIf="displayDiv3">Tab content 3</div>
</div>

Upvotes: 1

Related Questions