Re: Power BI Embedded and Angular for webpage

Hi,

Power BI Embedded can be used in a lot of scenarios ranging from Asp.net MVC 5, which you may
build on Visual Studio 2015 as explained here:
http://www.mostafaelzoghbi.com/2016/04/power-bi-embedded-step-by-step.html

to JavaScript API as concisely explained on Jon Gallant blog
http://blog.jongallant.com/2017/01/powerbi-embedded-javascript-api-range-slider-filter/

and simple HTML embedding sample as provided below.

If you say you understand how to create Power BI Azure Collections on Azure portal and managed to import my power BI
report on Azure Workspace, then you're on a good path.

Still... before going any further, it's important to adopt a solution which you'll feel mostly comfortable with and therefore also that best fits your needs.
It's not just a matter of saying "Hey I've seen someone used Angular approach, maybe I should do the same" kind of thing...

Now based on your comments, it's essential to first make a clear distinction here.

The first link
  http://azure-samples.github.io/powerbi-angular-client/#/scenario1

is a sample which was built using an AngularJS 1.x approach. If you want to take a look, the code is available on Github https://github.com/Azure-Samples/powerbi-angular-client

Now the second link
   http://community.powerbi.com/t5/Developer/Angular-2-and-Power-BI-Embedded/m-p/144090#M4945

focuses mainly on a suggestion the author of a thread proposed as a solved solution using with Angular 2+ TypeScript -
which is somehow a bit different than the first Angular 1.x approach.

I've tried a pretty similar approach with few addins in Angular 2 CLI and can confirm the solved answer worked in my case.

So basically, the 2-7 steps listed in the tread mainly explains the stepped procedures the author took to manage Power BI Embedded workspace collections,  using the powerbi-cli interface tools. You can find more details on 
   https://github.com/Microsoft/PowerBI-Cli

So in an Angular 2 + TypeScript scenario, you could either create a new Angular 2 CLI application on Visual Studio Code
or use an existing one.

You would then also need to make sure to install the two following libraries [node.js package manager in this case...]

1 - install the powerbi-cli interface you'll use to manage the Power BI Embedded workspace collections step procedures...

 npm install --save powerbi-cli 

2- install the powerbi-client library in your project 

npm install --save powerbi-client 

Then in your Angular 2 CLI application you could for example create a pbireport component in which you would host and manage infos you need to inject in the iFrame hosting your .pbix report

ng g component pbireport

which would scaffold similar following  files

then in pbireport.component.ts  - TypeScript file, based on provided thread solved solution - you could use a similar code to define all configuration paremeters you would inject into your iFrame container...

import { Component, OnInit } from '@angular/core';

import * as pbi from 'powerbi-client';

@Component({
  selector: 'app-pbireport',
  templateUrl: './pbireport.component.html',
  styleUrls: ['./pbireport.component.css']
})

export class PbireportComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.showReport()
  }

  showReport() {
    // Report's Secured Token
    let accessToken = '<Your Access Token Key1>  ';

    // Embed URL
    let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=<Your embedReportID>';

    // Report ID
    let embedReportId = <Your embedReportID>';

    // Define a Configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    
    let config = {
      type: 'report',
      accessToken: accessToken,
      embedUrl: embedUrl,
      id: embedReportId,
      settings: {
        filterPaneEnabled: true,
        navContentPaneEnabled: true
      }
    };

    // Grab the reference to the div HTML element that will host the report.
    let reportContainer = <HTMLElement>document.getElementById('reportContainer');

    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    let report = powerbi.embed(reportContainer, config);

    // Report.off removes a given event handler if it exists.
    report.off("loaded");

    // Report.on will add an event handler which prints to Log window.
    report.on("loaded", function () {
      console.log("Loaded");
    });
  }
}

then in pbireport.component.html, - html file, you could simply define a div id="reportContainer" section which will host your iFrame.

<!-- Main content--><section class="content"><div class="container-fluid"><div class="row"><div id="reportContainer" class="col-xs-12" ></div> <-----</div></div></section>

you could then add the component in a main app.component.html in a similar fashion

<!-- Wrapper--><div class="wrapper"><app-header></app-header><app-navigation></app-navigation><app-pbireport></app-pbireport> <------ </div>

 Finally when running the app - if everything works as expected - you woud end up with similar rendered result  

Thereare obviously more options to explore in Angular 2 scenario , but basically this should work.

Hope this helps