Showing posts from July, 2017

Angular4 - primeng, ngx-bootstrap

In previous post we tried to create module, component and routing. Lets look into how to add third party libraries.

You could check out the code from here.
git checkout -b part3.0 origin/part3.0
In Angular4 adding third party libraries is pretty easy. Install using npm and add the module. Its one of my most loved feature in Angular4.


PrimeNG is one of the most used and most popular Angular4 library. It consists lot of components and its easy to setup and use. Besides it does have a good team working behind this library. In my experience it's one of the fast developing library.
To install PrimeNg run

npm install primeng --save
npm install font-awesome --save
PrimeNg needs font awesome for icons . Unlike any other libraries , PrimeNG had separate module for each component, which helps to include only selected component in the bundle.
Lets include styles for the components. In .angular-cli.json add

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.cs…

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…