Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Request Elasticsearch sample with angular

KANTU PAVAN KUMAR asked on September 9, 2020

Hi All,
I subscribe for a free trail and I am testing flex-monster to look if it suitable to my major functionality of group by calendar weeks(Monday to Sunday)  from date column of  JSON data source.
   I got below link where you mentioned we can achieve this functionality from Elasticsearch
However,I have integrated flex-monster component in Angular 8 and I am unable to configure the Elasticsearch with  angular because I am completely new to this Elasticsearch concept.
Could you please help me with a sample with combination of Elasticsearch and angular which works with interval calendar weeks.(“interval”: “1W”).

7 answers

Vera Didenko Flexmonster September 10, 2020

Hello, Kantu Pavan Kumar,
Thank you for writing to us. 
We have prepared an Angular with Flexmonster and Elasticsearch sample project (please see "" in the attachments).
In the example, the data records are grouped by calendar weeks. 
The data records are grouped by using the following mapping configuration


Please run the following commands in order to start the project (please see "" in the attachments):

npm install
npm start

After running the commands mentioned above, the project will be running on localhost:4200.

For more information about how to connect Flexmonster to Elasticsearch, please see the following tutorial.
Also, we have a detailed tutorial on how to integrate Flexmonster into an Angular application that could be of interest.

Please let us know if this helps. 
Looking forward to your reply.
Kind regards, 

KANTU PAVAN KUMAR September 10, 2020

Hi Vera Didenko,
Thanks a lot for your response!!!.
The sample is working good.
Could you please help me with below needed information
1.We are getting JSON Data source form REST API which we are binding  to flexmonster directly as of now .But now do we need to store this JSON Data source in “kibana_sample_data_flights” which you mentioned as “index” in sample?
2.In attached home.component.ts file  data source changed to JSON object like below.If it is possible could you please do needful to work your sample with JSON Data source?
dataSource: {
“type”: “elasticsearch”,
“node”: this.jsonDataSource,
“index”: “kibana_sample_data_flights”

KANTU PAVAN KUMAR September 11, 2020

Missed the attachment in previous post.Please find the attachment


Illia Yatsyshyn Illia Yatsyshyn Flexmonster September 14, 2020

Thank you for your feedback.
Our team would like to explain the following:
The sample demonstrates a connection to the Elasticsearch data source. Elasticsearch is a separate data source supported by Flexmonster.
In its turn, a connection to the JSON data source requires a different configuration of the Data Source Object. To establish a connection with an API endpoint, specify the corresponding URL as a value of the dataSource.filename property:

dataSource: {
type: "json", filename: "https://.." //URL to the API endpoint }

We want to notice that in case JSON is used as a data source, data can not be grouped by weeks. Such grouping is only available when using Elasticsearch as a data provider.
Therefore, in case grouping by weeks is mandatory for your case, we suggest uploading your JSON data set to Elasticsearch. Please refer to Elasticsearch documentation for more information on this matter.
Our team hopes it works for you.
Please contact us if other questions arise.
Kind regards,


Hi Illia,
Thank you for your replay and suggestion. We modified our JSON data source for week grouping and its working fine.
We have a below requirement could you please help us on this.
We would like to disable/enable the some of the  toolbar buttons based on login user role. Could you please help how to disable/enable(we do not want hide) tool bar button with an example if it is possible?

Illia Yatsyshyn Illia Yatsyshyn Flexmonster 1 day ago

Thank you for your feedback.
We suggest using CSS to disable the chosen buttons of the Toolbar.
For example, if “Open” and “Charts” buttons need to be disabled, the following CSS should be added to the page:

#fm-tab-charts {
  pointer-events: none;
  opacity: 0.5;

Please see an example we have prepared for you.
The unique identifier of each button can be retrieved using the developer tools of your browser.
Please let us know if it works for your case.
Do not hesitate to contact us in case other questions arise.
Best regards,

KANTU PAVAN KUMAR 21 hours ago

Hi Illia,
Thank you a lot for your replay and suggestion.
But we have integrated flexmonster to Angular8.0. We need to disable/enable toolbar buttons from typescript because we have added some of our own new buttons to toolbar and we need to disable/enable them(some of the exited buttons also) programmatically for some of our functional use cases. I tried to find a way to apply/remove CSS from typescript file based on your suggestion but I could not succeeded and I could not found any other way too. 
So, if it is possible ,could you please suggest with an example.

Please login or Register to Submit Answer