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

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" 
               }
           ]
       }
   }
});