Iframe loading through a get request in angular 5

Question

I am embedding the grafana dashboard in my angular app. I have the following component in my angular app.

test.component.html

<div class="dashboard">
    <iframe width="100%" height="100%" [src]="url | safe" style="border:none;"></iframe>
</div>

This is basically a grafana iframe

I wanted to add some auth headers before loading the iframe, so instead of directly loading the iframe I added code to make a get request to the iframe.

Here is the code that I added to test.component.ts

    ngOnInit() {

        this.get(this.url).subscribe(blob => this.iframe.nativeElement.src = blob);
    }

    get(url: string): Observable<any> {
        const options = {
            headers: new HttpHeaders({
                'X-WEBAUTH-USER': 'niranjan'
            }),
            responseType: 'blob' as 'json'
        }

        return new Observable((observer: Subscriber<any>) => {
            let objectUrl: string = null;

            this.http
                .get(url, options)
                .subscribe(m => {
                    objectUrl = URL.createObjectURL(m);
                    observer.next(objectUrl);
                });

            return () => {
                if (objectUrl) {
                    URL.revokeObjectURL(objectUrl);
                    objectUrl = null;
                }
            };
        });
    }

and changed my test.component.html to following

<div class="dashboard">
    <iframe #iframe width="100%" height="100%" style="border:none;"></iframe>
</div>

In the second scenario the iframe is loaded but the requests to css, fonts, images and other rest requests are not made so I don't get the whole grafana ui. I want to render the same grafana ui through a get request to iframe is there a way to do that in Angular 5.