Power BI Custom Visual Using Angular Element

8 min readMar 15, 2021

Then it was time to write a blog about how we can implement Angular Element in a Power BI Custom Visual solution. I have previously blogged about how you can use Angular Element with the Power Apps Componant Framework, where the concept of setting up the solution is the same.

I will not go through the concept around Angular Element, you can read about it here:

Angular Elements
Angular Elements Introduction (Video)

Angular and Power BI Visuals

There are probably many developers wondering how to use Angular for developing Power BI Visuals. Angular Elements witch allow you to build custom elements using Angular that can be used in any web project. These custom elements are just part of the web component specification that has been implemented by all the major browser vendors.

You can embed them into any web application. This enables us to write re-usable Angular components & widgets which we can be used inside React, Vue, Handlebar, or even with VanillaJS apps. The Angular Elements will blend in every framework.

So, in theory, Angular Element should work with the Power BI Visuals. In this post i will show you how easy it is to setup solution with Power BI Visuals using Angular Elements.

The First ting you need to do is to setup development environment:

The first thing we will need is Node.js. Installing it is straight forward — follow the steps described here.
Install Visual Studio Code or Visual Studio.
Setup the Envionment

Follow instructions on setting up the environment on link below:

Setting up an environment for developing a Power BI visual in Power BI embedded analytics for better embedded BI insights — Power BI | Microsoft Docs.

Next, we need to install Angular-CLI. To do this, go to https://cli.angular.io/.

Let’s implement Angular Element with Power BI Visuals.

First create a folder:

Then run this command for creating the Power BI Visuals Solution project:

pbiviz new CircleCard

Know your solution is created and should look like picture below:

In command prompt “CD” into the folder:

And then open the solution in VSC:

Know inside the solution folder we need to generate first a Angular solution by running the command:

ng new AECC

I named my solution AECC for (Angular Elements Circle Card).

Select “No”.

Select “No”.

Select “SCSS or CSS”.

When Angular project is created your solution should look like:

When Angular project is created, we need to add @angular/element. When yoou create the Angular project it dosent containes any thing related to @angular/element.

Run this command for adding @angular/element, navigate into newly created Angular Project and run the command below:

ng add @angular/elements

Angular Elements Project:

We need to do some changes in ouer Angular Elements project “AECC”.

NOTE: Before we go further, we need to re-install “document-register-element”. By default it is installed v1.7.2 and it is a bug with this dependencie. So we need to remove and re-install v1.8.1

npm install --save document-register-element@1.8.1

Delete the default created component:

NOTE: Remember not to delete app.module.ts file

Know open you Angular Elements solution and go to the app.module.ts file and do the changes…

First delete all referances to the “AppComponent” we just deleted

Add these lines in AppModule class:

constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(CircleCardComponentComponent, { injector: this.injector });
customElements.define(‘app-pcf-component’, el);
}
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(CircleCardComponentComponent, { injector: this.injector });
customElements.define(‘app-pcf-component’, el);
}

Your app.module.ts file should look like picture below:

As you can see, we added our component to the entryComponents array and then use createCustomElement function to create the element out of it. You’ll also note that we did not include the bootstrap array within our NgModule configuration.

Once we have the custom element, we add it to the custom elements registry by using the define method. We can then include the app on the page and instantiate the element by adding this to the DOM:

<app-circle-card-component></app-circle-card-component>

And we need to put this line inside the main index.html file located in /src :

NOTE: Remove the code related to component app.component.ts we deleted above “app-root” in the body tag:

Replace it with:

Next open package.json related to the angular solution and do the changes in picture below:

Command Bundle:

This command will bundle up alle files related to Angular Elements to one single bundle.js file in “dist” folder. And this file will we use later in PCF Component to render.

Concat:

Concatenate multiple javascript files to one single bundle file.

npm install --save concat

In your root folder of Angular project, create another file name : elements-build.js. This file contains all the information on witch files to concat when running the command “npm run bundle”:

const concat = require(‘concat’);
(async function build() {
const files = [
‘./dist/circleCard/runtime.js’,
‘./dist/circleCard/polyfills.js’,
‘./dist/circleCard/scripts.js’,
‘./dist/circleCard/main.js’
];
await concat(files, ‘./dist/circleCard/bundle.js’);
await concat(files, ‘./plainHTML/bundle.js’);
})();

testHTML:

This command will first do the same thing as command for bundeling. Compile and bundle up all the javascript files and place them to the dist, plainHTML folder, and at the end it runs the lite-server.

How to test Angular Component

Lets create a simple test to see that ouer component realy works and get rendered in a plain html as a web component. For this we need to use “lite-server”. Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.

You can read more bout lite-server here.

npm install --save-dev lite-server

Create a folder inside the root of your project and name it “plainHTML”, and create a file “index.html” inside the folder.

Paste the code below in side the plainHTML/index.html file:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>PowerApps Component - Test Page</title><script src="bundle.js"></script></head><body><h1> Power BI Visuals - Lite Server Test Page  </h1><app-circle-card-component></app-circle-card-component></body></html>

Then we need to create “bs-config.json” file in the root folder, witch contains the configuration for lite-server to run.

Copy and paste the code below in “bs-config.json” file:

{"port": 8000,"files": ["./src/**/*.{html,htm,css,js}"],"server": {"baseDir": "./plainHTML"}}

Note: Remember to run command for bundeling the production file before running the test command above. So that we have bundle.js file witch containes all minified bundled code.

npm run bundle

If every thing is configured correctly as i explained then “lite-server” will render Angular Component as plain HTML:

Now run the testHTML command:

npm run testHTML

IMPORTANT: This indicates that ouer component is working as expected in a plain HTML file as a web component.

Power BI Visual Solution

Now we need to do some changes in Power BI Visual solution.

First we need to add “@types/jest” and “@types/mocha” as dependencies. Why we need these two is because of Angular Elements project need them.

npm install --save @types/jestnpm install --save @types/mocha

And now we need to refrence ouer bundle.js file in Power BI Visual by importing it in visual.ts file:

Add import on top of the visual.ts file:

And do the changes in code so that your constructor() looks like picture below:

Now run the command “npm run start”

NOTE: This tutorial uses the US Sales Analysis report. You can download this report and upload it to Power BI service, or use your own report. If you need more information about Power BI service, and uploading files, refer to the Get started creating in the Power BI service tutorial.

Sign in to PowerBI.com and open the US Sales Analysis report.
Select More options > Edit

Create a new page for testing, by clicking on the New page button at the bottom of the Power BI service interface.

From the Visualizations pane, select the Developer Visual.

This visual represents the custom visual that you’re running on your computer. It’s only available when the custom visual debugging setting is enabled.