Integrating Drupal with Angular

How to quickly integrate Angular with a Drupal website

create a custom Drupal module
allow for placing it as an external module on a page
Want the same?

About the client

We were approached by an independent autoimmune disease association. The main goal of the association is to prevent morbidity at an early stage and improve the quality of life of people with such diseases.

Key task

The client has a Drupal website. On one of its pages, there is a questionnaire that lets you assess your autoimmune disease risk. The form used to run on a custom module linked to the Paragraphs module.

Later, the client decided that it was time to update everything about the form from the order and content of the questions to the algorithm of the result calculation. The previous solution was not consistent with the new requests, and the client faced a choice: to rewrite the old module with the new logic in mind or to write a new one and integrate it with the website.

Angular block on Drupal website

The client chose the latter and outsourced the development of this block to another company. The block was to be developed in Angular, whose structure and logic were very different from those of a custom Drupal module. We received the deliverables in the form of a zip file with layouts, scripts, and styles that made it match the website’s appearance.

Our task was to integrate this Angular block with the Drupal site.

integrate angular with drupal

Solution: Integrating Angular with Drupal

As a way to save the time we would otherwise spend on integrating logic into the site structure, we decided to make a separate settings page for the module. There, the client could alter texts and pictures as he wished.

We integrated the new Angular module into the Drupal website, which turned out to be faster than rewriting the old module. Moreover, the module works independently of Drupal and stores the logic for calculating the results in JavaScript.

Angular is not exactly our specialty, so the developer had to skim through the documentation. In particular, we had to delve into the code of the Angular module to monitor for conflicts between scripts and adjust questions and answers in the process.

Result

The solution was not complicated and took less time than if we had rewritten the existing module logic inside the website. Now everything works smoothly, and the client is happy.

 

Drop us a line

Your email isn’t going to end up in the inbox abyss, never replied.
At ADCI Solutions, we care about each inquiry

Next case study

Heating Equipment Manufacturer

Dealer portal for a WordPress website and its integration with the CRM