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/
Final Thoughts
Integrating dotnet Report into an Angular project using .NET Core brings numerous benefits to developers seeking powerful reporting capabilities.
By combining the strengths of Angular and .NET Core, developers can leverage dotnet Report to create dynamic and interactive reports that enhance their applications’ functionality.
Here are a few final thoughts on the process:
1. Seamless Integration
Incorporating dotnet Report into an Angular project powered by .NET Core is a seamless process.
The flexibility and versatility of Angular, combined with the robustness of .NET Core, provide a solid foundation for integrating dotnet Report effortlessly.
Developers can leverage the power of both technologies to create a unified and cohesive reporting solution.
2. Customization And Control
With dotnet Report, developers have complete control over the design and functionality of their reports.
The extensive set of features, including layout customization, data binding, and advanced sorting, enables developers to tailor reports according to their specific requirements.
This level of customization empowers developers to create reports that align perfectly with their application’s needs.
3. Efficient Data Connectivity
dotnet Report’s integration with .NET Core ensures seamless connectivity with various data sources.
Developers can easily connect to REST APIs, databases, or other data repositories using .NET Core’s data access capabilities.
This connectivity enables developers to fetch and display data in their reports effortlessly, ensuring accurate and up-to-date information for users.
4. Enhanced User Experience
By incorporating dotnet Report into an Angular project, developers can provide users with an enriched reporting experience.
The interactive and visually appealing reports created with dotnet Report can empower users to analyze data effectively, make informed decisions, and gain valuable insights.
This ultimately enhances the overall user experience of the application.
5. Reliable And Scalable Solution
Leveraging dotnet Report within an Angular project powered by .NET Core ensures a reliable and scalable reporting solution.
The robustness of .NET Core’s infrastructure, combined with the flexibility of Angular, provides a stable and efficient environment for handling reporting requirements.
As the application grows and demands increase, dotnet Report’s scalability allows for seamless expansion without compromising performance.
In conclusion, integrating dotnet Report into an Angular project using .NET Core brings a wide range of benefits, including seamless integration, customization capabilities, efficient data connectivity, enhanced user experience, and a reliable and scalable solution.
By harnessing the strengths of these technologies, developers can create robust reporting functionalities that add significant value to their applications.
FAQs
1. What are the benefits of an angular report generator?
The Angular Report Generator offers several key benefits that make it a valuable tool for developers looking to create comprehensive and interactive reports within their Angular applications.
- Seamless Integration with Angular: It is specifically designed for seamless integration with Angular applications. It aligns perfectly with the Angular framework, allowing developers to leverage the full potential of Angular’s features and functionalities.
- Customizable Report Creation: This report generator empowers developers to create highly customizable reports tailored to their specific needs. It provides a wide range of design options, including layout types, controls, and styling elements, enabling developers to create visually appealing and user-friendly reports.
- Interactive and Dynamic Reports: It enables the creation of interactive and dynamic reports. Developers can incorporate interactive elements such as charts, graphs, and drill-down functionality, enhancing the overall user experience and facilitating data analysis.
- Data Binding Capabilities: With Angular’s robust data binding capabilities, the report generator can effortlessly connect to various data sources. Developers can bind data from REST APIs, databases, or other endpoints, ensuring accurate and up-to-date information is displayed in the reports.
- Cross-Platform Compatibility: Angular Report Generator is designed to ensure cross-platform compatibility. Reports created using this tool can be seamlessly rendered across different devices and platforms, ensuring consistent user experience and accessibility.
- Time and Effort Savings: It simplifies the report creation process, saving developers significant time and effort. Its intuitive interface and drag-and-drop functionality enables quick and efficient report design, reducing development cycles and accelerating time-to-market.
- Enhanced Reporting Capabilities: It offers advanced reporting capabilities, including sorting, filtering, and grouping of data. Developers can easily implement complex reporting requirements such as aggregations, calculations, and conditional formatting to deliver comprehensive and meaningful reports.
- Integration with Angular Ecosystem: Being a part of the Angular ecosystem, the report generator seamlessly integrates with other Angular libraries, tools, and extensions. Developers can leverage the vast Angular community and ecosystem support to enhance the functionality and performance of their reports.
- In summary, the Angular Report Generator provides developers with a powerful and versatile toolset to create customizable, interactive, and dynamic reports within their Angular applications.
Its seamless integration with Angular, extensive customization options, data binding capabilities, cross-platform compatibility, time-saving features, and advanced reporting capabilities make it an invaluable asset for developers seeking robust reporting solutions within Angular projects.
2. What is asp.net core angular?
ASP.NET Core Angular is a powerful and versatile technology stack that combines the benefits of both ASP.NET Core and Angular frameworks.
It enables developers to build modern web applications by leveraging the strengths of these two popular frameworks.
ASP.NET Core is an open-source, cross-platform framework for building web applications.
It provides a unified platform for developing web APIs, web applications, real-time applications, and microservices.
With ASP.NET Core, developers can benefit from features such as robust performance, scalability, security, and seamless integration with various data sources and deployment environments.
On the other hand, Angular is a widely-used TypeScript-based framework for building client-side applications.
It offers a comprehensive set of tools and features for building responsive, dynamic, and interactive web applications.
Angular provides a structured architecture, powerful data binding, component-based development, and a rich ecosystem of libraries and extensions.
When combined, ASP.NET Core and Angular create a synergistic development environment.
ASP.NET Core provides the server-side infrastructure, handling aspects such as routing, authentication, authorization, and data access.
Angular, on the other hand, focuses on the client-side user interface and interactive components.
With ASP.NET Core Angular, developers can build full-stack web applications that follow a modern, scalable, and maintainable architecture.
The separation of concerns between the server side and client side allows for better code organization, reusability, and testability.
Developers can utilize the power of Angular’s rich UI components and declarative templates while leveraging the performance and flexibility of ASP.NET Core.
Furthermore, ASP.NET Core Angular allows for efficient development workflows.
Developers can use the Angular CLI (Command Line Interface) to generate Angular components, services, and modules while leveraging ASP.NET Core’s powerful development tools and debugging capabilities.
Let us know if there are any questions or comments.
About Us
dotnet Report Builder is led by software developers, and we are dedicated to providing a fast, simple and secure Reporting and Analytics solution to other Software Developers.
