CODEWITHSUNDEEP
angulartypescripttreetable
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

jQuery Treetable in Angular 2

I have created a jQuery Tree Table using this link. I need to consume a json and create a tree table based on that json. but when i do this, i get an error. I cannot bind the dynamic value data-tt-id='{{role.MenuId}}'. Any advice would be helpful, Thank you.

zone.js:388Unhandled Promise rejection: Template parse errors: Can't bind to 'tt-id' since it isn't a known property of 'div'. (" {{i}} ]data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}} ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'tt-id' since it isn't a known property of 'div'. (" {{i}} ]data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}}

Here is my code:

app.component.ts:

  constructor(private service: RolesService) { }
  roles: any[];
  ngOnInit() {
    jQuery("table").treetable();
    this.service.getAllRoles().subscribe(roles => {
      this.roles = roles
    })
  }

app.component.html:

<div class="container" style="margin:150px auto;">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th style="width:400px">Menu</th>
        <th>isView</th>
        <th>isAdd</th>
        <th>isEdit</th>
        <th>isPrint</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let role of roles; let i = index">
        <th scope="row">{{i}}</th>
        <td>
          <div class="tt" data-tt-id='{{role.MenuId}}' data-tt-parent="">{{role.Menu}}</div>
        </td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Views: 801

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Take use of attribute binding to recognize angular compiler to treat them as attribute.

[attr.data-tt-id]='role.MenuId' [attr.data-tt-parent]=""

Upvotes: 1

Related Questions