Get Free Trial

Error : Unable to create the Component. DOM element with ID ‘pivotContainer’ is not found

Answered
gssspillai asked on August 24, 2021

My .html file

<div id="pivotContainer">
<fm-pivot [toolbar]="true"></fm-pivot>
</div>

.ts file

jsonData = [
   {    
    "Color" : "green",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price" : 174,
  	 "Quantity" : 22
   },
   {
    "Color" : "red",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price" : 166,
    "Quantity" : 19
   }
];

pivot = new Flexmonster({
   container: "pivotContainer",
   toolbar: true,
   report: {
       dataSource: {
           data: this.jsonData
       },
       slice: {
           rows: [
               { uniqueName: "Color" },
   	        { uniqueName: "[Measures]" }
           ],
           columns: [
               { uniqueName: "Country" }
           ],
           measures: [
               {
                   uniqueName: "Price", 
   	            aggregation: "sum" 
               }
           ]
       }
   }
});

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster August 25, 2021

Hello,
 
Thank you for posting on our forum.
 
Please note that when using Flexmonster with our Angular wrapper, the Flexmonster Angular component is represented by the <fm-pivot> tag itself. There is no need to create a Flexmonster instance manually in your .ts file.
 
Please see our documentation to learn more about the recommended way to embed Flexmonster in your Angular application: Integration with Angular. You will also find a ready-to-use sample project that may serve as a useful reference.
 
Please let us know if it helps.
 
Kind regards,
Illia

Please login or Register to Submit Answer