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