Get Free Trial

pivot' is declared but its value is never read.ts

Answered
nithinbabu asked on September 9, 2021

ngOnInit(){
    var pivot = new Flexmonster({
      container: “pivot-container”,
      componentFolder: “https://cdn.flexmonster.com/”,
      toolbar: true,
      beforetoolbarcreated: customizeToolbar
    });

 
 
note : I am getting this error pivot’ is declared but its value is never read.ts in angular 
what can be done
 

Attachments:
pivot error.PNG

16 answers

Public
Vera Didenko Vera Didenko Flexmonster September 9, 2021

Hello,
 
Thank you for writing to us.
 
A possible solution is to initialize Flexmonster without assigning it to a variable. For example:

ngOnInit(){
    new Flexmonster({
      container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      toolbar: true,
      beforetoolbarcreated: customizeToolbar
    });
}

This will prevent the "'pivot' is declared but its value is never read" warning from appearing.
 
Alternatively, you could use Flexmonster the same way as in our sample Angular project on GitHub (see example).

Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu September 9, 2021

Hi Vera,
 
Thanks for writing the answer i removed it and the declaration not throws error,
but I am getting another error.
They console shows no error but why this error comes. any changes on Flex monster end
attaching the screenshot.

Public
nithinbabu September 9, 2021

Hi Vera,
 
Thanks for writing the answer i removed it and the declaration not throws error,
but I am getting another error.
They console shows no error but why this error comes. any changes on Flex monster end
attaching the screenshot.

Public
nithinbabu September 9, 2021

Hi Vera,
 
Thanks for writing the answer i removed it and the declaration not throws error,
but I am getting another error.
They console shows no error but why this error comes. any changes on Flex monster end
attaching the screenshot.

Attachments:
pivot table error.PNG

Public
Vera Didenko Vera Didenko Flexmonster September 10, 2021

Hello, 
 
Thank you for your reply.
 
According to the screenshot, it seems Flexmonster’s CSS styles were not loaded.
We highly recommend integrating Flexmonster with Angular according to our integration guide: https://www.flexmonster.com/doc/integration-with-angular/#!integration.
Step 4 of the integration guide shows how to import Flexmonster’s style sheet.
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 7 days ago

Hi Veera,
 
Can i override the CSS styles in which my component is there example
attaching the screenshot

Attachments:
pivot table error.PNG

Public
Vera Didenko Vera Didenko Flexmonster 7 days ago

Hello,
 
Thank you for your question.
 
Please see our sample Angular project on GitHub for reference. 
In the example, Flexmonster styles are imported in styles.css the following way (link to source code):

@import "flexmonster/flexmonster.min.css";

The styles.css file is referenced in angular.json (see source code)
As a result, Angular will load the styles defined in styles.css, including Flexmonster styles.
 
 
If you are looking for a way to override Flexmonster’s default styles with your custom ones, this can be achieved by creating your own custom Flexmonster theme. For more details, please see the following tutorial: https://www.flexmonster.com/doc/customizing-appearance/.

Once you create your own Flexmonster theme, you can apply it in your Angular application in the same way: just replace @import "flexmonster/flexmonster.min.css"; with the path to your Flexmonster theme. For instance:

@import "PATH_TO_YOUR_THEME/flexmonster.min.css";

 
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 7 days ago

Hi Veera,
 
How can i changes the names of the Column in angular Flexmonster ex: screenshot attached,
Please help.
 
total sum of price – change to Accilan
and add column names below it – how to do
Accilian – Heading
SemiFinished146, – sub heading
SemiFinished132 – sub heading
  THTP – Heading
How to do it in angular any example would be good

Attachments:
uniquenames.PNG

Public
Vera Didenko Vera Didenko Flexmonster 6 days ago

Hello,
 
Thank you for reaching out to us.
 
We have prepared a JSFiddle showing how you can achieve the desired representation: https://jsfiddle.net/flexmonster/yskz52cb/.
 
The same report object will work for Angular as well. Here is an example of how to set a report configuration in Angular:
In app-component.html:

<div>

<fm-pivot #pivot
    [toolbar]="true"
[report]="report">
</fm-pivot>

</div>

In app-component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';

import { FlexmonsterPivot } from 'ng-flexmonster';


@Component({

selector:'app-component',

templateUrl:'./app-component.html',

styleUrls: ['./app-component.css']

})


export class AppComponent implements OnInit {


@ViewChild('pivot') pivot!: FlexmonsterPivot;


public report: Object = {

dataSource: {...},

slice: {...}

};


constructor() { }


ngOnInit(): void {}

}

 
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 6 days ago

Hi Vera,
Thanks for the Help
I have one doubt actually the RAD58, should come where the THTP there vise versa, is there any method in calling it,
Any method also there to convert value to Kilogram so the value would be 2177 Kg,
 

Public
Vera Didenko Vera Didenko Flexmonster 6 days ago

Hello,
 
Thank you for your response. 
 

  1. About switching “RAD58” and “THTP” places: 

    By default, members of a field are sorted in ascending order. A possible solution is to set the sorting rule to "unsorted" in the slice (see guide). For example:
    "report": {
    "dataSource": {...},
    "slice": {
    "rows": [
    {
    "uniqueName": "Status",
    "sort": "unsorted"
    },
    ...
    ],
    "columns": [...],
    "measures": [...]
    }
    }

    Please let us know if this works for your use case.

  2. Regarding adding “Kg” to the values:

    It is possible to format values through number formatting.
    Here is a detailed tutorial for guidance: https://www.flexmonster.com/doc/number-formatting/.

You are welcome to check out the updated JSFidde example: https://jsfiddle.net/flexmonster/4q6hz03w/.

Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 5 days ago

Hi Vera,
Thanks for your valuable response, it worked fine like wise any doubt I would get back please help.

Public
nithinbabu 4 days ago

Hi Vera,
I have a doubt how can I add an icon to the semifinished text  and icon, tried to add favicon but dint happen.
https://jsfiddle.net/flexmonster/4q6hz03w/
 

Attachments:
text - icon.PNG

Public
Vera Didenko Vera Didenko Flexmonster 4 days ago

Hello,
 
Thank you for your question.
 
You can add an icon to the semifinished text (the header cells) via the customizeCell() API call.

With this method, you can get the details about each grid cell: its type, which field it belongs to, its content, etc. Using these details, you can then customize the desired cells by adding your own icon. For example, this approach is used on our demo to add flag icons to the "Country" header cells: https://www.flexmonster.com/demos/pivot-table-js/ (see JSFiddle).
Please see the following guide for further details on how to customize the grid: https://www.flexmonster.com/doc/customizing-grid/.
 
Also, here is an example of how to use customizeCell in Angular:
In app-component.html:

<div>
<fm-pivot #pivot
[toolbar]="true"
[height]="600"
[customizeCell]="customizeCellFunction">
</fm-pivot>
</div>

In app-comonent.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FlexmonsterPivot } from 'ng-flexmonster';

@Component({
selector: 'app-component',
templateUrl: './app-component.html',
styleUrls: ['./app-component.css']
})

export class AppComponent implements OnInit {

@ViewChild('pivot') pivot!: FlexmonsterPivot;

public report: Object = {...};

constructor() { }

ngOnInit(): void {}

customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
// Add your cell customization logic here
}
}

 
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 3 days ago

Hi Vera,
I am hereby sharing the jsbin link actually, I have added the fonawesome and the icon things are not displaying in the customizecell i have added the key and rows which icon needed to be, since the console no errors but the icon is not displaying
 
https://jsfiddle.net/65wzkpbL/2/
 
Pleas help on it.

Public
Vera Didenko Vera Didenko Flexmonster 3 days ago

Hello,
 
Thank you for your response.
 
It seems the fontawesome fonts are being overridden by other fonts on the page. You can fix this by adding the following CSS:

.fa {
font-family: 'FontAwesome' !important;
}

 
We have modified the provided JSFiddle so that the icons are shown: https://jsfiddle.net/flexmonster/fh65u3db/.
 
Please let us know if this helps.
 
Kind regards,
Vera

Please login or Register to Submit Answer