powerbi-client-angular setting filter in report config adds duplicate filters

I am using powerbi-client-angular to embed PowerBI report in angular web app using "User owns data method"

I want to apply some filters first time the report loads in the web app.

app.component.ts


initPbiChart() {
this.pbiService
.login()
.then((r: any) => {
this.pbiService
.getAccessToken()
.then((res: any) => {
const accessToken = res.accessToken;
this.accessToken = accessToken;

this.embedConfig = {
type: 'report',
embedUrl: AppModule.APP_CONFIG.reportConfig.reportUrl as string,
accessToken: accessToken,
tokenType: models.TokenType.Aad,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: false,
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToWidth,
},
},
filters: [
{
$schema: 'http://powerbi.com/product/schema#advanced',
target: {
table: 'VW_MNBT_SLA_DATE',
column: 'DATE',
},
filterType: 0,
displaySettings: {
displayName: 'Date',
},
logicalOperator: 'And',
conditions: [
{
operator: 'GreaterThanOrEqual',
value: '2024-12-31T18:30:00.000Z',
},
{
operator: 'LessThanOrEqual',
value: '2025-02-26T18:30:00.000Z',
},
],
},
],
};
})
.catch((err: any) => {
console.log('error', err);
});
})
.catch((e: any) => {
console.warn('Please make sure browser popup blocker is disabled');
console.error(e);
});
}


This works, the report loads with filter applied. But I see the Date filter appearing twice in the report.



Tried logging the filter objects and compared them. Refer below screenshots.



How to apply filter during report embed without having duplicate filters generated in the report?

Continue reading...