When you’re working on your project, very often you will find yourself in need to use a non-angular library, such as a tools library or a plugin.

In this article, I will show you how to integrate third-party library named shave with Angular 2 by creating custom directive.

Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an HTML element based on a set max-height. You can take a look at it here.

Step one — Install the library:

npm install shave --save

Step two— Declare the directive:

Assuming you work with Typescript you will get this error:

cannot find module shave

Why do I get this error?

You are getting this error because the shave library doesn’t have declaration file and Typescript doesn’t know what shave is.

We need to “teach” typescript what shave is. I’m working with angular-cli, so all the customs declarations will be in a file named typings.d.ts.

After looking at shave documentation I came up with this:

We are declaring the shave module and exporting the shave function as the default. This will resolve the Typescript error, great!

You can learn more about typescript declarations here. I’m encouraged you to submit your typings to the DefinielyTyped repository so other developers can benefit from your work.

Step three — Implement the directive:

The first required param in the shave function is the DOM element. We can get a reference to the host element by injecting the ElementRef.

Our Inputs:

shaveMaxHeight — (default: 100px) allows the user to set the max height. shave — a way to set the extra options.

Why we need the setters?

We define the setters because we need a way to re-run our code every time the directive Inputs changes ( like a $watch in Angular 1 ).

In our case every time the shave options or the max height Inputs will change, we need to re-run the runShave function to update the DOM.

Another option here would be to use the ngOnChanges life cycle hook. If you have multiple Inputs to track, this method may be preferred. (In our case I am showing you also the setters approach )

Important Note:

You can implement ngOnChanges to be notified of changes if:

Your Input is JavaScript primitive type. Your Input reference changes (using some kind of immutability strategy).

If the model reference doesn’t change, but some property of the Input model changes, you may implement the ngDoCheck life cycle hook to manually construct your change detection logic.

That’s all.

☞ Please tap or click “︎❤” to help to promote this piece to others.