Angular2 – Using 3rd Party Libraries:

We always need third party libraries to build any application. The same is true for applications built using Angular2. In this post, we are going to discuss how we can use 3rd party libraries in an Angular2 app. We have discussed adding these libraries to an Angular2 app with RC version. There are a few changes so it’s better that we discuss a complete new example.

Let’s use NumeralJs. The library is used to format numbers in javascript. Here we will be using the library to format an arbitrary number.

Installing Package

npm install --save numeral

Installing type definitions
There is also a @typedefinition package available for NumeralJs. This would allow it to be used in our typescript code without any editor squigglies.

npm install --save @types/numeral

Let’s first import the numeral into our component:

import * as numeral from 'numeral';

Now we can use the numeral library. Here we are formatting numbers using numeral library.

result = numeral(10000).format('0,0');

Here is the definition of component-one.component.ts

And let’s add it to the component’s HTML.

Now let’s run it using ng serve again. Here is how our ComponentOne looks like now:

Of course, I have highlighted the formatted result.

Using CSS Styles and JS Scripts from Libraries

Now try using a package which is a little more complex than numeralJs. Here we are using Angular2 Bootstrap (ng2-bootstrap). In order to use bootstrap, we need to use CSS styles and javascript code files. Let's first install ng2-bootstrap, which allows bootstrap to be used in Angular2 typescript code.

npm install –save ng2-bootstrap

Here we are running the above command:

We also need to install bootstrap package.

npm install --save bootstrap

We need to use styles and js files from the installed bootstrap packages. Let’s add the following css file to styles section of angular-cli.json.

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

We also need to add java script file to the scripts section.

"scripts": [
   "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

And the whole angular-cli.json file is as follows:

app.module.ts

Now we need to import ng2-bootstrap module. Let’s add it to app module (app.module.ts)

import { TabsModule } from 'ng2-bootstrap';

We need to add TabsModule now to the imports section of AppModule.

imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(appRoutes),
  TabsModule.forRoot()
],

Now the app.module.ts has been updated as follows:

component-two.component.html

Now let’s add the tab to our component’s HTML. Here we are adding it to component-two.component.html

Now let’s run it. The tabs look as follows: