# Embedding Bold BI Dashboards in an Angular Application ## Introduction Today, Angular is one of the all-time leading frameworks because of its consistent code structure and widely applicable use cases. Since its inception, Angular has come a long way, keeping up to date with the constant evolution of browsers and their capacity to enable a wide range of capabilities. It is now one of the most popular platforms for creating feature-rich web applications. Several companies and developer groups have appreciated its user interface and functionality. Many businesses have adapted previous web apps to Angular. Embedding analytics into your Angular applications is an added advantage for your business. It helps you gain critical insight with your data and become more profitable by facilitating timely business decisions. Bold BI helps you embed interactive dashboards in your business application in a fast and easy way with features like prebuilt data connectors, calculated metrics, and engaging data visualization. In this blog post, I am going to explain how to integrate a dashboard in an Angular application using Bold BI. These are the steps involved in this process: 1. [Create an Angular application](https://www.boldbi.com/blog/embedding-dashboards-in-an-angular-application#create-an-angular-application) 2. [Create a Bold BI instance to render the dashboard.](https://www.boldbi.com/blog/embedding-dashboards-in-an-angular-application#create-a-bold-bi-instance-to-render-the-dashboard) 3. [Create an authorization server to authenticate the Bold BI server.](https://www.boldbi.com/blog/embedding-dashboards-in-an-angular-application#create-an-authorization-server-to-authenticate-the-bold-bi-server) 4. [Run the Angular application to see the embedded dashboard.](https://www.boldbi.com/blog/embedding-dashboards-in-an-angular-application#run-the-angular-application-to-see-the-embedded-dashboard) ## Step 1: Create an Angular application First, you need to create a new Angular project in Visual Studio Code. Before creating the project, make sure to install Node in your machine. You can do this by opening the command prompt and using the command **node -v** as shown in the following screenshot. ![Checking Node version in a command prompt](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/node-version-command-prompt.png align="left") Checking Node version in a command prompt After ensuring that you have installed Node on your machine, create a directory by using the command **mkdir Embed-Sample** in the command prompt. ![Creating an Embed-Sample directory using a command prompt ](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/mkdir-embed-sample.png align="left") Creating an Embed-Sample directory using a command prompt Then, open Visual Studio Code with the **code Embed-Sample** command as shown in the following screenshot. ![Opening Visual Studio Code using a command prompt](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/code-embed-sample.png align="left") Opening Visual Studio Code using a command prompt After **Visual Studio Code** is launched, you need to open a terminal to install the **Angular CLI**. You can open a terminal by clicking **Terminal > New Terminal** at the top of the IDE. Then, install the Angular CLI using the command **npm install -g @angular/cli**. ![Installing Angular CLI in Visual Studio Code](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/installing-angular-vs-code.png align="left") Installing Angular CLI in Visual Studio Code Next, you need to create a new project named **angular-sample** by using the command **ng new angular-sample** in the terminal. ![Creating a new project in Visual Studio Code](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/ng-new-angular-sample.png align="left") Creating a new project in Visual Studio Code You will be prompted to choose Angular routing and stylesheet format. You can choose **Yes** or **No** for **Would you like to add Angular routing?** and should choose **CSS** for **Which stylesheet format would you like to use?** Then, press **Enter**. ![Choosing Angular routing and stylesheet](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/angular-routing-and-stylesheet.png align="left") Choosing Angular routing and stylesheet The package installation will begin, and it will take a few minutes. Once the installation is done, you will get the message **Package installed successfully**. Next, you need to create a script file to proceed further. To create a proper script file, you need to add the necessary script and style references in the **index.html** file, as shown in the following image. ![Adding the script and style references in the index.html file](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/index.html-file.png align="left") Adding the script and style references in the index.html file And add the necessary **ts** files to the project as shown in the following image. ![Adding necessary ts files](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/ts-files.png align="left") Adding necessary ts files For more guidance, refer to the sample code in the Bold BI [documentation](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/angular/). In this demonstration, the Angular application acts as a client, and an [ASP.NET](http://ASP.NET) Core application acts as a server. You need to add the several properties in the **app.component.ts** file as shown in the following table and screenshot.

