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

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.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "styles.css"
],

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>
      <p-column field="department" header="Department"></p-column>
      <p-column field="gender" header="Gender"></p-column>
      <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>
        </ng-template>
      </p-column>
    </p-dataTable>

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

employeelist:Employee[];

getEmployees(){
    this.empService.getEmployees().subscribe(data=>{
      console.log(data);
      this.employeelist = data;
    })

  }

ngOnInit() {
    this.getEmployees();

}

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

ngx-bootstrap 

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

Comments

Anonymous 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
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.
asikqq
dewaqq
sumoqq
interqq
pionpoker
bandar ceme terbaik
hobiqq
paito warna terlengkap
syair sgp
Ameeratel INC said…
I am impressed with your work and skills visit also Components Of BPO .
mary Brown said…
PrimeNG
Comprehensive Component Library: Offers a vast collection of UI components covering various functionalities like data tables, charts, overlays, inputs, and more.
Customization: Provides extensive customization options for components through theming, styling, and configuration.
Performance: Generally considered to have good performance, especially with larger datasets.
Community and Support: Strong community support and active development with regular updates.
Commercial License: While offering a free open-source version, PrimeNG also provides commercial licenses for additional support and features.

python projects for final year students
Deep Learning Projects for Final Year

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

Angular - 4 year road map

Flash FLV player using PHP