Best way to pass the data from angular application to create telerik report using telerik web services ?

See more:

HTML5

Telerik

reporting

I'm trying to send data from angular application to display the telerik report using telerik web services. I was able to do so using custom resolver but im looking for the best solution to achieve this.

What I have tried:

I have created a telerik rest service to generate the report at server end and display it using angular later on.

Below is code I have used to create report controller and custom resolver.

namespace TelerikReportingAngular.Controllers
{
    using Newtonsoft.Json;
    using System;
    using System.Data;
    using System.Drawing;
    using System.IO;
    using System.Web;
    using System.Web.Http;
    using System.Web.Http.Cors;
    using Telerik.Reporting;
    using Telerik.Reporting.Cache.File;
    using Telerik.Reporting.Services;
    using Telerik.Reporting.Services.WebApi;
    using TelerikReportingAngular.Reports;

    //The class name determines the service URL. 
    //ReportsController class name defines /api/report/ service URL.
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    [Authorize]
    public class ReportsController : ReportsControllerBase
    {
        static ReportServiceConfiguration configurationInstance;

        static ReportsController()
        {

            //This is the folder that contains the report definitions
            //In this case this is the Reports folder
            var appPath = HttpContext.Current.Server.MapPath("~/");
            var reportsPath = Path.Combine(appPath, "Reports");

            //Add resolver for trdx/trdp report definitions, 
            //then add resolver for class report definitions as fallback resolver; 
            //finally create the resolver and use it in the ReportServiceConfiguration instance.
            var resolver = new ReportFileResolver(reportsPath)
                .AddFallbackResolver(new CustomReportResolver());

            //Setup the ReportServiceConfiguration
            configurationInstance = new ReportServiceConfiguration
            {
                HostAppId = "Html5App",
                Storage = new FileStorage(),
                ReportResolver = resolver,
                // ReportSharingTimeout = 0,
                // ClientSessionTimeout = 15,
            };
        }

        public ReportsController()
        {
            //Initialize the service configuration
            this.ReportServiceConfiguration = configurationInstance;
        }

        class CustomReportResolver : Telerik.Reporting.Services.Engine.IReportResolver
        {
            public Telerik.Reporting.ReportSource Resolve(string abc)
            {
                DataTable dt = (DataTable)JsonConvert.DeserializeObject(abc, (typeof(DataTable)));
                InstanceReportSource s = new InstanceReportSource();
                s.ReportDocument = new Report1(dt);

                return s;
            }
        }
    }


}

In the angular application im using html5 viewer to send data as gData shown below:
here gdata is json array that will be rendered on Telerik report at server.

<tr-viewer 
  [containerStyle]="viewerContainerStyle"
  [serviceUrl]="'http://localhost:57441/api/Reports'"
  [authenticationToken]="token"
  
  [reportSource]="{
      report: gdata,
      parameters:{user:'Amit'}
  
  }"
  
  [viewMode]="'Interactive'"
  [scaleMode]="'SPECIFIC'"
  [scale]="1.0">
  </tr-viewer>

Everything is running fine. But my confusion is on the approach I'm using to generate dynamic report. Please suggest whether my approach is correct or not ?