I'm working on creating a reusable UI ponent and am trying to figure out how to allow the consumer of the ponent to provide their own template for a particular area of the ponent.

I'm using typescript and am trying to utilize string interpolation to acplish this as it seemed the most appropriate course of action.

Here is what I have so far:

export class Pager {
    pageNumber: number = 1;

    getButtonHtml(buttonContentTemplate?: string, isDisabled?: boolean): string {
        buttonContentTemlpate = buttonContentTemplate || '${this.pageNumber}';
        isDisabled = isDisabled || false;
        return `<button id="button-id" type="button"  ${!isDisabled ? '' : disabledAttribute}>
                    ${buttonContentTemplate}
                </button>`;
    }
}

I have some other methods that will update the page number based off user input/interaction, but I want it to work that when getButtonHtml gets called, the return value would be <button id="button-id" type="button">1</button>, but instead I'm getting <button id="button-id" type="button">${this.pageNumber}</button>.

Is there a way to get javascript to evaluate the string again, and interpolate the remaining place holders?

I've looked at the MDN article on this topic and think that the String.raw method might possibly be what I need to use, but I wasn't sure and no matter what I try, I haven't gotten it to work.

Any help would be greatly appreciated.

I'm working on creating a reusable UI ponent and am trying to figure out how to allow the consumer of the ponent to provide their own template for a particular area of the ponent.

I'm using typescript and am trying to utilize string interpolation to acplish this as it seemed the most appropriate course of action.

Here is what I have so far:

export class Pager {
    pageNumber: number = 1;

    getButtonHtml(buttonContentTemplate?: string, isDisabled?: boolean): string {
        buttonContentTemlpate = buttonContentTemplate || '${this.pageNumber}';
        isDisabled = isDisabled || false;
        return `<button id="button-id" type="button"  ${!isDisabled ? '' : disabledAttribute}>
                    ${buttonContentTemplate}
                </button>`;
    }
}

I have some other methods that will update the page number based off user input/interaction, but I want it to work that when getButtonHtml gets called, the return value would be <button id="button-id" type="button">1</button>, but instead I'm getting <button id="button-id" type="button">${this.pageNumber}</button>.

Is there a way to get javascript to evaluate the string again, and interpolate the remaining place holders?

I've looked at the MDN article on this topic and think that the String.raw method might possibly be what I need to use, but I wasn't sure and no matter what I try, I haven't gotten it to work.

Any help would be greatly appreciated.

• javascript
• typescript
• ecmascript-6
• string-interpolation

• 3 ES2015 template literals or one of many available template systems – Pointy Commented Sep 22, 2016 at 15:17
• Maybe my question isn't clear. I'm using the template literals and it is working for the disabled attribute, but the ${buttonContentTemplate} contains a template literal as well and that isn't being evaluated. Instead of putting 1 in there(which would happen if the template got evaluated), it is putting in ${this.pageNumber}. Is there a way to force javascript to evaluate it again and make this further replacement? – peinearydevelopment Commented Sep 22, 2016 at 15:22
• should be enclosed with ` – Monah Commented Sep 22, 2016 at 15:22
• yes I see now. Well as mentioned in the answer below, template literals aren't easily posable that way. – Pointy Commented Sep 22, 2016 at 15:26

1 Answer 1

The problem is that Template literals are interpreted immediately.

What you want to do is lazy load the template. So it would be best to pass in a function that returns a string.

export class Pager {
    pageNumber: number = 1;

    getButtonHtml(template?: () => string, isDisabled=false): string {
        template = template || function() { return this.pageNumber.toString() };
        return `<button id="button-id" type="button"  ${!isDisabled ? '' : disabledAttribute}>
                    ${template()}
                </button>`;
    }
}

Additionally, you can take advantage of default parameters to avoid the || trick.