Skip to main content

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": [

We are going to use Datatable to display the employee list. We have to import the module in the employee module in order to use the component. So in employee.module.ts include this add DataTableModule in imports.

import { DataTableModule } from "primeng/components/datatable/datatable";

In the employee-list/employee-list.component.html add

<p-dataTable [value]="employeelist">
      <p-column field="name" header="Name">
      <p-column field="department" header="Department"></p-column>
      <p-column field="gender" header="Gender"></p-column>
        <ng-template let-col let-employee="rowData" pTemplate="body">
          <button type="button" md-mini-fab (click)="selectEmployee(employee)" > 
<i class="fa fa-info" aria-hidden="true"></i></button>

And in employee-list/employee-list.component.ts we will create an array of employee object .


      this.employeelist = data;


ngOnInit() {


So we will call the service in an function and we will call the function in ngOnInit. 


ngx-bootstrap is another library which uses bootstrap for styling. We are going to use the modal popup of ngx. Why? Simple its' component style makes it separate item and its responsive. Let's install ngx-bootstrap.

npm install ngx-bootstrap --save

The ngx uses the @angular/animations package for animation. So we need to install this also

npm install --save @angular/animations

We will add the ModalModule in employee.module.ts.

import { ModalModule } from "ngx-bootstrap/modal";

Next we need create the popup for the employee view. Lets create a component.

ng g c employee-view 

We will add bootstrap modal template with bs-modal  directive.  We will have a openPop variable inside employee-view.component.ts which will use to determine whether to show the modal.

@Input and @Output is used to communicate with the component. EventEmitter is used to emit events from the component so that the parent component can listen. Why openPopChange eventemitter? Because we need to update the openPop when the use dismiss the modal by other means. The onHidden function listens to the onHidden eventEmitter for the bs-modal and it will emit the openPopChange emitter which will set the openPop false.

We will add the component in employee-list and once the user clicks on the little information button in the data list, it will set the openPop value as true and the modal will pop up.

So we added third-party libraries . See you on next post


preethi Shetty said…
The actual time and effort taken to create this wonderful article were really great and would like to read this blog regularly to get more useful stuff...
Best Online Software Training Institute | Angular 4 Training
cyber news said…
thanks for sharing the information.
Indian Cyber Army’s most awaited internship is live now. Summer Internship 2018 on “ Ethical hacking” and book your seats before it runs out.Candidates have to get themselves registered to be a part of this Internship program. Here internship will give you on-the-job experience, help you learn whether you and Cyber security industry are a good match and can provide you with valuable connections and references. Here interns are usually exposed to a wide variety of tasks and responsibilities which allows the intern to showcase their strengths by working on projects for various managers that work on different parts of Indian Cyber Army. Becoming a high performing intern is a fantastic way to improve your employment prospects. This internship can be a great way to get your foot in the door of success with a prestigious or desirable Organization.As career in ethical hacking is most in demand.
Shekhar Kukkar said…
Thanks for the information.It is really nice .Information security is the set of processes that maintain the confidentiality, integrity and availability of business data in its various forms.In this age of Technology advancement, computer and information technology have not only brought convenience to citizens in modern life but also for policemen & various Government officials of the nation to fight cybercrime through various modus operandi. Indian Cyber Army has been dedicated in fighting cyber crime, striving to maintain law and order in cyberspace so as to ensure that everyone remains digitally safe.Read more:- Information Security
cyber news said…
thanks for sharing the more valuable information.
Indian Cyber Army credibility in Ethical hacking training & Cybercrime investigation training is acknowledged across nation as we offer hands on practical knowledge and full assistance with basic as well as advanced level ethical hacking & cybercrime investigation courses. The training is conducted by subject specialist corporate professionals with wide experience in managing real-time ethical hacking/ cyber security projects. Indian Cyber Army implements a blend of academic learning and practical sessions to give the candidate optimum exposure.Ethical hacking training ,
Ethical hacking course
unicsol said…
thanks for sharing this article
I Found this article useful same as your. you can visit by clicking java training in Hyderabad
Tony Chew said…
Kriteria kartu jackpot DominoQQ online Kartu Enam Dewa >> Mendapatkan bonus jackpot sebesar 80% dari total jackpot di meja. Kartu Balak >> Mendapatkan bonus jackpot sebesar 20% dari total jackpot di meja.
bandar ceme terbaik
paito warna terlengkap
syair sgp

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…

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…

Getting started with React native

It's been a long time since i have posted anything in this blog. I have been trying react-native for the last 3 months. And it's been a wonderful experience. From a Angular background it seemed difficult to adopt react initially. Once i got it, it seems very easy and interesting. About the performance of RN is just awesome.
I am using
Windows 10 AndroidInstallation
Installation is pretty simple. There are two ways to create an application, using expo-cli and react-native-cli. I prefer the second one. It seems like a little complex but when developing large application it's the best way to start.

As a prerequisite we need to install nodeJS, Python, JDK and need to setup Android. We need to install react-native-cli globally for creating and running the project
npm install -g react-native-cli
Once you install the cli we can create the application.
react-native init firstProject After creating the application we can move into the application folder and run the a…