Angular Creating an additional column beside the e

I basically generating a table and populating it in my angular 7 application. What I am looking at is generating an additional column when the user clicks the Add Sideletter button as shown in the screenshot. For example it should create column next to column Class B. How could I go about doing this. I have add class button on the table and clicking it creates a record and it populates the table with last td containing new record. I now need that clicking the Add side letter button should create a column beside it.

Or another way I can think of creating an addition column along with the existing column and hiding it. Shoring it only when the Add side letter button is clicked.

I have added a fiddle https://jsfiddle.net/76w4zhnu/

html

<style>
    th,
    td {
        padding: 7px;
        min-width: 300px;
        max-width: 300px;
    }


    .fundClassesTable {

        table-layout: fixed;
    }

    .cellbgcolor {
        color: transparent;
    }

    .btn {}

    .tableItem {
        text-align: center;
        border-left: solid 1px lightgrey;
        border-top: solid 1px lightgrey;
        border-right: solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;

    }

    .rowItem:hover {
        background-color: #f5f7f7;
    }


    label {
        margin-left: 0.5rem;
        vertical-align: middle
    }


    .panel-heading {
        color: black;
        /* background-color: #F59850; */
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading .left-label {
        display: inline-block;
        padding-top: 5px !important;

    }

    .scrollClass {
        overflow-x: scroll;
        display: grid;
    }

    .panel-heading label {
        margin-bottom: 0px !important;
    }
</style>

<table class="fundClassesTable table-striped">
            <tr *ngFor="let c of ColumnNames">
                <ng-container *ngIf="c != ColumnNames[45] && c != ColumnNames[46] && c != ColumnNames[47] || isHurdle;">
                    <th
                        [ngClass]="c != ColumnNames[56] && c != ColumnNames[57] && c != ColumnNames[38]? 'tableItem bold' : 'tableItem cellbgcolor'">
                        {{ c }}</th>
                    <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
                        <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[4]">
                            <div *ngIf="EditMode[f.Id]">
                                <button type="button" class="btn btn-default btn" style="float: left;"
                                    (click)="reviewClicked(f.Id,1)">Review Terms</button>
                                <!-- <input kendoTextBox [(ngModel)]="f.AuditSummary" style="width: 100%; height: 29.5px;" />
                  <input kendoTextBox [(ngModel)]="f.AuditSummary" style="width: 100%; height: 29.5px;" /> -->
                                {{f.AuditSummary}}
                            </div>
                        </td>
                        <td colspan=i class="tableItem" *ngIf="c == ColumnNames[5] && i<1"></td>
                        <td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}
                        </td>
                        <td *ngIf="EditMode[f.Id]  && c == ColumnNames[6]" class="tableItem">
                            <kendo-dropdownlist  style="height: 29.5px;" [(ngModel)]="f.CurrencyId"
                                [defaultItem]="defaultItem" class="form-control  form-control-sm"
                                [data]="LegalFundClasses.Currencies" [filterable]="false" textField="Name"
                                [valuePrimitive]="true" valueField="Id">
                            </kendo-dropdownlist>
                        </td>

                        <td *ngIf="!EditMode[f.Id] && c == ColumnNames[7]" class="tableItem"> {{f.ManagerStrategyName}}
                        </td>
                        <td *ngIf="EditMode[f.Id] && c == ColumnNames[7]" class="tableItem">
                            <kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.ManagerStrategyId"
                                [defaultItem]="defaultItem" class="form-control  form-control-sm"
                                [data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
                                [valuePrimitive]="true" valueField="Id">
                            </kendo-dropdownlist>
                        </td>
                         <td class="tableItem" *ngIf="c == ColumnNames[56]">
                            <div *ngIf="EditMode[f.Id]">
                                <div *ngIf="hideAdd">
                                    <button type="button" class="btn btn-default btn mr-1" style="float: left;"
                                        (click)="openSideLetterModal(f.Id,f.Description)">Add Side Letter</button>
                                </div>
                                <div *ngIf="hideDelete">
                                    <button type="button" class="btn btn-default btn" style="float: left;"
                                        (click)="deleteSideLetter()">Delete Side Letter</button>
                                </div>
                            </div>
                        </td>
                         </ng-container>
                </ng-container>
            </tr>
        </table>

Component

 public ColumnNames: string[] = ['Legal Class Name',
                            'Last Edited',
                            'Legal Class ID',
                            '',
                            'TERMS',
                            'SUBSCRIPTIONS',
                            'Primary Currency',
                            'Manager Strategy (populate only if different from Fund Manager Strategy)'
                            'Space2'
                          ];

回答1:

Please, first create an auxiliar array keys, so ,e.g.if you has

   public keys:string[]=['Description','AuditSummary','Id']
   public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID'];

You can create a .html like

<table class="fundClassesTable table-striped" border="1">
    <tr *ngFor="let c of ColumnNames;let i=index">
        <th class="tableItem bold">{{ c }}</th>
        <td *ngFor="let f of data">
            {{f[keys[i]]}}
        </td>
    </tr>
</table>

so many *ngIF are killing me softly :)

Well, I don't understand if you want create a new row with data. In this case you only change the two arrays, columnName and Keys. e.g.

  this.ColumnNames.push('Add Web folio Reds Fee');
  this.keys.push('WebfolioRedsFee')

as you can see in this ugly stackblitz

If you want to add a column you only need add an element to your data array. e.g.

  //add a new empty column
  this.data.splice(index,0,{})
  //or add a new column with a copy of data[10]
  this.data.splice(index,0,{...this.data[10})

回答2:

The problem is that HTML makes tables by row. You would have to create a script that manually adds a <td></td> element to every row if you wanted a new column. Or you could fix your table so it's read top down instead of left to right. That way you can simply add a new row and maintain your data integrity at the same time.

EDIT Specifically, change the orientation of your table something like this (I left out all the extra class names that you can add as you need. Too much to type.):

<table>
   <tr>
     <th>Legal Class Name</th>
     <th>Last Edited</th>
     <th>Legal Class ID</th>
     <th>TERMS</th>
     <th>Primary Currency</th>
     <th>Manager Strategy</th>
   </tr>
   <tr *ngFor="row of rows">
     <td>{{classObject.className}}</td>
     <td>{{classObject.lastEdited}}</td>
     <td>{{classObject.classID}}</td>
     <td>{{classObject.terms}}</td>
     <td>{{classObject.primaryCurrency}}</td>
     <td>{{classObject.managerStrategy}}</td>
   </tr>
</table>

You can have an object storing all the details about the classes or whatever it is this table is for. Then you just have to add an element to the object when the click the "addRow" button. It will then auto populate the table.