ngx-datatable: cellTemplate is not working

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I’m doing everything in this plunkr but to no avail: https://embed.plnkr.co/FxZo4SxKLbCPxmNTveXr/

Expected behavior

The cellTemplate column option would actually allow me to author my own template and use it.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

I need to dynamically create hyperlinks in my table

Please tell us about your environment:

Table version: 10.3.0

Angular version: 4.2.0

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

I am using chrome

Language: [all | TypeScript X.X | ES6/7 | ES5]

Typescript / Html

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (9 by maintainers)

Commits related to this issue

Comment on cellTemplate usage Added a note about cellTemplate based on this https://github.com/swimlane/ngx-datatable/issues/1066#issuecomment-338294394 — committed to egorpavlikhin/ngx-datatable by egorpavlikhin 4 years ago

Most upvoted comments

@bberkobien when you use @ViewChild, make sure you initialize anything that depends on it on or after the ngOnInit lifecycle callback. In your case, initialize columns in the ngOnInit lifecycle.

columns = [];

ngOnInit() {
  columns = [
    {name:"Name", cellTemplate: this.template},
    {name:"Gender"},
    {name:"Company"}
  ];
}

wizarrc on Oct 20, 2017

@bberkobien you can fix that by changing the lifecycle of the initialization from ngOnInit to ngAfterViewInit. I think it has something to do with when the @ViewChild is populated, which should always be after the view is initialized. I guess it’s probably a bug that you can even access it on the ngOnInit lifecycle.

wizarrc on Oct 23, 2017

The solution to this is removing the template itself from the *ngIf.

bberkobien on Oct 23, 2017

@bberkobien sorry, my mistake, my uBlock origin plugin was blocking your plunker example for some reason. I can take a look at it now.

wizarrc on Oct 20, 2017