Develop Reference

Unable to add custom buttons in ngx-datatable Angular

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.

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

Display placeholder if array is empty

I have this html code
<empty-list [hidden]="!emptylist" text="There is currently No User"</empty-list>
<div *ngFor="let userObser of userObservables">
<ion-item #emptylist *ngIf="userObser | async as user">
<h2>{{user.displayName}}</h2>
<h3>{{user.email}}</h3>
</ion-item>
</div>
I want to show the empty list if there is no user & hide it if there is at least one.
I know I can do it using a subscribe method,but I want to use async pipe also I need to unsubscribe each time I use a subscribe which is really not efficient.
My question is there a way I could create a local variable inside the ion-item the ntest test if it exists outside & therefore use it in the hidden input ? It's just a suggestion I can't really seem to make it work.

You can use a simple else inside the ngIf to display another template if the condition doesn't match:
<ng-container *ngIf="userObservables.length > 0; else emptyList">
<ng-container *ngFor="let user of userObservables">
<ion-item *ngIf="user | async as user">…</ion-item>
</ng-container>
</ng-container>
<ng-template #emptyList>
<empty-list>…</empty-list>
</ng-template>
Note that I also replaced your seemingly unnecessary div with a ng-container to avoid unnecessary DOM nodes.
As a side note to your own suggestion: template references cannot be accessed from outside the template boundary. Structural directives like *ngIf and *ngFor create their own template, so this becomes a boundary. That's why
<h2>{{ ref.innerText }}</h2>
<ng-container>
<span #ref>Hello, World</span>
</ng-container>
will work, but
<h2>{{ ref.innerText }}</h2>
<ng-container *ngIf="true">
<span #ref>Hello, World</span>
</ng-container>
won't work.

Material expansion panel content - ng-template?

I have the following code, which I stole from here:
https://github.com/angular/material2/blob/master/src/demo-app/expansion/expansion-demo.html
<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-description>Click here to change view format.</mat-panel-description>
<mat-panel-title>View Controls</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
This is the content text that makes sense here.
<mat-checkbox>Trigger a ripple</mat-checkbox>
</ng-template>
foo bar baz
<mat-action-row>
<button mat-button (click)="myPanel.expanded = false">CANCEL</button>
</mat-action-row>
</mat-expansion-panel>
One question - I am confused, because the content inside the <ng-template> tag does not display, however "foo bar baz" does display. So what is the purpose of the content inside <ng-template> and why is it not displaying?

<ng-template> doesn't render until you call it. Try this:
<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-description>Click here to change view format.</mat-panel-description>
<mat-panel-title>View Controls</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngTemplateOutlet="matExpansionPanelContent"></ng-container>
foo bar baz
<mat-action-row>
<button mat-button (click)="myPanel.expanded = false">CANCEL</button>
</mat-action-row>
</mat-expansion-panel>
<ng-template #matExpansionPanelContent> <-- Note the #hashtag
This is the content text that makes sense here.
<mat-checkbox>Trigger a ripple</mat-checkbox>
</ng-template>
This way you can build the <ng-template> once, and re-use it all of the place.

kendo Angular add Class to ng-template

I have a Kendo Grid in Angular, the Grid has some Detailgrid and within I have a GridCellTemplate. I want to add a css class to the ng-template to colorize based on value. But I cannot add.
I tried to add this line to it but giving me an error (working if I add another div inside the ng-template):
class="{{getClass(dataItem,column)}}"
This is my ng-template Code
<kendo-grid-column
field="{{column}}" >
<ng-template kendoGridCellTemplate let-dataItem class="{{getClass(dataItem,column)}}">
value
</ng-template>
</kendo-grid-column>

Complex headers in angular2-data-table

I'm trying to create a table with a complex header (multi-line header) like this:
using the angular-2-data-table library found here:
https://github.com/swimlane/angular2-data-table
They have something called "Expressive cell templates" in which you can define columns like this:
<datatable
class="material"
[rows]="rows"
[options]="options">
<datatable-column name="Name">
<template let-column="column">
Hi + {{column.name}}
</template>
<template let-value="value">
Hi: <strong>{{value}}</strong>
</template>
</datatable-column>
<datatable-column name="Gender">
<template let-row="row" let-value="value">
My name is: <i [innerHTML]="row['name']"></i> and <i>{{value}}</i>
<div>{{joke}}</div>
</template>
</datatable-column>
</datatable>
plnkr here
But it seems like the column name is always defined as text, and it's unclear how you would have nested column names. Any ideas if complex headers are possible in angular2-data-table? It's possible in regular datatables (https://datatables.net/examples/advanced_init/complex_header.html).
Thanks in advance!