Having difficulty adjusting the configuration settings for an embedded report within Angular 7

While attempting to integrate a Power BI report with Angular 7, I encountered an unexpected error when trying to configure the settings of the report. The error message stated: 

Type '{ filterPaneEnabled: boolean; navContentPaneEnabled: boolean; }' has no properties in common with type 'ISettings'.

Here is my embedding code:

var config = {
      type: 'report',
      tokenType: pbi.models.TokenType.Embed,
      id: <report-id>,
      embedUrl:<embedURL>,
      accessToken: <accessToken>,
      settings:{
        filterPaneEnabled:false,
        navContentPaneEnabled: false,
      }
    }
let reportContainer = <HTMLElement>document.getElementById('pbi-container');
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let report = powerbi.embed(reportContainer, config);

In addition, I attempted to embed the report using regular JavaScript and it worked without any issues.

angulartypescriptpowerbi-embedded

Answer №1

Make sure to include as powerbi.IEmbedConfiguration after initializing your config variable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Check the status of a different website's online presence using JavaScript

Hey there! I'm working with Angular and iframes, and I want to determine whether the target website is online before loading it into the iframe. Here's the code I am currently using: try { await this._httpClient.get(url, { observe: 'respo ...

angular

The service being injected is not defined

Two services are involved in this scenario, with the first service being injected into the second service like so: rule.service.ts @Injectable() export class RuleService { constructor( private _resourceService: ResourceService ){} s ...

angulartypescriptangular2-services

What is the best way to update placeholders in Angular 8+?

I have a collection of items: a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. An input element is present with a placeholder stating select from fruits (the array elements should ...

javascripthtmlangularangular11

Leveraging a React hook within a Next.js API route

I am looking for a way to expose the data fetched by a React.js hook as a REST endpoint using Next.js. To create a REST endpoint in Next.js, I can easily use the code below in pages/api/index.tsx export default function handler(req: NextApiRequest, res: N ...

reactjstypescriptnext.js

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

htmlangularformstypescriptionic-framework

Continuously converting methods recursively until the array is fully processed

My current code has a method that is not very efficient and does not scale well. The object y is an array consisting of key/value pairs, each containing two properties: 1. A unique string property called name. This value is identified by the childre ...

javascripttypescript

Matching TypeScript values and types does not function as intended

Recently, I delved into TypeScript to work on my new AngularJS project. However, I encountered an issue where the id, which is supposed to be of type number, is actually being treated as a string. Have I overlooked something in my code? interface IRout ...

angularjstypescript

The select box is not displaying selected values in Angular 10, whereas it is displaying them in Angular 8 using the exact same

I am encountering an issue with the code provided below in two different applications developed using Angular 8 and 10. Strangely, it is not displaying the selected value in the Angular 10 app, while working perfectly fine in the Angular 8 app. <select ...

angularangular10

Converting Antdesign's Datepicker to Typescript

I'm having trouble figuring out how to properly annotate the dateObj parameter in the handleDateChange function that I've created. App.tsx import { useState } from 'react'; import logo from './logo.svg'; ...

reactjstypescriptreact-hooks

Filter error - Unable to retrieve property 'toLowerCase' from null value

When filtering the input against the cached query result, I convert both the user input value and database values to lowercase for comparison. result = this.cachedResults.filter(f => f.prj.toLowerCase().indexOf((this.sV).toLowerCase()) !== -1); This ...

javascriptangulartypescriptangular7

Obtaining images from the backend within a component's TypeScript file in a MEAN stack application is a

In my component.ts file, I am looking to retrieve images from the backend/images folder as Image objects. The paths of these images are stored in the database. this.productsService.getProduct(this.editId).subscribe(productData => { this.name = prod ...

node.jsangulartypescriptexpress

Issue arises when compiling React Redux due to a union type that includes undefined

I am currently in the process of learning how to integrate Redux with React using Typescript. I encountered a compilation error that relates to the type of my store's state, specifically as {posts: PostType[]}. The error message states: Type '{ p ...

reactjstypescriptreduxreact-reduxreducers

When attempting to call Firebase Functions, ensure that Access-Control-Allow-Origin is set up correctly

Although it may seem straightforward, I am confused about how Firebase's functions are supposed to work. Is the main purpose of Firebase functions to enable me to execute functions on the server-side by making calls from client-side code? Whenever I t ...

javascriptangularfirebasexssgoogle-cloud-functions

Angular - Automatically populate nested form with provided data

Here is the link to my StackBlitz project: https://stackblitz.com/edit/create-eez7wi?file=app/app.component.ts I am facing an issue where when I load the resources, it fills all fields except for the skill if more than 1 is entered. setResourceDTOS() { ...

angular

The function named updateContact is not defined, even though it has been declared

Presented below is Angular code snippet: @Component({ selector: 'app-detail-view', templateUrl: './detail-view.component.html', styleUrls: ['./detail-view.component.css'] }) export class DetailViewComponent implements O ...

javascriptangular

What sets React.FC<T> apart from Function() in TypeScript?

Do arrow functions and function notations differ from each other? It seems like these two methods function in the same way. One is written as React.FC<T> while the other as Function(). Is this simply a matter of notation, or are there deeper reaso ...

reactjstypescript

Using Arrow Functions in Angular 2 Typescript with Support for IE11

Are arrow functions in Typescript for Angular2 compatible with IE 11? I have come across information stating that arrow functions in javascript may not be supported in IE 11, but I am uncertain if the same applies to Typescript. ...

angulartypescriptarrow-functions

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

cssangularcss-selectorsangular-material

Typescript declaration for a .js file in a diverse project

Hey there! I'm currently in the process of converting my JavaScript React Redux project to TypeScript, and I've decided to kick things off by tackling my redux reducers file. Here's a snapshot of how my project is structured: Project/ .. ...

typescript

The Nginx server seems to be having trouble reading Gzip files, despite having Gzip compression enabled

Despite having already enabled gzip compression on my nginx server, PageSpeed Insights still suggests enabling text compression for certain files. However, the mentioned files such as main.js, polyfills.js, and styles.css have already been gzipped using th ...

angularnginxgzip