dtInstance doesn't exist on dtElement [the angular way]

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request

What versions you are using?

- angular version: 4.4.6
- angular-datatables version: 4.4.1

Hi there, I’m trying to reproduce the behavior shown in this example. The issue that I’m dealing with is located here:

      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
         dtInstance.destroy();
         this.dtTrigger.next();
      });

Where dtInstance doesn’t exist on dtElement. Any idea of what I could be missing?

[l-lin]

The annotation @ViewChild(DataTableDirective) must be just above your variable…

@ViewChild(DataTableDirective)
dtElement: DataTableDirective;

It’s a metadata for you variable. Its placement is important…

[bmdatl]

@l-lin Thank you for the reply. I actually figured that out a couple days ago after a lot of experimenting. Ultimately, instead of using @ViewChild, since I had two datatables in my component, I had to do the following to get access to both of the tables:

@ViewChildren(DataTableDirective)
    tables: QueryList<DataTableDirective>;

Then, because only one of the tables needs to be rerendered, I only put the [dtTrigger] attribute on that table and called this in my controller function:

getSetCards(code: string, name: string) {
    this.cardService.getCardsBySet(code)
      .subscribe(cards => {
        let retrievedCards = [];
        for (let card of cards) {
            retrievedCards.push(new Card(card));
        }

        if (!this.setCards) {
          this.setCards = retrievedCards;
          this.setCards['currentSet'] = name;
          setTimeout(() => {
            this.trigger.next();
          });
        } else {
          this.tables.forEach(table => {
            if (table.dtTrigger) {
              table.dtInstance.then((dt: DataTables.Api) => {
                dt.destroy();
                this.setCards = retrievedCards;
                this.setCards['currentSet'] = name;
                setTimeout(() => {
                  this.trigger.next();
                });
              });
            }
          });
        }
      });
    return false;
  }

I ended up having to use setTimeout() because my data is asynchronous. Now it works as expected