Get Free Trial

Angular example with component creation in .html.

kumar asked on March 16, 2016

Presently, we are creating the component in angular controller side, due to this we are facing many issues.

The suggestion, I would like to ask is how to create the component in angular js(.html) side. flexmonster control always define in the <script> tag, but when we use jsPivotCreationCompleteHandler  in the component we should call the method from angular controller to html. I guess that is not possible. if so, please give me some example or syntax for that.
In clear, please provide one example on angular side where component should create or define in .html file with jsPivotCreationCompleteHandler: “pivotCreationCompleteHandler” and pivotCreationCompleteHandler should call/define from controller.
I attached sample code which we are using in our angular project(.html and .controller) for your reference
Please provide us the solution for this in angular(create component in .html), this would be very helpful for us.
Thanks & Regards,

4 answers

Dmytro Zvazhii Dmytro Zvazhii Flexmonster March 16, 2016

Hi Kumar!
Thank you for your question. Please check our very last response in parallel, where you can find the reference to the useful recommendations about angular.js project. 
Please let me know if you find it helpful. 

Iryna Kulchytska Iryna Kulchytska Flexmonster March 17, 2016

Hi Kumar,
Could you please provide us with your angular project .html (in addition to .controller you provided)?
Thank you,

Iryna Kulchytska Iryna Kulchytska Flexmonster March 18, 2016

Hi Kumar,

Please download an example of using Flexmonster Pivot component in AngularJS (with Routing & Multiple Views) –

We recommend creating the component in the controller. The function embedPivotComponent() returns the reference to the instance of the component and the key point is that the component’s API has to be accessed via this reference. You can store it in $scope and access it from both, html and controller:

        $scope.flexmonsterInstance = flexmonster.embedPivotComponent("flexmonster/", "pivot-container", "100%", "500", { 
            licenseKey: "....",
            jsPivotCreationCompleteHandler: setPivotReport
        }, true);

        function setPivotReport() {
            var report = getReportByID($scope.reportId);

Please review the sample inside the package for more details.
We will appreciate if you could let us know whether the suggested approach works for you.

Kind regards,

Tanya Gryshko Tanya Gryshko Flexmonster December 5, 2016

Hello Sunilkumar.V and all Flexmonster users,
We would like to inform you that starting from version 2.3 we improved integration with popular frameworks. Follow our detailed tutorials for Angular: Integration with AngularJS and Integration with Angular 2. Or find more details about integration with other frameworks and technologies:

Please login or Register to Submit Answer