Using Angular Components with Third-Party Libraries

Cool Image

As developers, we aim to use existing libraries in order to avoid reinventing the wheel. Unfortunately, Angular is still relatively young, and we cannot find an Angular component for everything we need.

The purpose of this article is to demonstrate use cases in which Angular components can be connected with vanilla JS libraries.

#Example One

For this example, we will use a 🆒 library called Sweet Alert.

SweetAlert makes popup messages easy and pretty

One of the useful options that we can pass to the library is the content option, which is a DOM element that will be rendered inside the modal, for example:

Sweet Alert Example

We can now take advantage of this and pass an Angular component as content. For this to work, we need to create a component dynamically. We create a simple component that can be passed to Sweet Alert.

The next thing we need to do is to create the component.

After we have created the component, we obtain a reference to the native DOM element, which is passed to the Sweet Alert content option.

In addition, of course, we can pass Input() if necessary.

Live demo from StackBlitz. Try editing the code yourself.

#Example Two

For this example, we will use a library called highcharts.

Many times we need to customize the chart tooltip with our markup. Various libraries like highcharts give us the option to pass an HTML string that will be rendered inside the tooltip.

Let’s create an Angular component and pass it to the library.

We created a simple component that gets the data as Input() and displays it in a list. Now, let’s see how we can use it.

First, we create the component once inside the ngOnInit hook. Inside the formatter callback, we have access to the chart points which pass to our component as Input().

Next, we perform a change detection and returning the innerHTML that will be rendered inside the tooltip element.

HighCharts tooltip with Angular component

Live demo from StackBlitz. Try editing the code yourself.

👂🏻 Last but Not Least, Have you Heard of Akita?

Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment for over seven months, and we’re continually adding features to it.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

I highly recommend checking it out.

🚀 Introducing Akita: A New State Management Pattern for Angular Applications

Follow me on Medium or Twitter to read more about Angular, Akita and JS!