1️ANGULAR

It is also possible to integrate QuickDEV Apps and Modules with external Angular apps.

1. Create a module

2. Publish the module

3. Share the published module

4. Download QuickDEV SDK Library

5. Create an angular project and install required libraries:

5MB

quickdev-sdk-2.3.4.tgz

//create angular project
ng new project_name  

//change directory to project_name
cd project_name

//install quickdev_sdk library
npm install "path-to-sdk-library/quickdev-sdk-2.3.4.tgz"

//install react libraries
npm install react react-dom @types/react @types/react-dom

1. Show module in your angular component. Check the following example:

app.component.html

<div class="quickdev-container">
</div>

app.component.ts

import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { bootstrapAppAt } from 'quickdev-sdk';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit, OnDestroy {
  private node: HTMLElement | null = null;
  private moduleId: string = '66229bb5ab398939c8eaa351'; //Change with module id that want to show in angular app
  private baseUrl: string = 'https://app.quickdev.cloud';

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit(): void {
    if (this.node) {
      this.node.remove();
    }

    const container = this.elementRef.nativeElement.querySelector('.quickdev-container');
    if (container) {
      this.node = document.createElement('div');
      container.appendChild(this.node);

      this.node.style.display = 'none';
      var options = { moduleInputs: {}, appDsl: '', moduleDslMap: '', baseUrl: this.baseUrl };
      var instance = bootstrapAppAt(this.moduleId, this.node, options) as Promise<any>;

      instance.then(x => {
        //outputChanged
        x.on("moduleOutputChange", (data: any) => {
          console.log(data);
        });

        //eventCalled
        x.on("moduleEventTriggered", (eventName: any) => {
          console.info("event triggered:", eventName);
        });

        this.delay(200).then(y => {
          if (this.node != null)
            this.node.style.display = 'block';

          //send input
          x.setModuleInputs({ moduleInput1: 'Data from angular' });

          //call method
          x.invokeMethod('method1');
        });
      });
    }
  }

  ngOnDestroy(): void {
    if (this.node) {
      this.node.remove();
    }
  }

  delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}