How to render Angular Templating / Handlebars into injected HTML bound by innerHTML - Angular2

Question

I have some content in a serperate file like so (see below), basically I have a lot of HTML, that contains Angular templating.

export var DataProtectionHtml: string = `<a href="{{windowLocation}}#section1">Go to Section 1</a></li>`;

I import the exported variable it into a Componenet. I then assign a component property to the exported variable, sanitize it with the Angular DomSanitizer and then bind it into my HTML template using [innerHTML], here is the component and template code (I have reduced the code for clarity)

import * as dpHtml from './terms-conditions-text/data-protection.text';

windowLocation: string;
htmlContent: string;

constructor(private location: Location, private sanitizer: DomSanitizer) {

    this.windowLocation = location.prepareExternalUrl(location.path()); // let's say this is "/legal/terms-conditions"
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(dpHtml.DataProtectionHtml);
}

here is the template...

<div [innerHTML]="htmlContent"></div>

Now the rendered page doesn't bind the value this.windowLocationto the injected HTML. The anchor link when rendered treats {{windowLocation}} as a string, how can I get it to output the content so the Angular Templating works. So my link would point to "/legal/terms-conditions#section1"?

I do realise that I could just use a replacemethod, but I am unsure if this is the best way, for example:

this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(dpHtml.DataProtectionHtml.replace('{{windowLocation}}', this.windowLocation));

I am sorry if I haven't explained myself well here, if so, please say so and I shall rewrite my question.

Thanks in advance.