Properties

Property Value Descriptions

RootUrl

Bold BI dashboard server URL. Example:
https://localhost:58094/bi.

SiteIdentifier

For Bold BI Enterprise, it should follow the format site/site1.
For Bold BI Cloud, it should be an empty string.

Environment

Your Bold BI application environment. If using Bold BI Cloud,
you should use cloud. If using Bold BI Enterprise, you should
use enterprise.

apiHost

ASP.NET Core application would be run
on https://localhost:5000/, which needs to be set as apiHost

![Adding required variables in the app.component.ts file](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/required-variables-app.component.ts-file.png align="left") Adding required variables in the app.component.ts file After adding the above properties, we need to create the Bold BI instance. ## Step 2: Create a Bold BI instance to render the dashboard After creating the Angular application, you need to create a Bold BI instance that calls the authorization end point implemented in the embedding application to communicate between the server side (any web application) and the client side (Angular application), which allows us to embed a Bold BI dashboard in the Angular application. To create a Bold BI instance, first, you need to create a **dashboard-listing.component.ts** file to define the **renderDashboard** method for creating a Bold BI instance and embedding the dashboard. ![Creating a dashboard-listing.component.ts file](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/listing.component.ts-file.png align="left") Creating a dashboard-listing.component.ts file Next, you need to create a **dashboard-listing.component.html** file to render the embedded dashboard and add the CSS in the **site.css** file. Once the necessary changes have been done on the client side, then you can create the authorization server using a web application. So, now you need to create an authorization server to support authenticating the Bold BI server. ## Step 3: Create an authorization server to authenticate the Bold BI server Every application that embeds a Bold BI dashboard or widget must be authorized with the Bold BI server, and this authentication step requires sending confidential information to the Bold BI server, such as user email, group data, and embed signature. So, in your server application, implement this authentication flow and provide the URL for connecting to your server in the Bold BI instance. To create a server-side application, you need to open Microsoft Visual Studio and create a **New Project**. You can use any web application for creating an authorization server. Here, we are using an [ASP.NET](http://ASP.NET) Core application. If you’re following our procedure, choose [**ASP.NET**](http://ASP.NET) **Core Web Application**, provide a project name, and click **OK**. ![Selecting ASP.NET Core Web Application and entering the project name](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/asp.net-core-web-application.png align="left") Selecting [ASP.NET](http://ASP.NET) Core Web Application and entering the project name Next, you need to choose the **Web Application (Model-View-Controller)** template from the project template window and click **OK**. ![Selecting the Web Application (Model-View-Controller) template from the project template window](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/model-view-controller-window.png align="left") Selecting the Web Application (Model-View-Controller) template from the project template window Now, the [ASP.NET](http://ASP.NET) Core application is created. ![Creating the ASP.NET Core application successfully](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/created-asp.net-application-successfully.png align="left") Creating the [ASP.NET](http://ASP.NET) Core application successfully After the [ASP.NET](http://ASP.NET) Core application is created, you need to create classes named **EmbedProperties** and **DataClass** under **Models** and add the required variables. ![Creating EmbedProperties and DataClass classes under Models](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/embedproperties-and-dataclass.png align="left") Creating EmbedProperties and DataClass classes under Models In the **EmbedProperties.cs** file of the [ASP.NET](http://ASP.NET) Core application, you need to set the **RootUrl**, **SiteIdentifier**, **UserEmail**, **UserPassword**, and **EmbedSecret** properties.

Properties

Property Value Descriptions

RootUrl

Bold BI dashboard server URL. For example: https://localhost:5000/bi or https://dashboard.syncfusion.com/bi.

SiteIdentifier

For Bold BI Enterprise, it should be something like “site/site1”.For Bold BI Cloud, it should be an empty string.

UserEmail

User email of the admin in your Bold BI server, which would be used to retrieve the dashboards list.

UserPassword

Password of the admin in Bold BI, which would be used to retrieve the dashboards list.

