AngularJS

Last updated 15/03/2026

Angular Integration Guide

DimensionIQWidget Integration

This section explains how to integrate the

DimensionIQWidget

into an Angular application using a simple component. The example demonstrates the minimum configuration required to render the widget and handle basic events. It is intended as a starting point only, and additional callbacks will normally be required for full operational functionality.

Overview

The

DimensionIQWidget

is mounted inside a DOM container within an Angular component. The widget is initialized using a configuration object

DimensionIQWidgetProps

that defines:

• The engine URL
• A set of callbacks used to communicate with the host application

These callbacks allow the widget to interact with your application's data layer, enabling project creation, revisions, drawing uploads, and other operational features.

In a production environment, these callbacks typically communicate with a backend API, database, or remote storage service to persist and retrieve project data.

Component Structure

The example Angular component performs the following tasks:

1. Defines a container element for the widget.

2. Initializes the widget after the view has loaded.

3. Provides example callback implementations.

4. Unmounts the widget when the component is destroyed.

The widget is mounted using the provided

mount()

function and removed using the returned

unmount()

handler.

Widget Container

The widget requires a container element where it will be rendered.

<div #widgetContainer style="width:100%;height:500px"></div>

The container reference is accessed using Angular's

ViewChild

decorator.

@ViewChild('widgetContainer', { static: true })
containerRef!: ElementRef<HTMLDivElement>;

Initializing the Widget

The widget is initialized in the

ngAfterViewInit()

lifecycle method. This ensures the DOM element exists before mounting the widget.

const widgetProps: DimensionIQWidgetProps = {
    engineURL: '',
    callbacks: {}
};

The configuration object contains the required properties used by the widget.

Engine URL

widgetProps.engineURL = '/';

The

engineURL

defines the base location where the widget engine resources are hosted. This location should contain:

• The rendering engine
• Supporting assets
• Font files
• Additional runtime resources required by the widget

In most deployments, the engine URL points to a directory on your web server or CDN that hosts the widget engine distribution.

Example:

/dimension-iq-engine/

or

https://cdn.yourdomain.com/diq-engine/

Widget Callbacks

The widget communicates with the host application through a set of callbacks. These callbacks allow the widget to request actions such as creating projects, adding revisions, or retrieving stored data.

The callbacks in this example are intentionally simple and primarily log information to the console. They return successful responses without performing any real storage operations.

In a real application, these callbacks would typically:

• Call a REST API
• Send or retrieve data from a database
• Communicate with a remote storage service

Basic Angular Integration of the DimensionIQWidget

This example shows how to integrate the

DimensionIQWidget

into an Angular component. The widget is mounted into a container using the

mount()

function after the view initializes

ngAfterViewInit()

.

A

DimensionIQWidgetProps

object defines the

engineURL

and callbacks. In this example, callbacks only log data and return success, in production, they should connect to a backend service or database.

The widget is unmounted in

OnDestroy

to ensure proper cleanup.

Angular Integration Example

import {
    Component,
    AfterViewInit,
    ElementRef,
    ViewChild,
    OnDestroy
} from '@angular/core';

import type {
    DimensionIQWidgetProps,
    DIQ_DrawingRevision,
    DIQ_Layout,
    DIQ_Project,
    DIQ_Result,
    DIQ_Revision
} from '../types/dimension-iq-widget.es';

import { mount } from '../lib/dimension-iq-widget.es.js';

@Component({
    selector: 'app-root',
    template: `<div #widgetContainer style="width:100%;height:500px"></div>`
})

export class AppComponent implements AfterViewInit, OnDestroy {

    @ViewChild('widgetContainer', { static: true })
    containerRef!: ElementRef<HTMLDivElement>;

    unmount: any;

    ngAfterViewInit() {
        const widgetProps: DimensionIQWidgetProps = {
            engineURL: '',
            callbacks: {}
        };

        widgetProps.engineURL = '/';

        widgetProps.callbacks.onProjectNew = async function (
            project: DIQ_Project | null,
            onResponse: (result: DIQ_Result) => void
        ) {
            console.log(project);
            console.log(onResponse);
            onResponse({ ok: true, message: '' });
        };

        widgetProps.callbacks.onRevisionNew = async function (
            revision: DIQ_Revision | null,
            onResponse: (result: DIQ_Result) => void
        ) {
            console.log(revision);
            onResponse({ ok: true, message: '' });
        };

        widgetProps.callbacks.onDrawingNew = async function (
            drawing: DIQ_DrawingRevision | null,
            layouts: Array<DIQ_Layout>,
            onResponse: (result: DIQ_Result) => void
        ) {
            console.log(drawing);
            console.log(layouts);
            onResponse({ ok: true, message: '' });
        };

        widgetProps.callbacks.onListRevisions = async function (
            project: DIQ_Project,
            onResponse: (
            result: DIQ_Result,
            revisions: Array<DIQ_Revision> | null
            ) => void
        ) {
            console.log(project);
            const revisions: Array<DIQ_Revision> = [];

            revisions.push({
            key: 'unique-revison-key',
            projectKey: project.key,
            number: 1,
            name: 'Revision 1',
            notes: ''
            });

            onResponse({ ok: true, message: '' }, revisions);
        };

        this.unmount = mount(this.containerRef.nativeElement, widgetProps);
    }

    ngOnDestroy() {
        this.unmount();
    }
}