To solve this, I used an isLoading$ subject to keep track of when data is currently loading, and I subscribe to it at the level where the IgxGrid is implemented. When a new loading comes through as 'true', I set the grid data to null and then set the grid.isLoading property to my subject's value. 

The main issue I believe is that when the grid still has data, the loading icon will not display, so give an empty data set to clear it.

 if (this.isLoading$){
      this.isLoading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {
        if (loading) { this.grid.data = new Array(); }
        this.grid.isLoading = loading;
      });
    }

I’m sorry, I meant to ask how you would apply a right-align to the headers without using the dataType property of the column?

If I were to apply a center-align rather than a right-align, I would use this class for the cellClasses input of the cell:

center-align {
    text-align: center;
    justify-content: center;
}

But how would I achieve the center alignment for the header as well?

I also upvoted myself on accident since it’s my first post here and was seeing what the buttons did

How would you apply the right-align to the headers as well?