Unable to add custom buttons in ngx-datatable Angular

Question

I am new to angular and ngx-datatable and before asking this questions on SO. I've already gone through the answers with same problem which I'm facing related to adding custom buttons in each row in ngx-datatable of angular.

My HTML template looks like this:


<ngx-datatable [rows]="rows" [loadingIndicator]="loadingIndicator" class="bootstrap"
        [selected]="selected" (activate)="onActivate($event, NewEventContent)">        
      
        <ngx-datatable-column *ngFor="let column of columns; let i = index;" 
        name="{{column.name}}" prop="{{column.prop}}">        

        <ngx-datatable-column name="Actions" prop="skuCode"></ngx-datatable-column>          

        <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex"
          *ngIf="column.name==='Actions'" ngx-datatable-cell-template>
          <button type="button" class="btn btn-outline-success">Success {{rowIndex}}</button>
        </ng-template>
        
        </ngx-datatable-column>     
      </ngx-datatable>

My .ts file look like this

columns = [{name: 'Actions', prop: 'Id' }...];

I have no idea what I'm doing wrong it this and I've seen a similar type of approach in other answers of similar type of question but none of them worked for me.

Kindly help.

Does this answer your question? ngx-datatable - custom columns with action buttons — Abdo-Host
– Abdo-Host, Commented Aug 23, 2020 at 10:12
yes, @Abdo-Host I've tried this link too but got nothing. I did not even a similar type of setup is not giving me the desired result. — Rohit Sngh
– Rohit Sngh, Commented Aug 23, 2020 at 13:53

Rohit Sngh · Accepted Answer · 2020-08-23 14:13:14Z

I've found an alternative way to solve this problem and successfully implemented custom button in each row. So I thought to answer the question so that it could be helpful for anyone.

After the change, my HTML template look like this.

<ngx-datatable [rows]="rows" class="material" [loadingIndicator]="loadingIndicator" 
      [columnMode]="'force'"
      [selected]="selected" (activate)="onActivate($event, NewEventContent)"
        [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [columns]="columns">

        <ngx-datatable-column *ngFor="let column of columns; 
        let i = index;" name="{{column.name}}"
          prop="{{column.prop}}">
        </ngx-datatable-column>

        <ngx-datatable-column name="Actions" sortable="false" prop="Id">
          <ng-template let-row="row" let-value="value" let-rowIndex="rowIndex"
           ngx-datatable-cell-template>
            <button class="btn btn-dark" (click)="onSelect(row)">
              Edit{{rowIndex + 1}}
            </button>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>

kindly pay attention to the ng-template part and onSelect(row) function. The above solution works very well in my case.

Original answer https://github.com/swimlane/ngx-datatable/issues/489#issuecomment-356765048

Collectives™ on Stack Overflow

Unable to add custom buttons in ngx-datatable Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related