Angular 5 and jQuery DataTables !
A story about how to implement jQuery DataTables in an Angular 5 Application …
Let’s be honest, no actual implementation of jQuery DataTables inside Angular 5 is worth installing nor testing, you can try it, I did it for an entire evening without finding something cool, comprehensive and customizable. No Angular Component or Module which is enough flexible and readable that the original implementation.
So, I just implemented it myself, from scratch, here is how !
[GitHub Repository for this tutorial : https://github.com/liorchamla/angular-datatables-from-scratch && Demo : https://liorchamla.github.io/angular-datatables-from-scratch/]
Creating a new CLI Project and installing dependencies
First, you wan’t to create a new Angular 5 project with the CLI and install the dependencies for Bootstrap and jQuery DataTables using NPM :
I took the most frequent case of Bootstrap, but you can do that with any major CSS Framework like Material or Foundation as long as jQuery DataTables has a support (from the authors or from the community) for it 😉
Setting up a table in our main component (AppComponent)
Of course this also works with any other component. We wan’t to set up a table containing datas (even async data fetched from an API). Let’s see how :
Fetching data from a mock API and displaying it in a normal table
The first thing I want to do here si to fetch our data from a mock API which I created just for this tutorial :
Don’t forget fellows, in order to inject the HttpClient to your component, you have to import it in your AppModule !
Finaly, display the data in a normal HTML table using *ngFor directive
And here you are ! A nice list of fake people ! Let’s see how to make our table a real jQuery DataTables.
Addind needed CSS in our application
As I said, I choosed to go for a Bootstrap implementation here, so you’ll have to edit your global styles.css file to add Bootstrap and DataTables Boostrap 4 styling support :
For beginners, to only thing you should maybe notice is the use of the ‘~’ to reference the node_modules folder 😘
Now you have a beautiful Bootstrap table, but it is not yet a DataTable, let’s continue to achieve this !
Implementing jQuery DataTables on our own table
In order to use jQuery DataTables in your component, you have to use jQuery core library and 2 DataTables libraries : DataTables core library and DataTables Bootstrap 4 support :
Now, you can use the legendary $ inside of your TypeScript class !
Let’s also declare a dataTable property on our class which will hold our DataTable instance :
The problem of async data 😥
If you already know jQuery DataTables, you know that instanciating it is very simple and you could be tempted to just do this :
With a first look to your browser, you could think it worked just fine, but it did not !
Waiting for the data to be fetched ⏳
At the the time you instanciated the DataTable, your data were not even arrived from the server and were not filled into the HTML table, so jQuery DataTables was not able to address them correctly : search, pagination and everthing else won’t work !
This is why you’ll have to wait for the data to arrive before you can instanciate the DataTable :
This is more consistant, but still, it does not work ! You have to understand that jQuery DataTables relies on what data actualy are into the HTML Table to work properly.
The fact that data has arrived from the server to our TypeScript file does not mean that it is actualy into the HTML template.
Indeed, it won’t be in the HTML Table until the next Angular Change Detection process (when Angular sees a change in our TypeScript class and propagate it to our HTML template) !
Triggering Angular Change Detection
Don’t worry ! We can ask Angular to procede to a Change Detection when we decide it ! In order to do so, you have to ask for the injection of a special dependency : the Change Detector itself !
And now that we have access to the ChangeDetector anywhere in our TypeScript Class, we can use it to trigger the detection of changes before the instanciation of our DataTable !
The data will be projected to our HTML template before we ask jQuery DataTables to handle them :
🤘 And voilà ! 🤘
You have a full featured jQuery DataTables implemented in your component ! Notice that if you are using a Realtime Database as Firebase, you will have to destroy and reinstanciate the DataTable each time the data changes.
