Search code examples
aureliaaurelia-templating

Aurelia: How do I inject a component template in existing html?

As you can see in the below image, it is not working out for me. The template html appears above the table and not below the header as I expected.

enter image description here

What I am trying to do is create an optional filter component that works with the table data. When adding the component it should display an extra row below the header columns with inputs/button which allow you to put filters on specific columns.

So obviously I am doing something wrong, or doing something that I shouldn't. If so, how do I properly inject the template of the filter-table component?

My app.html.

   <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>City</th>
                <th>Username</th>
                <th>Email</th>
                <th>Nationality</th>
            </tr>
            <table-filter containerless></table-filter>
        </thead>
        <tbody>
            <tr>
                <td>??</td>
                <td>Name</td>
                <td>City</td>
                <td>Username</td>
                <td>Email</td>
                <td>Nationality</td>
            </tr>
        </tbody>
    <table>

My table-filter component.

// Viewmodel
@customElement('table-filter')
export class TableFilterComponent {
    // Nothing here    
}

// Template
<template>
    <tr>
        <th>Filter header 1</th>
        <th>Filter header 2</th>
        <th>Filter header 3</th>
        <th>Filter header 4</th>
        <th>Filter header 5</th>
        <th>Filter header 6</th>
    </tr>
</template>
Solution

  • I bet this is because <table-filter /> is not a valid element inside of a <thead /> element.

    Try this and see if it works: 

    <thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>City</th>
        <th>Username</th>
        <th>Email</th>
        <th>Nationality</th>
    </tr>
    <tr as-element="table-filter" containerless></table-filter>
</thead>

    And then just remove the <tr /> element in your custom element's template.

    <template>
   <th>Filter header 1</th>
   <th>Filter header 2</th>
   <th>Filter header 3</th>
   <th>Filter header 4</th>
   <th>Filter header 5</th>
   <th>Filter header 6</th>
</template>

    Finally, there are some good tips in this Github issue: https://github.com/aurelia/binding/issues/409