1

First of all, I am very new to Angular2 (or any other version actually) and I have followed several tutorials to get me started but I'm now in a dead end and I don't know how to proceed. Here is the background: I am accessing a third party web API through a POST request (I did that in a service) and it returns HTML markup of the control I need to render on my page, so I made a component of it. It works fine (I had to create a custom pipe to work around the DOM sanitization though).

And here's my issue: in the markup I'm receiving from the web API there's JavaScript stuff to initialize the control that is supposed to execute as soon as it is on the page (it does in every other language I used this control in, PHP, Java, JavaScript, ASP.NET, etc) but for some reason, using Angular2 I can see the script in the DOM, properly inserted at the end of the markup but it does not execute so my control does not work.

Here is my component code:

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

import { MyService } from './my.service'

@Component({
    selector: 'mycontrol',
    template: `<div style="width:1200px; height:1000px;" [innerHtml]="htmlContent | keepHtml"></div>`,
    styleUrls: ['app/control-min.css'],
    encapsulation: ViewEncapsulation.None
})

export class MyComponent implements OnInit {
    htmlContent: any;

    constructor(private myService: MyService) {
    }

    ngOnInit(): void {
        this.myService.getControlMarkup().subscribe(
            response => this.htmlContent = response["HtmlContent"],
            error => this.htmlContent = <any>error
        );
    }
}

And here is my service code:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class MyService {
    headers: Headers;
    options: RequestOptions;

    constructor(private http: Http) {
        this.headers = new Headers({ 'Content-Type': 'application/json' });
        this.options = new RequestOptions({ headers: this.headers });
    }

    getControlMarkup() {
        let controlConfig = {
            SessionId: "mySessionId",
            ControlId: "MyControl1"
        };
        let body = JSON.stringify(controlConfig);
        return this.http
            .post('http://localhost:62968/api/GetControl', body, this.options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    private handleError(error: any) {
        let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

Any idea how I can make this work?

7
  • does the accepted answer on this question helps ? stackoverflow.com/questions/39473049/… Commented Jun 21, 2017 at 9:46
  • I guess it does since it is exactly my issue, but because of my lack of expertise I don't really know how to implement this... Commented Jun 21, 2017 at 10:33
  • what problem are you facing in implementing that? Commented Jun 21, 2017 at 11:02
  • The main one is when should I do this ? Because this.htmlContent is undefined until it gets back from the service call, if I do this right after calling the service, "undefined" gets obviously inserted instead. I tried to put it in ngAfterViewInit hoping that it would be filled but it does not work either. Commented Jun 21, 2017 at 11:13
  • I dont understand, but you should do it after you assign this.htmlContent a value.Do it after this line this.htmlContent = response["HtmlContent"] Commented Jun 21, 2017 at 11:15

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.