Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Using more than one TemplateRef in a datatable #1728

Answered by vtt-lair
vtt-lair asked this question in Q&A
Discussion options

It doesn't look like you are able to use more than one TemplateRef in a datatable.

I have a datatable setup with columns as:

const columns = [
        { title: "Name", data: "name" },
        { title: "Description", data: "description" },
        { 
          title: "Tags", 
          data: null,
          defaultContent: '',
          sortable: false,
          ngTemplateRef: {
            ref: this.tagsTemplate,
          }          
        },
        {
          title: "Actions",
          data: null,
          defaultContent: '',
          sortable: false,
          ngTemplateRef: {
            ref: this.actionsTemplate,
            context: {
              // needed for capturing events inside <ng-template>
              captureEvents: self.onCaptureEvent.bind(self)
            }
          }
        },
        { title: "Id", data: "id", visible: false }, // invisible columns need to be after templateRef column
      ];

tagsTemplate is defined as
@ViewChild('tagsTemplate', {static: true}) tagsTemplate!: TemplateRef<ElementRef>;

and actionsTemplate as:
@ViewChild('actionsTemplate', {static: true}) actionsTemplate!: TemplateRef<IcoDataTableActionComponent>;

The HTML has both these templates specified:

<ng-template #actionsTemplate let-data="adtData" let-emitter="captureEvents">
  <app-ico-datatable-action [data]="data" (emitter)="emitter($event)" ></app-ico-datatable-action>
</ng-template>

<ng-template #tagsTemplate let-data="adtData">
  <span *ngFor="let tag of data.tags">
    {{tag.key}}: {{tag.value}}<br />
  </span>
</ng-template>

If I go to the page when both are defined in columns, it shows the actionsTemplate in the Tags columns
image

If I comment out the Actions column, the tagsTemplate shows:
image

It's only when both columsn are defined that the templates aren't used correctly. Does anyone know if there is a way to link templates to specifc columns and have more than one template defined?

You must be logged in to vote

Found a solution. The datatable finds the column where there data is the dame as the elements data:
var i = columns.findIndex(function (e) { return e.data === el.data; });

Since both are defined with data: null, it would find the tags columns everytime as it's the first column with data: null.

Changing the Tags column definition to:

       { 
          title: "Tags", 
          data: 'tags',
          defaultContent: '',
          sortable: true,
          ngTemplateRef: {
            ref: this.tagsTemplate,
          }          
        },

Fixed the issue:

Replies: 1 comment

Comment options

Found a solution. The datatable finds the column where there data is the dame as the elements data:
var i = columns.findIndex(function (e) { return e.data === el.data; });

Since both are defined with data: null, it would find the tags columns everytime as it's the first column with data: null.

Changing the Tags column definition to:

       { 
          title: "Tags", 
          data: 'tags',
          defaultContent: '',
          sortable: true,
          ngTemplateRef: {
            ref: this.tagsTemplate,
          }          
        },

Fixed the issue:
image

You must be logged in to vote
0 replies
Answer selected by vtt-lair
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
1 participant
Morty Proxy This is a proxified and sanitized view of the page, visit original site.