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?

albator1932
  • 63
  • 2
  • 7
  • does the accepted answer on this question helps ? https://stackoverflow.com/questions/39473049/angular2-dynamically-insert-script-tag – Anurag Jun 21 '17 at 09: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... – albator1932 Jun 21 '17 at 10:33
  • what problem are you facing in implementing that? – Anurag Jun 21 '17 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. – albator1932 Jun 21 '17 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"]` – Anurag Jun 21 '17 at 11:15
  • Well, this is done in `ngOnInit` and as far as I know it is asynchronous so `this.htmlContent` will stay `undefined` until the service call gets back. – albator1932 Jun 21 '17 at 11:18
  • `this.htmlContent` will be assigned a value, right? After that you should do it and then append it in your component – Anurag Jun 21 '17 at 11:20

0 Answers0