May 24, 2018
One of my first post was about creating a library for angular (note the feature image that shows a most recent library :) ) . It was quite tricky as you had to create a couple of script to make everything working correctly.
With the new @angular/cli this task is now really easy to accomplish so let's exercise by creating our first and maybe useful library.
What we want to achieve is something like that:
Maybe you got scared and maybe you are thinking that you'll need to write a lot of code but bear with me and you'll see that everything will be ready in few steps.
Remember to install the latest (6.0.3) version of angular/cli and when you ready we can generate our new project:
ng new data-table
Enter into the cli project and create our library called ngx-data-table:
cd data-table/ ng generate library ngx-data-table
This command will generate for us a new folder:
and it will update our angular.json, package.json and tsconfig.json.
We don't really need to worry about what @angular/cli did for us but it is good to know that under the wood it's using ng-packagr as you can notice opening the package.json. Technically our library is done and ready to be shipped so if you're not interested to create the data-table you can run:
npm run build ngx-data-table --prod
and in the dist folder we'll find our bundle ready to use or maybe publish on npm:
I really suggest to continue reading this post and you'll see that in few steps and writing some code we'll have our data-table ready to use. We can remove all the files inside the lib folder and create ours. So:
rm -rf projects/ngx-data-table/src/lib/*
enter inside the lib folder:
and run the following command:
ng g module ngx-data-table
this will generate our fresh new module.
If you still with me let's try to use some other schematics of @angular/cli.
ng add @angular/material --project=data-table
This command will preconfigure our environment for @angular/material making changes on our package.json and angular.json. By default it uses the indigo-pink theme but if you prefer another one instead, feel free to change in the angular.json file in the style object.
Drumroll....let's generate the material table:
ng generate @angular/material:material-table --project=ngx-data-table --name=ngx-data-table
This is my favourite one!!!. We generated a material table without writing any code; we just need to export the component (line 14):
Include the library just created inside the app.component (ts and html) under src/app (line 15):
Our data-table library with :
- item per page
Some of you will complain saying:"yes buuuut..... the data are static and a library with static data is not a library!" Ok ok let's apply also these changes and finish it ;)
Open the ngx-data-table.component.ts under lib/ngx-data-table and apply these changes:
What we doing here it's passing an input called data, create the datasource and the displaycolumns from the the first object in the array.
The ngx-data-table-datasource.ts doesn't need anymore the static data and need some small changes to take the values dynamically:
If you compare with the original one I didn't change a lot, I've just added an extra parameter in the constructor to take the source and modified the getSortedData to be dynamic.
Finally we can change also the template:
that can loop with an ngFor.
We done with the library the only thing that we need to do it's to pass same mock data from the app and see if it works.
Open app.component.ts under src/app and add some mock data as follow (feel free to change the name of the columns or remove one):
and in the app.component.html we pass them:
Now if we did everything correctly the result should be that one:
I truncate some data just to show the footer as well :)
If something is not working as expected I published everything on this repro.
@Bonus - How do we publish a library on npmjs.org?
First thing that we need to do is register on npmjs.
After that we can move inside the folder of our library:
Now we can setup our NPM author info:
npm set init.author.name "Your Name" npm set init.author.email "[email protected]" npm set init.author.url "http://yourblog.com" npm adduser
We can initialise our package.json (adding some informations like author, repo, website etc):
npm init npm install -g pakmanager
After that we can move on our dist folder that we generated before(
npm run build ngx-data-table --prod) and run:
npm publish ./
Stay tuned for the second part of this post and we'll improve our data-table ;)
Thanks @robwormald and @ocombe for the review... really appreciated!
If you enjoyed this post follow me on twitter @Dzurico