0

I have a table that gets populated with data after a search. I would like to run a script to hide some of the columns after the table is loaded.

I know of ngAfterViewInit() but don't want to use that because the script needs to run after the search button has been clicked and data populated, not after the page load

I have the function where the code to hide columns after the data is supposed to be loaded but when I step through in the browser debugger, the function is getting hit before there's actual data displayed in the table which is why it's not working

//not working
this.customerService.getCustomers(query).toPromise().then(data => {
    this.customers = data;
    this.hideColumns();
});

hideColumns() {
    $('.addressOld').hide()
}

Where can I call this function instead?

cooper
  • 417
  • 1
  • 10
  • 20

1 Answers1

0

You can do what you need this way (and don't need to use jQuery to only hide/show elements, use Angular and pure html properties):

.html

<button (click)="doSearch()">search</button>

<div [hidden]="customers"></div>

.ts

class YourComponent {
    customers = null;

    doSearch() {
        const query = 'something';
        this.customerService.getCustomers(query).toPromise().then(data => {
            this.customers = data;
        });

    }

}

Use the [hidden] property from html element to hide it, as explained here.

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
  • I simplified my code a lot - there are many columns and rows that get hidden based on dynamic data (which is why I used jQuery to hide since the classes that get hidden change). Is this a better way to go still than using jQuery? – cooper Oct 31 '17 at 14:13
  • The best thing is to avoid manipulating the DOM with jQuery. Let Angular do this. – Christian Benseler Oct 31 '17 at 14:20
  • The examples that I have looked at which use this use a global property. Is there a way to do this on the fly? The columns that are hidden are based on a date range so I can't declare them all in ts – cooper Oct 31 '17 at 20:01