javascript angular powerbi powerbi-embedded

How to pass parameters in embedded Power BI paginated report?

I'm using the Power BI Angular library to embed a paginated report with no problems, as defined in https://github.com/microsoft/PowerBI-client-angular

        <powerbi-paginated-report
            [embedConfig]="embedConfig"
            [cssClassName]="'container'">
        </powerbi-paginated-report>

Problem happens when I add parameters to the paginated report. I defined Internal parameters without defaults, where the intent is to pass these parameters when the report is embedded/rendered.

I tried two methods, unsuccessfully:

Append to the Embed URL string the parameter name and values:
```
embedUrl = embedUrl + '&rp:fromsk=20&rp:area=A' 
```

Define the parameters in the embedded config object:

    this.embedConfig = {
         type: 'report',
         accessToken: '**********',
         tokenType: models.TokenType.Embed,
         permissions: models.Permissions.ReadWrite,
         viewMode: models.ViewMode.View,
         settings: {
             parameterValues: [
                 { name: "area", value: "ab" },
                 { name: "fromsk", value: 20 }
             ]
         }
     };

The problem is that either the parameters are ignored or the page is blank. What method should I use? How to make this work?

Solution

import { Component } from '@angular/core';
import * as models from 'powerbi-models';

@Component({
  selector: 'app-paginated-report',
  template: `
    <powerbi-paginated-report
      [embedConfig]="embedConfig"
      [cssClassName]="'container'">
    </powerbi-paginated-report>
  `
})
export class PaginatedReportComponent {
  embedConfig: any;

  constructor() {
    const reportId = 'YOUR_REPORT_ID';
    const groupId = 'YOUR_WORKSPACE_ID';
    const accessToken = 'YOUR_EMBED_TOKEN';

    // Base embed URL for paginated reports
    const baseEmbedUrl = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${groupId}`;

    // Add paginated report parameters (rp: prefix required)
    const reportParams = '&rp:fromsk=20&rp:area=A';
    const finalEmbedUrl = baseEmbedUrl + reportParams;

    this.embedConfig = {
      type: 'paginatedReport', // This is important
      embedUrl: finalEmbedUrl,
      accessToken: accessToken,
      tokenType: models.TokenType.Embed,
      permissions: models.Permissions.All,
    };
  }
}