How to pass a parameter from Angular powerBI client to report to get the subset of data

[sivakar7]

Hi,

We have Embeded the PowerBI report in Angular application using PowerBI Client and AppOwns data. Now I need to pass a parameter from Angular UI for example Id=100 to the report to get only those matching rows. I have tested few examples nothing worked. Pls point me to any article or example.

Thanks in advance.

[sivakar7]

HIi@Anonymous ,

Thank you. Control filters worked for my requirement.

[sivakar7]

Thank you @Anonymous . Control report filters(Use filters in a Power BI embedded analytics report | Microsoft Learn) helped my requirement.

[Anonymous · Accepted solution]

Hi @sivakar7 ,

Please review the following links, hope they can help you.

How to embed Power BI content in an Angular app | Microsoft Learn

Use filters in a Power BI embedded analytics report | Microsoft Learn

In addition, you can follow the steps below to get it:

1. Ensure you have the Power BI Client installed in your Angular project.

 npm install powerbi-client

2. Embed the report with the filters

import { Component, OnInit } from '@angular/core';
   import * as pbi from 'powerbi-client';
   @Component({
     selector: 'app-powerbi-report',
     templateUrl: './powerbi-report.component.html',
     styleUrls: ['./powerbi-report.component.css']
   })
   export class PowerbiReportComponent implements OnInit {

     constructor() {}

     ngOnInit() {
       this.embedReport();
     }

     embedReport() {
       const embedContainer = document.getElementById('embedContainer');

       const reportConfig = {
         type: 'report',
         tokenType: pbi.models.TokenType.Embed,
         accessToken: 'YOUR_EMBED_TOKEN',
         embedUrl: 'YOUR_EMBED_URL',
         id: 'YOUR_REPORT_ID',
         permissions: pbi.models.Permissions.All,
         settings: {
           filterPaneEnabled: false,
           navContentPaneEnabled: false
         }
       };

       const powerbi = new pbi.service.Service(
         pbi.factories.hpmFactory,
         pbi.factories.wpmpFactory,
         pbi.factories.routerFactory
       );

       const report = powerbi.embed(embedContainer, reportConfig);

       // Apply a filter when the report is loaded
       report.on('loaded', () => {
         this.applyFilter(report, 100); // Pass the ID or parameter you need
       });
     }

     applyFilter(report, id) {
       const filter = {
         $schema: 'http://powerbi.com/product/schema#basic',
         target: {
           table: 'YourTableName',
           column: 'YourColumnName'
         },
         operator: 'In',
         values: [id]
       };

       report.updateFilters(pbi.models.FiltersOperations.Replace, [filter])
         .then(result => {
           console.log('Filter applied successfully');
         })
         .catch(error => {
           console.error('Error applying filter', error);
         });
     }
   }

Best Regards