Angular example with component creation in .html.

posted on March 16th, 2016

Answered

kumar asked on March 16, 2016

Hi,
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,
Sunilkumar.V

Attachments:
flexMonster.controller.js

4 answers

Public

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.

Public

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

Public

Iryna Kulchytska ⋅ Flexmonster ⋅ March 18, 2016

Hi Kumar,

Please download an example of using Flexmonster Pivot component in AngularJS (with Routing & Multiple Views) - https://s3.amazonaws.com/flexmonster/downloads/FLEXMONSTER-ANGULAR-JS-MULTIPLE-VIEWS-SAMPLE.zip

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);
            $scope.flexmonsterInstance.setReport(report);
        }

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,
Iryna

Public

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 tutorial for Angular: Integration with Angular. Or find more details about integration with other frameworks and technologies: https://www.flexmonster.com/doc/available-tutorials-integration/.
Regards,
Tanya

Angular example with component creation in .html.

4 answers

Please login or Register to Submit Answer