Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
50 lines (41 sloc) 1.32 KB

Using qdt-components with Angular

This is a guide on how you can use qdt-components with Angular 6.

  • Live Demo
  • npm install --save qdt-components
  • create an Angular 6 component that implements qdt-components
import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';
import QdtComponents from 'qdt-components';

const options = {
  config: {
    host: "",
    secure: true,
    port: 443,
    prefix: "",
    appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
  connections: { 
    vizApi: true, 
    engineApi: true 

const qdtComponents = new QdtComponents(options.config, options.connections);

  selector: 'qdt-component',
  templateUrl: './qdt-component.component.html',
  styleUrls: ['./qdt-component.component.less']
export class QdtComponent implements OnInit, OnDestroy {

  @Input() type: string;
  @Input() props: object;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    qdtComponents.render(this.type, this.props, this.elementRef.nativeElement);

  ngOnDestroy() {


You can’t perform that action at this time.