Currently I have a trouble. I need to integrate Angular with Widget Report Manager. But I got unknown view:reports Error.
I followed these steps:
I installed webix-pro and reports with npm i @xbs/webix-pro and npm i @xbs/reports. I added js and css bundles to angular.json. This would be:
"styles": [
"node_modules/@xbs/reports/codebase/reports.css",
"node_modules/@xbs/webix-pro/webix.css"
],
"scripts": [
"node_modules/@xbs/reports/codebase/reports.js",
"node_modules/@xbs/webix-pro/webix.js"
],
I have in my component reporter.component.ts this:
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import * as webix from "@xbs/webix-pro";
@Component({
selector: 'reports',
templateUrl: './reporter.component.html'
})
export class ReporterComponent implements OnInit, OnDestroy {
private ui : webix.ui.reports
constructor(root: ElementRef) {
this.ui = <webix.ui.reports> webix.ui({
container: root.nativeElement,
view: 'reports',
url: "https://docs.webix.com/reports-backend/" //Here my backend
})
}
ngOnInit(): void {
this.ui.resize();
}
ngOnDestroy(): void {
this.ui.destructor();
}
}
Is this the correct way to integrate a webix external widget with Angular or is there another way?
I already solved it. I remove:
import * as webix from "@xbs/webix-pro";
and I added
declare const webix: any
webix-pro and reports .js and .css already are added in angular.json
Also, I could declare reports variable for customization Report Manager.