Create Mapper Component Using SVG In Angular 7

Recently, while working on a project, I came across this unique requirement where I needed to show the mapping between two HTML table records, simulating which record from the 1^st table is mapped/linked to a record of the 2^nd table. The functionality should allow the user to easily drag & drop row from one table over the table row & accordingly, the mapping should be created. After doing some R &D, I made up my mind to make use of SVG (Scalable Vector Graphics) to implement the mapping functionality between two HTML table records. When we talk about SVG, the first thing that comes to our mind is an image, but it’s more than that. You can do programming in it by dynamically creating SVG tags, elements, etc. You could even add animations to your SVG images. For more information on SVG, please self-explore more on it.

Enough of the theory. Let’s get on to our project requirements. The technology stack we’ll use is Angular 7 & SVG. I’ll use Angular CLI to create a new project with the name demo-app.

For this demo, we will try to create a mapping between customers & products. We could have any data for that matter, since our main aim from this article is to understand the logic behind creating the mapping between 2 HTML tables using SVG. I’ll be using JSON files for both datasets, which we’ll try to fetch using HTTP requests in order to simulate the HTTP calls in the real world. Below is the snapshot of what we’ll build in this demo.

Here is the architecture of our application, we’ve one shared module wherein we’ll keep our mapper component since it needs to be generic & reusable across the application. We also have a “modules” module which will store our application feature modules.

We’ll use PrimeNG turbotable to showing our data in tabular format. Here are the libraries that I’m using in my application.

After installing the required packages, I’ve added the below entry in angular.json file

For listing PrimeNG modules, I’ve added a new module named app-primeng.module.ts & added the reference of this to our application main module i.e. in shared.module.ts file.

Our application does have some constant which we are storing in app.constants.ts file. Here is the content of the app.constants.ts file.

As you could see from the above file, we have some SVG constants created for use in the application. The advantage of doing so is that some of the SVG attributes are case sensitive. By following the above approach, it will be less error prone since we have all our attributes defined at one place. If any change is needed, we can simply update it over here. Inside our Shared module, we’ll now create a mapper component which will help the user create a mapping. I’m keeping the table datasource type as Object (since I need it to be generic in nature).