EmbedSecret

You can obtain your EmbedSecret key from the Embed tab in the Bold BI server by enabling Enable embed authentication in the Administration page. Refer to this link for more details.

After generating and saving the secret key, add the necessary functions to get dashboards from the Bold BI server in the **HomeController.cs** file as shown in the following image. ![Adding necessary functions in HomeController.cs to get dashboards from the Bold BI server](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/homecontroller.cs-to-get-dashboards.png align="left") Adding necessary functions in HomeController.cs to get dashboards from the Bold BI server Then update the application URL and launch URL in the **launchSettings.json** file. ![Updating the application URL and launch URL in launchSettings.json](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/url-and-launch-url.png align="left") Updating the application URL and launch URL in launchSettings.json After creating the [ASP.NET](http://ASP.NET) Core application, you need to run it. It will launch with the dashboard details. ![Launching the ASP.NET Core application with the dashboard details](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/launching-the-asp.net.png align="left") Launching the [ASP.NET](http://ASP.NET) Core application with the dashboard details We have created the authorization server, and now we have to set its URL in the Angular application using the **ap host** variable. ## Step 4: Running the Angular application to view the embedded dashboard In the Angular application, update the authorization URL and dashboard URL that were defined in the [ASP.NET](http://ASP.NET) core application as shown in the following image. ![Authorization URL and dashboard URL defined in the ASP.NET core application](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/authorization-url-asp.net.png align="left") Authorization URL and dashboard URL defined in the [ASP.NET](http://ASP.NET) core application To run the Angular sample, open the integrated terminal and use the **ng serve** command. ![Opening the integrated terminal and using the ng serve command to run the Angular sample](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/ng-serve.png align="left") Opening the integrated terminal and using the ng serve command to run the Angular sample You will see the dashboard that was created in the Bold BI server embedded at the default URL of the Angular project [**https://localhost:4200**](https://localhost:4200). Here, you can see the Patient Experience Analysis dashboard properly embedded. ![Patient Experience Analysis dashboard embedded in an Angular application](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/patient-experience-dashboard.png align="left") Patient Experience Analysis dashboard embedded in an Angular application Also, you can easily embed a dashboard in a real-time website by following the previous steps. Refer to the following Bold BI video to learn about embedding a Bold BI dashboard in an Angular application in detail. Embedding a Bold BI dashboard in an Angular application The following image shows an example of embedding the Patient Experience Analysis dashboard in a real-time healthcare website. ![Patient Experience Analysis dashboard embedded in a real-time healthcare website](https://cdn.boldbi.com/wp/blogs/dashboards-in-angular-applications/real-time-healthcare-website.png align="left") Patient Experience Analysis dashboard embedded in a real-time healthcare website You can download the code samples used in this blog from this [documentation link](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/angular/). ## Conclusion I hope you now have a better understanding of embedding a Bold BI dashboard in an Angular application. [Bold BI](https://www.boldbi.com/) helps you integrate dashboards in your applications written in [ASP.NET](http://ASP.NET) [Core](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/asp-net-core/), [ASP.NET](http://ASP.NET) [MVC](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/asp-net-mvc/), [ASP.NET](http://ASP.NET), [Ruby on Rails](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/ruby-on-rails/), [React with](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/react-core/) [ASP.NET](http://ASP.NET) [Core](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/react-core/), [React with Go](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/react-with-go/), [WinForms](https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/winforms/), and more, seamlessly. To learn more about embedding dashboards into your application, refer to this [blog](https://www.boldbi.com/blog/integrating-dashboards-into-applications-with-the-embed-sdk) and our [documentation](https://help.boldbi.com/embedded-bi/overview/). Get started with Bold BI by signing up for a [free 15-day trial](https://www.boldbi.com/pricing) and create more interactive business intelligence dashboards. If you have any questions about this blog, feel free to post them in the comment section below. You can also contact us by submitting your questions through the [Bold BI website](https://www.boldbi.com/contact) or, if you already have an account, you can [log in](https://www.boldbi.com/account) to submit your question.