powerbi-client-angular-next/src/components/powerbi-tile-embed/powerbi-tile-embed.component.ts

Angular wrapper for powerbi-client library

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { Embed, ITileEmbedConfiguration, Tile } from 'powerbi-client';
import {
  EventHandler,
  PowerBIEmbedComponent,
} from '../powerbi-embed/powerbi-embed.component';

/**
 * Tile component to embed the tile, extends Base component
 */
@Component({
  selector: 'powerbi-tile[embedConfig]',
  template: '<div class={{cssClassName}} #tileContainer></div>',
  standalone: true,
})
export class PowerBITileEmbedComponent
  extends PowerBIEmbedComponent
  implements OnInit, OnChanges, AfterViewInit
{
  // Input() specify properties that will be passed from parent
  // Configuration for embedding the PowerBI Tile (Required)
  @Input() embedConfig!: ITileEmbedConfiguration;

  // Map of event name and handler methods pairs to be triggered on the event (Optional)
  @Input() eventHandlers?: Map<string, EventHandler | null>;

  // Ref to the HTML div container element
  @ViewChild('tileContainer') private containerRef!: ElementRef<HTMLDivElement>;

  // Embedded entity
  // Note: Do not read or assign to this member variable directly, instead use the getter and setter
  private _embed?: Embed;

  // Getter for this._embed
  private get embed(): Embed | undefined {
    return this._embed;
  }

  // Setter for this._embed
  private set embed(newEmbedInstance: Embed | undefined) {
    this._embed = newEmbedInstance;
  }

  constructor() {
    super();
  }

  // Returns embed object to calling function
  getTile(): Tile {
    return this._embed as Tile;
  }

  ngOnInit(): void {
    // Initialize PowerBI service instance variable from parent
    super.ngOnInit();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.embedConfig) {
      // Check if the function is being called for the first time
      if (changes.embedConfig.isFirstChange()) {
        return;
      }

      const prevEmbedConfig: ITileEmbedConfiguration =
        changes.embedConfig.previousValue;
      const currentEmbedConfig: ITileEmbedConfiguration =
        changes.embedConfig.currentValue;
      if (
        JSON.stringify(prevEmbedConfig) !== JSON.stringify(currentEmbedConfig)
      ) {
        // Input from parent get updated, thus call embedTile function
        this.embedTile();
      }
    }

    // Set event handlers if available
    if (this.eventHandlers && this.embed) {
      super.setEventHandlers(this.embed, this.eventHandlers);
    }
  }

  ngAfterViewInit(): void {
    // Check if container exists on the UI
    if (this.containerRef.nativeElement) {
      // Decide to embed or bootstrap
      if (this.embedConfig.accessToken && this.embedConfig.embedUrl) {
        this.embedTile();
      } else {
        this.embed = this.powerbi.bootstrap(
          this.containerRef.nativeElement,
          this.embedConfig
        );
      }
    }

    // Set event handlers if available
    if (this.eventHandlers && this.embed) {
      super.setEventHandlers(this.embed, this.eventHandlers);
    }
  }

  /**
   * Embed the PowerBI Tile
   *
   * @returns void
   */
  private embedTile(): void {
    // Check if the HTML container is rendered and available
    if (
      !this.containerRef.nativeElement ||
      !this.embedConfig.accessToken ||
      !this.embedConfig.embedUrl
    ) {
      return;
    }

    this.embed = this.powerbi.embed(
      this.containerRef.nativeElement,
      this.embedConfig
    );
  }
}