pro-grammatically introduce Spacing between rows in angular 4 application

Question

i am implementing angular 4 application. I am trying to display data in tabular format which i have done to some extent but need to introduce spacing in the specific row. For e.g i need to introduce the space after Net Premiums Written. I may have to do it pro grammatically. How do I achieve that.

html code

<!-- Card -->
<div class="card">
    <!-- Financial Statement -->
    <div class="card-header" role="tab" id="fs_heading">
        <a [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="isExpanded = !isExpanded"
            role="button" [attr.aria-expanded]="isExpanded" aria-controls="nva">
            <h5 class="mb-0">Financial Summary for {{strategyName}}</h5>
        </a>
    </div>
    <div [ngClass]="{'show': isExpanded}" id="fs" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
        [attr.aria-expanded]="isExpanded">

        <div class="card-body">
            <ul class="nav nav-pills financial-tab" id="financial-tab" role="tablist">
                <li class="nav-item">
                    <a  [ngClass]="selectedFinancialOption===1 ? 'active' : ''" class="nav-link" id="sincome-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="table"
                        (click)="onTabClick(1)">Income Statement</a>
                </li>
                <li class="nav-item">
                    <a [ngClass]="selectedFinancialOption===2 ? 'active' : ''" class="nav-link" id="cash-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart" aria-selected="false"
                        (click)="onTabClick(2)">Cash Flow Statement</a>
                </li>
                <li class="nav-item">
                    <a [ngClass]="selectedFinancialOption===3 ? 'active' : ''" class="nav-link" id="balance-tab" data-toggle="pill" href="javascript:void(0);" role="tab" aria-controls="chart" aria-selected="false"
                        (click)="onTabClick(3)">Balance Sheet</a>
                </li>
            </ul>
            <div class="tab-content Financial-content" id="pills-tabContent">
                <!-- Income table -->
                <div *ngIf="selectedFinancialOption===1 && fsIncomeStatementTable && fsIncomeStatementTable.length > 0" 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 style="height:50px">
                                <th *ngFor="let cell of fsIncomeStatementTable[0]"> {{cell}}</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of fsIncomeStatementTable | slice:1" [ngClass]="{'net-cost': row[0] === incomeStatementStyles[0] || row[0] === incomeStatementStyles[1] || row[0] === incomeStatementStyles[2] || row[0] === incomeStatementStyles[3]}">
                                <td>{{row[0]}}</td>
                                <td *ngFor="let cell of row | slice:1">{{cell | shortAndBlankNumberFormat: 2}}</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <!-- Income table -->
                <!-- Cash Table Start-->
                <div *ngIf="selectedFinancialOption===2" id="base-strategy--fs-cashflow" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                    <table class="table">
                        <thead>
                            <tr style="height:50px">
                                <th *ngFor="let cell of fsCashFlowTable[0]"> {{cell}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of fsCashFlowTable | slice:1" [ngClass]="{'net-cost': row[0] === cashFlowStyles[0] || row[0] === cashFlowStyles[1]}">
                                <td>{{row[0]}}</td>
                                <td *ngFor="let cell of row | slice:1">{{cell | shortNumberFormat: 2}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Cash Table End-->
                <!-- Balance sheet Table Start-->
                <div *ngIf="selectedFinancialOption===3" id="base-strategy--fs-balancesheet" role="tabpanel" aria-labelledby="table-tab" aria-expanded="false">
                    <table class="table">
                        <thead>
                            <tr style="height:50px">
                                <th *ngFor="let cell of fsBalanceSheetTable[0]"> {{cell}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of fsBalanceSheetTable | slice:1" [ngClass]="{'net-cost': row[0] === balanceSheetStyles[0] || row[0] === balanceSheetStyles[1] || row[0] === balanceSheetStyles[2] || row[0] === balanceSheetStyles[3]}">
                                <td>{{row[0]}}</td>
                                <td *ngFor="let cell of row | slice:1" >{{cell | shortAndBlankNumberFormat: 2}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Balance sheet Table End-->
            </div>

        </div>
    </div>

</div>

My current output

Expected output in terms of spacing

score 0 · Answer 1 · answered Jun 01 '18 at 08:21

JavaScript can manipulate the DOM in terms of setting HTML properties and setting CSS styles. If you want to manipulate a DOM element directly you can use

In HTML

<input #box type="text">

In TS

@Viewchild('box') textbox: ElementRef;

But this is a terrible approach to styling and to manipulating the DOM in general. What you should be doing if you need dynamic styling is this. Dynamically updating css in Angular 2. Use angular's powerful binding framework to do the work for you. You want any property of a HTML element to change? Then bind it. A simple example of adding a css class would be

<div [class.col-6]="occupyHalfTheGrid" [class.col-4]="!occupyHalfTheGrid">

and in your code

occupyHalfTheGrid = true

Since you are already using bootstrap, the real solution to your problem is to use Bootstrap's grid system to build the layout you want. https://getbootstrap.com/docs/4.1/layout/grid/ There is nothing really to programmatically manipulate for a static balance sheet such as yours.

If you find that bootstrap's grid doesn't fit you, just use raw css. https://www.w3schools.com/css/default.asp

pro-grammatically introduce Spacing between rows in angular 4 application

1 Answers1