Link Power Bi report in Angular application without embedding

Question

We have been using embedded power bi reports in our Angular application using powerbi-client by acquiring an access token, passing an HTML element, embedded URL, parameters etc.

I now have a requirement to not embed the report, but open the report in a new tab. it looks unlikely that I can use the same package as this requires an HTML element to be passed, something like below

 embed(element: HTMLElement, config: IEmbedConfiguration): Embed;
    /**
     * Given a configuration based on an HTML element,
     * if the component has already been created and attached to the element, reuses the component instance and existing iframe,
     * otherwise creates a new component instance.
     * This is used for the phased embedding API, once element is loaded successfully, one can call 'render' on it.
     *
     * @param HTMLElement} Parent HTML element
     * @param IEmbedConfiguration Embed configuration
     * @returns Embed Embedded object
     */

On click of a button, Any suggestions on how do I redirect the user to an external link and show the report in a new tab(with access token, parameters and other mandatory details passed to it)

Answer 1

To open the report in new popup tab we added this piece of code in app.component.html

<div id="popupContent10" class="overlay"> 
  <div class="popup"> 
    <a class="close" href="#">&times;</a> 
    <powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap"> 
    </powerbi-report> 
  </div> 
</div> 

So when we click on the button our report is opening in new popup window. You can try in this way.