Re: Angular 2 and Power BI Embedded

import { Component, Inject, OnInit, ElementRef }  from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ActivatedRoute }     from '@angular/router';
import { Observable }         from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import * as pbi from 'powerbi-client';
@Component({
    templateUrl: '../../template/dashboard/dashboard.html'
})
export class DashboardComponent implements OnInit {

    PBmodel: pbi.IEmbedConfiguration;
    title: string;
    report: pbi.Report;
    pages: pbi.Page[];
    currentPage: pbi.Page;
    //report: any;


    constructor(private route: ActivatedRoute) {
        this.title = "Sample Check";    
    }
    
	ngOnInit(){
		this.showReport();
	}
    apply(): void {
       let advanceFilter = {
            $schema: "http://powerbi.com/product/schema#advanced",
            target: {
                table: "Meter",
                column: "MeterDate"
            },
            logicalOperator: "And",
            conditions: [
                {
                    operator: "GreaterThanOrEqual",
                    value: "2017-01-01T00:00:00.000Z"
                },
                {
                    operator: "LessThanOrEqual",
                    value: "2017-01-31T00:00:00.000Z"
                }
            ]
        };
        console.log(advanceFilter);
        console.log(this.report);
        
        this.report.getFilters().then(allTargetFilters=> {
            //for (var i = 0; i < allfilter.length; i++) {
            allTargetFilters.push(advanceFilter);
            //}
            // Set filters
            this.report.setFilters(allTargetFilters);
        });
    }

    showReport(PBIData: pbi.IEmbedConfiguration) {

        let config = {
            type: 'report',
            accessToken: PBIData.accessToken,
            embedUrl: PBIData.embedUrl,
            id: PBIData.id,
            settings: {
                filterPaneEnabled: false
            }
        };

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

        // Embed the report and display it within the div container.
        
        this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
        this.report = <pbi.Report>this.powerbi.embed(reportContainer, config);
        // Report.off removes a given event handler if it exists.
        this.report.off("loaded");

        this.report.on("loaded", this.loadReport);

        this.report.off("pageChanged");

        this.report.on("pageChanged", e => {
            console.log(e);
            //this.currentPage = e;
            ////pageName.innerText = e.detail.newPage.displayName;

            //if (this.pages.length === 0) {
            //    return;
            //}

            //pageIndex = pages.findIndex(function (el) {
            //    return el.name === e.detail.newPage.name;
            //});
        });
    }

    loadReport()
    {
        this.report.getPages()
            .then(reportPages => this.pages = reportPages);
        console.log(this.pages);
    }