Develop Reference

ngx datatable set nowrap to custom column

I'm looking for a way in ngx-datatable, to disable the wrap of texts in a column, I found a way, here's the stackblitz link.
In
Basic datatable with fixed width, align and text-wrap
In the columnsWithFeatures it defines a noWrap for the columns, and it magically fixes my wrap problem... but I doesn't use a columns object, instead I gotta use custom columns like
<ngx-datatable-column name="Type" prop="tipus">
<ng-template ngx-datatable-cell-template let-value="value">
<mat-icon *ngIf="value == '0'" [matTooltipPosition]="'above'" color="primary"
matTooltip="Entruster">
supervisor_account
</mat-icon>
<mat-icon *ngIf="value == '1'" [matTooltipPosition]="'above'" color="primary"
matTooltip="Deliverer">
local_shipping
</mat-icon>
</ng-template>
</ngx-datatable-column>
I've tried to set noWrap for my custom columns like name and prop, but it doesn't accept that there. How should I make it 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.

Passing template to swimlane/ngx-datatable

I am using swimlane/ngx-datatable component and I developed a wrapper for ngx-datatable. 
Wrapper:
<div class="wrapper">
<ngx-datatable [rows]="rows">
<ng-content></ng-content>
</ngx-datatable>
</div>
Use:
<app-wrapper>
<ngx-datatable-column name="Name">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
<span>{{ value }}</span>
</ng-template>
</ngx-datatable-column>
</app-wrapper>
This does not work, custom html that I wrote inside app-wrapper is not passed to the component. How would someone go through this if the component already uses ng-template?

This is not directly related to ngx-datatable. Angular doesn't currently support content projection with ng-content more that 2 levels of components deep. No, using ng-content inside ngx-datatable inside app-wrapper will not work.

Angular 4.0 Teradata ng-template with ngFor

I'm using the td-data-table from the teradata/covalent framework but independet from the framework I'd like to use *ngFor in an like this:
<ng-template *ngFor="let column of columns" tdDataTableTemplate="{{column.name}}" let-value="value">
<div>
<span>{{value.content}}</span>
<br>
<span *ngIf="enabler">{{value.subContent}}</span>
</div>
</ng-template>
I've read that the syntax for using *ngFor with an is different, so I've tried this:
<ng-template ngFor let-column [ngForOf]="columns" tdDataTableTemplate="{{column.name}}" let-value="value">
<div>
<span>{{value.content}}</span>
<br>
<span *ngIf="enabler">{{value.subContent}}</span>
</div>
</ng-template>
Is it the framework which is preventing the code to work or have I written something wrong?

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!