Hi Sander / Angular Team,
Good Morning.
I have written a TypeScript:
import { Component, OnInit, ElementRef, OnDestroy, ViewChild } from
'@angular/core';
// import { SearchResult } from './search-result.model';
import { HttpClient } from '@angular/common/http';
// import { map } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
// import 'rxjs/add/operator/catch';
// import 'rxjs/Rx';
@Component({
selector: 'app-web-app',
templateUrl: './web-app.component.html',
styleUrls: ['./web-app.component.css']
})
export class WebAppComponent {
// results: SearchResult[];
htmlResponse: any;
@ViewChild('mapElement') public mapElement: ElementRef;
constructor(private http:HttpClient) {
}
getHtmlFromService() {
const url = 'XXXX';
this.http.get(url, {responseType: 'blob'})
.subscribe((data => {
console.log(" The Data is", data);
this.createResponseFromBlob(data);
}));
}
createResponseFromBlob(htmlRes : Blob)
{
console.log('HTML Response is', htmlRes.size);
console.log('HTML Response is', htmlRes.type);
this.htmlResponse=htmlRes;
// this.mapElement.nativeElement.innerHTML= this.htmlRes;
console.log('Response is',this.htmlResponse);
this.mapElement= this.htmlResponse;
// this.mapElement.nativeElement= this.htmlResponse;
console.log('element is', this.mapElement);
}
//htmlTemplate = this.htmlResponse;
//htmlTemplate = this.mapElemen;
}
I have an HTML:
<div class='container'>
<div class="page-header">
<h1>Map Search
</h1>
<button type="button" (click)="getHtmlFromService()">Get Html</button>
</div>
<div [innerHTML]="mapElement"></div>
</div>
It is displaying the output as:
[image: image.png]
I am not able to get the HTML page instead it is displaying as [Object
Blob].
How to convert Object Blob as an HTML Page? Can You please help me with
this?.
Waiting for your response.
Thanks & Regards,
Suresh Kumar
On Thu, Dec 6, 2018 at 1:59 PM Suresh Kumar <[email protected]>
wrote:
>
>
>
> Hi Sander / Team,
>
> Good Morning.
>
> I am using Angular 7. I want to invoke an URL which returns HTML (that
> basically renders map from a site).
>
> Through the below program, I am able to hit the External Server URL (
> http://localhost:3344/webappbuilder/apps/8) and it generates a blob
> (returning text/html).
>
> I want to manipulate the blob and place it on div to display the the html
> in the form of map.
>
> May I know how I can manipulate the blob and render the results(HTML) as
> map on Angular 7.
>
> and also let me know:
>
> How can I load an external HTML file (
> http://localhost:3344/webappbuilder/apps/8/index.html) on my Angular page
> (Angular 7)?
>
> Expecting your response and please assist me.
>
> Thanks & Regards,
> M. Suresh Kumar
>
> -----------------
> *TypeScript FIle:*
> import { Component, OnInit } from '@angular/core';
> import { HttpClient } from '@angular/common/http';
>
> @Component({
> selector: 'app-web-app',
> templateUrl: './web-app.component.html',
> styleUrls: ['./web-app.component.css']
> })
>
> export class WebAppComponent implements OnInit{
> // results: SearchResult[];
>
> constructor(private http:HttpClient) {
> }
> ngOnInit(): void {
> console.log('Suresh');
>
> // this.http.get('
> http://localhost:3344/webappbuilder/apps/8').pipe(map((response: any) =>
> response.json())).subscribe(response => console.log(response));
> // this.http.get('
> http://localhost:3344/webappbuilder/apps/8').subscribe(response =>
> console.log(response));
> const url = 'http://localhost:3344/webappbuilder/apps/8';
> this.http.get(url, {responseType: 'blob'})
> .subscribe((data:any) => {
> console.log(" The Data is", data);
> });
> }
> }
>
> ------------
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
