Angular is of course a fairly popular framework for .Net Developers and many Microsoft shops are creating and running their front end apps on Angular. Dotnet Report Builder can be run on web applications built with Angular fairly easily, and this is a detailed tutorial on how to add dotnet Report to an Angular based project that’s using .Net Core.

The code for this is in github. You can access or download it here: https://github.com/dotnetreport/dotnetreport-angular/

In this tutorial, we will go through creating a simple Angular application in Visual Studio using the Angular Template Visual Studio provides, and then we will add dotnet Report to the solution using the nuget package.

So first, let’s create a new .net core project using the Angular Template.

That created the project, and after building and running it, we should get this basic angular app:

Next, we’ll install the dotnetreport.core package from nuget.

Install-Package dotNetReport.core -Version 3.1.0

This will add our ad hoc report build controller, views and script files to the project.

After a bit of quick cleanup following the readme.txt instructions that pops up after installing the nuget package, adding dotnet Report’s API keys, and quick change of replace all to correct the namespace, the project builds.

The gulp task that the nuget package added works fine as well.

And you should be able to run the project now and pull up dotnet Report, and the Anglar app will still work as well.

So this is the first phase of adding dotnet Report to the same .net core project that angular is using.

Depending on your requirement, this could be good enough and you are done! You might not need to do anything additional since you have the reporting solution running in the same .Net Core project as Angular, and you can run both side by side.

However, if you want to use dotnet Report within the Angular App, let’s continue forward to the fun stuff. The next task is to move or embed dotnet Report inside the angular app. Let’s look at those steps next.

Adding an Angular Component for Dotnet Report

So the first step is pretty straight forward, you can create a folder dotnetreport under app, and add the component’s html and type script files.

In the html file, just copy and paste in the Views/Report/Index.cshtml file. We will of course have to make some changes to it, but it’s pretty minor.

So the first edit is to get rid of all the top section for scripts and any other mvc elements. The only mvc element the file contains, other than the top section, is just some comments or @Url directive, so you will see them rendered as html if you miss removing them.

The java script, we will move it to the component’s type script file.

Just copy and paste the following code in to the dotnetreport.component.ts file:
import { Component, OnInit } from '@angular/core';
declare var ko: any;
declare var ajaxcall: any;
declare var reportViewModel: any;

@Component({
  selector: 'app-dotnetreport',
  templateUrl: './dotnetreport.component.html',
})

constructor() {

}

ngOnInit() {

        ajaxcall({ url: '/api/ReportApi/GetUsersAndRoles' }).done(function (data) {
            var vm = new reportViewModel({
                runReportUrl: '/Report/Report',
                reportWizard: $("#modal-reportbuilder"),
                lookupListUrl: '/api/ReportApi/GetLookupList',
                apiUrl: '/api/ReportApi/CallReportApi',
                runReportApiUrl: '/api/ReportApi/RunReportApi',
                getUsersAndRolesUrl: '/api/ReportApi/GetUsersAndRoles',
                userSettings: data
                //dataFilters: { EmployeeId: '1,2' }, // You can also pass a list of Global Data filters using format { Column1: 'val1, val2, ...', Column2: '1,2,3,...', ...}
            });

            vm.init(0, data.noAccount);
            ko.applyBindings(vm);
        });
    };
}

Now we need to include the global libraries and the html scripts, basically stuff that’s in the MVC Layout file.

So we have 2 options for this. The first option, which most will frown upon, is to include the script references in the index.html file. 

<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../lib/jquery-validation/jquery.validate.min.js"></script>
<script src="../../lib/knockout/knockout-latest.js"></script>
<script src="../../lib/jquery-blockui/jquery.blockUI.js"></script>
<script src="../../lib/bootbox/bootbox.min.js"></script>
<script src="../../lib/toastr/toastr.min.js"></script>
<script src="../../lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="../../lib/jquery-ui-dist/jquery-ui.min.js"></script>
<script src="../../lib/knockout-sortable/knockout-sortable.min.js"></script>
<script src="../../lib/select2/js/select2.min.js"></script>
<script src="../../lib/lodash/lodash.min.js"></script>
<script src="../../js/dotnetreport-helper.js"></script>
<script src="../../js/dotnetreport.js?v=2.5.0"></script>

But like I said, this is something developers do not like to do. I don’t like to do this either, and for good reasons, so we won’t do this. I just wanted to mention this as an option 🙂

What we will do is add the references in the “styles” and “scripts” section of the “angular.json” setting file. So open it up, and paste in the following:

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"../wwwroot/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css",
"../wwwroot/lib/font-awesome/css/font-awesome.min.css",
"../wwwroot/lib/select2/css/select2.min.css",
"../wwwroot/css/dotnetreport.css"
],
"scripts": [
"../wwwroot/lib/knockout/knockout-latest.js",
"../wwwroot/lib/jquery/jquery.js",
"../wwwroot/lib/jquery-blockui/jquery.blockUI.js",
"../wwwroot/lib/jquery/jquery.js",
"../wwwroot/lib/bootbox/bootbox.min.js",
"../wwwroot/lib/toastr/toastr.min.js",
"../wwwroot/lib/bootstrap-datepicker/js/bootstrap-datepicker.js",
"../wwwroot/lib/knockout-sortable/knockout-sortable.min.js",
"../wwwroot/lib/select2/js/select2.min.js",
"../wwwroot/lib/lodash/lodash.min.js",
"../wwwroot/js/dotnetreport.js",
"../wwwroot/js/dotnetreport-helper.js",
"../wwwroot/js/dotnetreport-setup.js"

This is how the file should look like:

Next is to include the html templates. So I would love to just add them to the component’s html file, however, we all know angular doesn’t like script tags. So there are work arounds for it, and I will update that later, but for right now, we will place those in index.html.

So just copy all the html templates from the layout file, and paste it in the index.html file.

One other thing we have to include in the index file globally is the Google Charts library. We haven’t found a work around for this one, and there likely isn’t one. We have switched out the “DrawChart” method in dotnetreport.js for Line, Pie and Bar graphs to use Chartjs instead of Google Charts, so if anyone is really bent upon not using a global library, they can do that, or rewrite the DrawChart method for d3 or some other library fairly easily. The front end is open source 🙂

In any case, so continuing with our Angular app, this is how the index.html should look like:

Ok so at this point, we should be able to run the application and see our Report Builder inside the Angular app (I added a link).

And that’s pretty much it, we can see the reports inside the Angular app now, edit them, run them, using the component 🙂

The code for this is in github. You can access or download it here: https://github.com/dotnetreport/dotnetreport-angular/

Let us know if there are any questions or comments.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *