<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto">I am logging a feature request to support more dynamic i18n lookups.</p>
<p dir="auto"><strong>Current behavior</strong><br>
From what I can tell the current i18n approach can only target elements with a static reference in the markup.<br>
(e.g. <code class="notranslate">&lt;div i18n="meaning|description"&gt;English Text&lt;/div&gt;</code>)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
One of the challenges I see with this is building a data driven ui with translations. If you come from the <code class="notranslate">ng-translate</code> world it's not uncommon to loop over a list of language keys and do lookups to resolve translated values.</p>
<p dir="auto">It's not clear to me how to replicate this behavior using i18n in angular.<br>
It would be nice if i18n allowed us to specify the keys based on data binding instead of hard coded references in the markup.</p>
<p dir="auto">Example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngFor=&quot;let key of keys&quot;&gt;
    &lt;div i18n=&quot;@@{{key}}&quot;&gt;&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngFor="let key of keys"&gt;
    &lt;div i18n="@@{{key}}"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">It looks like the ability to set your own @<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/keys/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/keys">@keys</a> was added in 4.0. Thinking this key is perfect for the lookup, but it would need to be generated based on bindings.</p>
<p dir="auto">This would also assume that we are allowed to manually create the xlf file instead of relying on the i18n compiler cli tool to generate it. The list of keys could potentially come from an api and would not be a fixed list. There would be no way for the generator to know the set until runtime.</p>
<p dir="auto">I still think this can be made compatible with AoT. It would require one more level of indirection in the translation lookup though.</p>
<p dir="auto">Instead of<br>
<code class="notranslate">var currVal_2 = inlineInterpolate(1, ‘Welcome ', this.parentView.context.firstNameName, '');</code></p>
<p dir="auto">You could maybe have<br>
<code class="notranslate">var currVal_2 = inlineInterpolate(1, lookupKey('@@Welcome'), this.parentView.context.firstNameName, '');</code></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
The motivation is a more flexible translation experience.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] feature request"><pre class="notranslate"><code class="notranslate">[x] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="159302131" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9104" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9104/hovercard?comment_id=244909246&amp;comment_type=issue_comment" href="https://github.com/angular/angular/issues/9104#issuecomment-244909246">#9104 (comment)</a></p>
<blockquote>
<p dir="auto">I don't think it is possible, like I said before it only works with static text, it won't parse text on the js code, only templates</p>
</blockquote>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Be able to translate strings used anywhere in the code, using an API.</p>
<h2 dir="auto"><strong>Reproduction of the problem</strong></h2>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I'm referencing the usage of <code class="notranslate">$translate.instant</code> to exposure real use cases:</p>
<ul dir="auto">
<li>Custom rendered text:</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (data._current_results === data._total) {
                content = this.$translate.instant('CLIPPINGS__LIST__SUMMARY_ALL', {'num': data._current_results});
            } else {
                if (undefined === data._total) {
                    data._total = '...';
                }

                content = this.$translate.instant('CLIPPINGS__LIST__SUMMARY', {
                    'num': data._current_results,
                    'total': data._total
                });
            }

            // Put 'mentions' first
            data = angular.merge({}, {
                mentions: mentions
            }, data);

            _.each(data, (value:number, key:string):void =&gt; {
                if (value) {
                    details += value + ' ' + this.$translate.instant('CLIPPINGS__LIST__SUMMARY_TYPE_' + key) + ', ';
                }
            });

            if (details) {
                details = '(' + _.trim(details, ', ') + ')';
            }

            content = content.replace(':details', details);"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_current_results</span> <span class="pl-c1">===</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_total</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">content</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'CLIPPINGS__LIST__SUMMARY_ALL'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-s">'num'</span>: <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_current_results</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
                <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">undefined</span> <span class="pl-c1">===</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_total</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_total</span> <span class="pl-c1">=</span> <span class="pl-s">'...'</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>

                <span class="pl-s1">content</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'CLIPPINGS__LIST__SUMMARY'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
                    <span class="pl-s">'num'</span>: <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_current_results</span><span class="pl-kos">,</span>
                    <span class="pl-s">'total'</span>: <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">_total</span>
                <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>

            <span class="pl-c">// Put 'mentions' first</span>
            <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">merge</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
                <span class="pl-c1">mentions</span>: <span class="pl-s1">mentions</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">each</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">value</span>:<span class="pl-smi">number</span><span class="pl-kos">,</span> <span class="pl-s1">key</span>:<span class="pl-smi">string</span><span class="pl-kos">)</span>:<span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">details</span> <span class="pl-c1">+=</span> <span class="pl-s1">value</span> <span class="pl-c1">+</span> <span class="pl-s">' '</span> <span class="pl-c1">+</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'CLIPPINGS__LIST__SUMMARY_TYPE_'</span> <span class="pl-c1">+</span> <span class="pl-s1">key</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">', '</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">details</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">details</span> <span class="pl-c1">=</span> <span class="pl-s">'('</span> <span class="pl-c1">+</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">trim</span><span class="pl-kos">(</span><span class="pl-s1">details</span><span class="pl-kos">,</span> <span class="pl-s">', '</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">')'</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>

            <span class="pl-s1">content</span> <span class="pl-c1">=</span> <span class="pl-s1">content</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">':details'</span><span class="pl-kos">,</span> <span class="pl-s1">details</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">More examples:</p>
<details>
- Getting image's file name from exported image of a HTML rendered report:
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="getExportImageName(hideExtension:boolean):string {
        let fileName:string;

        fileName = this.$translate.instant('D_CHART_FACET_authors__EXPORT_FILENAME', {
            'profileName': this.ExportService.GetProfileName(),
            'period': this.ExportService.GetPeriodString(this.SearchFilter.GetPeriodFromInterval())
        });

        if (!Boolean(hideExtension)) {
            fileName += '.png';
        }

        return fileName;
    }"><pre class="notranslate"><span class="pl-en">getExportImageName</span><span class="pl-kos">(</span><span class="pl-s1">hideExtension</span>:boolean<span class="pl-kos">)</span>:string <span class="pl-kos">{</span>
        <span class="pl-k">let</span> <span class="pl-s1">fileName</span>:<span class="pl-smi">string</span><span class="pl-kos">;</span>

        <span class="pl-s1">fileName</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'D_CHART_FACET_authors__EXPORT_FILENAME'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
            <span class="pl-s">'profileName'</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ExportService</span><span class="pl-kos">.</span><span class="pl-en">GetProfileName</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-s">'period'</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ExportService</span><span class="pl-kos">.</span><span class="pl-en">GetPeriodString</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">SearchFilter</span><span class="pl-kos">.</span><span class="pl-en">GetPeriodFromInterval</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">Boolean</span><span class="pl-kos">(</span><span class="pl-s1">hideExtension</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">fileName</span> <span class="pl-c1">+=</span> <span class="pl-s">'.png'</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>

        <span class="pl-k">return</span> <span class="pl-s1">fileName</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Sometimes you're translating, sometimes use model data (could be very verbose in a template):</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="private _getTitle():string {
        if (this.inShareColumn) {
            return this.$translate.instant('COMPARISONS__SHARE_COLUMN_share_of_voice_TITLE');
        } else if (this.inTotalsColumn) {
            return this.$translate.instant('COMPARISONS__TOTAL_COLUMN_share_of_voice_TITLE');
        } else {
            return _.get&lt;string&gt;(this.group, 'profileName', '');
        }
    }"><pre class="notranslate"><span class="pl-k">private</span> <span class="pl-en">_getTitle</span><span class="pl-kos">(</span><span class="pl-kos">)</span>:string <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">inShareColumn</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'COMPARISONS__SHARE_COLUMN_share_of_voice_TITLE'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">inTotalsColumn</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'COMPARISONS__TOTAL_COLUMN_share_of_voice_TITLE'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">&lt;</span><span class="pl-smi">string</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">group</span><span class="pl-kos">,</span> <span class="pl-s">'profileName'</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Using a third party chart plugin (Highcharts)</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.chart = new Highcharts.Chart(&lt;any&gt;{
            title: {
                text: this.$translate.instant('REPORTS_BLOG_MAPPING_CHART_TITLE_tone').toUpperCase(),
            },
            xAxis: {
                title: {
                    text: this.$translate.instant('REPORTS_BLOG_MAPPING_CHART_TITLE_tone_xaxis')
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: this.$translate.instant('REPORTS_BLOG_MAPPING_CHART_TITLE_tone_yaxis')
                }
            },
            plotOptions: {
                scatter: {
                    tooltip: {
                        headerFormat: '&lt;b&gt;{point.key}&lt;/b&gt;&lt;br&gt;',
                        pointFormat: '{point.y} ' + this.$translate.instant('REPORTS_BLOG_MAPPING_CHART_mentions')
                    }
                }
            }
        });"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">chart</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Highcharts</span><span class="pl-kos">.</span><span class="pl-c1">Chart</span><span class="pl-kos">(</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span><span class="pl-kos">{</span>
            <span class="pl-c1">title</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">text</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'REPORTS_BLOG_MAPPING_CHART_TITLE_tone'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toUpperCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c1">xAxis</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">title</span>: <span class="pl-kos">{</span>
                    <span class="pl-c1">text</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'REPORTS_BLOG_MAPPING_CHART_TITLE_tone_xaxis'</span><span class="pl-kos">)</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c1">yAxis</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">min</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
                <span class="pl-c1">title</span>: <span class="pl-kos">{</span>
                    <span class="pl-c1">text</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'REPORTS_BLOG_MAPPING_CHART_TITLE_tone_yaxis'</span><span class="pl-kos">)</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-c1">plotOptions</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">scatter</span>: <span class="pl-kos">{</span>
                    <span class="pl-c1">tooltip</span>: <span class="pl-kos">{</span>
                        <span class="pl-c1">headerFormat</span>: <span class="pl-s">'&lt;b&gt;{point.key}&lt;/b&gt;&lt;br&gt;'</span><span class="pl-kos">,</span>
                        <span class="pl-c1">pointFormat</span>: <span class="pl-s">'{point.y} '</span> <span class="pl-c1">+</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'REPORTS_BLOG_MAPPING_CHART_mentions'</span><span class="pl-kos">)</span>
                    <span class="pl-kos">}</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li>To setup config variables and render the text without pipes as it's not always a translated string</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.config = {
            requiredList: true,
            bannedList: false,
            allowSpaces: false,
            allowComma: false,
            colorsType: false,
            defaultEnterAction: 'required',
            requiredTooltip: this.$translate.instant('D_CLIPPING_TAGS__REQUIRED_TOOLTIP'),
            bannedTooltip: this.$translate.instant('D_CLIPPING_TAGS__BANNED_TOOLTIP')
        };"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">requiredList</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
            <span class="pl-c1">bannedList</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
            <span class="pl-c1">allowSpaces</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
            <span class="pl-c1">allowComma</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
            <span class="pl-c1">colorsType</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
            <span class="pl-c1">defaultEnterAction</span>: <span class="pl-s">'required'</span><span class="pl-kos">,</span>
            <span class="pl-c1">requiredTooltip</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'D_CLIPPING_TAGS__REQUIRED_TOOLTIP'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-c1">bannedTooltip</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'D_CLIPPING_TAGS__BANNED_TOOLTIP'</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li>To set window.title :) :</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="SetWindowTitle(title:string) {
        if (!!title) {
            this.$window.document.title = this.$translate.instant(title);
        }
    }"><pre class="notranslate"><span class="pl-smi">SetWindowTitle</span><span class="pl-kos">(</span><span class="pl-s1">title</span>:<span class="pl-s1">string</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">title</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$window</span><span class="pl-kos">.</span><span class="pl-c1">document</span><span class="pl-kos">.</span><span class="pl-c1">title</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s1">title</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Custom date formatting:</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="dateHuman(date:Date):string {
        return date.getDate() + ' ' + this.$translate.instant('GLOBAL_CALENDAR_MONTH_' + date.getMonth())
            + ' ' + date.getFullYear();
    }"><pre class="notranslate"><span class="pl-en">dateHuman</span><span class="pl-kos">(</span><span class="pl-s1">date</span>:<span class="pl-smi">Date</span><span class="pl-kos">)</span>:string <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s1">date</span><span class="pl-kos">.</span><span class="pl-en">getDate</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">' '</span> <span class="pl-c1">+</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_'</span> <span class="pl-c1">+</span> <span class="pl-s1">date</span><span class="pl-kos">.</span><span class="pl-en">getMonth</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
            <span class="pl-c1">+</span> <span class="pl-s">' '</span> <span class="pl-c1">+</span> <span class="pl-s1">date</span><span class="pl-kos">.</span><span class="pl-en">getFullYear</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Sort things based on translated values:</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Sort types
            tmpTypes = _.sortBy(tmpTypes, (type:string):string =&gt; {
                // 'MISC' at the end
                if ('MISC' === type) {
                    return 'zzzzz';
                }

                return this.$translate.instant('FACET_phrases2__TYPE_' + type);
            });"><pre class="notranslate"><span class="pl-c">// Sort types</span>
            <span class="pl-s1">tmpTypes</span> <span class="pl-c1">=</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">sortBy</span><span class="pl-kos">(</span><span class="pl-s1">tmpTypes</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">type</span>:<span class="pl-smi">string</span><span class="pl-kos">)</span>:<span class="pl-smi">string</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-c">// 'MISC' at the end</span>
                <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s">'MISC'</span> <span class="pl-c1">===</span> <span class="pl-s1">type</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-k">return</span> <span class="pl-s">'zzzzz'</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>

                <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'FACET_phrases2__TYPE_'</span> <span class="pl-c1">+</span> <span class="pl-s1">type</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="GetSortedLanguages():IFacetLangDetectedCommonServiceLanguageObject[] {
        // We have to sort by translated languages!
        return _.sortBy(_.map(this.facetOptions, (item:string):any =&gt; {
            return {
                key: item,
                label: this.$translate.instant('FACET_langDetected_' + item),
                cssStyle: (_.includes(['english', 'catalan', 'spanish', 'french', 'italian'], item))
                    ? {'font-weight': 'bold'} : null,
                flag: _.get(this.lutFlags, item, null)
            };
        }), (item):string =&gt; {
            return item.label.toLowerCase();
        });
    }"><pre class="notranslate"><span class="pl-smi">GetSortedLanguages</span><span class="pl-kos">(</span><span class="pl-kos">)</span>:<span class="pl-smi">IFacetLangDetectedCommonServiceLanguageObject</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-kos">{</span>
        <span class="pl-c">// We have to sort by translated languages!</span>
        <span class="pl-c1">return</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-s1">sortBy</span><span class="pl-kos">(</span><span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">facetOptions</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">item</span>:<span class="pl-smi">string</span><span class="pl-kos">)</span>:<span class="pl-smi">any</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-kos">{</span>
                <span class="pl-c1">key</span>: <span class="pl-s1">item</span><span class="pl-kos">,</span>
                <span class="pl-c1">label</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'FACET_langDetected_'</span> <span class="pl-c1">+</span> <span class="pl-s1">item</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                <span class="pl-c1">cssStyle</span>: <span class="pl-kos">(</span><span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'english'</span><span class="pl-kos">,</span> <span class="pl-s">'catalan'</span><span class="pl-kos">,</span> <span class="pl-s">'spanish'</span><span class="pl-kos">,</span> <span class="pl-s">'french'</span><span class="pl-kos">,</span> <span class="pl-s">'italian'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">item</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
                    ? <span class="pl-kos">{</span><span class="pl-s">'font-weight'</span>: <span class="pl-s">'bold'</span><span class="pl-kos">}</span> : <span class="pl-c1">null</span><span class="pl-kos">,</span>
                <span class="pl-c1">flag</span>: <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">lutFlags</span><span class="pl-kos">,</span> <span class="pl-s1">item</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">)</span>
            <span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-c1"></span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">item</span><span class="pl-kos">)</span>:<span class="pl-smi">string</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-s1">item</span><span class="pl-kos">.</span><span class="pl-c1">label</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Export raw data to CSV or Excel with translated values:</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="getDataExportStacked(inputData:any):any {
        let exportData = angular.copy(inputData);

        if (angular.isArray(exportData) &amp;&amp; exportData.length) {
            exportData[0].name = this.$translate.instant('CLIPPINGS__CHARTS_volume_TITLE');

            exportData[0].data = _.map(exportData[0].data, (inputDataItem:any):any =&gt; {
                return {
                    'label': inputDataItem.association.profileName,
                    'value': inputDataItem.value
                };
            });
        }

        return exportData;
    }"><pre class="notranslate"><span class="pl-en">getDataExportStacked</span><span class="pl-kos">(</span><span class="pl-s1">inputData</span>:any<span class="pl-kos">)</span>:any <span class="pl-kos">{</span>
        <span class="pl-k">let</span> <span class="pl-s1">exportData</span> <span class="pl-c1">=</span> <span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">copy</span><span class="pl-kos">(</span><span class="pl-s1">inputData</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">isArray</span><span class="pl-kos">(</span><span class="pl-s1">exportData</span><span class="pl-kos">)</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">exportData</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">exportData</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'CLIPPINGS__CHARTS_volume_TITLE'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-s1">exportData</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">data</span> <span class="pl-c1">=</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">exportData</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">inputDataItem</span>:<span class="pl-smi">any</span><span class="pl-kos">)</span>:<span class="pl-smi">any</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-k">return</span> <span class="pl-kos">{</span>
                    <span class="pl-s">'label'</span>: <span class="pl-s1">inputDataItem</span><span class="pl-kos">.</span><span class="pl-c1">association</span><span class="pl-kos">.</span><span class="pl-c1">profileName</span><span class="pl-kos">,</span>
                    <span class="pl-s">'value'</span>: <span class="pl-s1">inputDataItem</span><span class="pl-kos">.</span><span class="pl-c1">value</span>
                <span class="pl-kos">}</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>

        <span class="pl-k">return</span> <span class="pl-s1">exportData</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Set config strings to third party plugins:</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="UpdateCalendarStrings():void {
        Highcharts.setOptions({
            lang: {
                months: [
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_January'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_February'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_March'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_April'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_May'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_June'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_July'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_August'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_September'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_October'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_November'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_December')
                ],
                shortMonths: [
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Jan'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Feb'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Mar'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Apr'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_May'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Jun'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Jul'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Aug'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Sep'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Oct'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Nov'),
                    this.$translate.instant('GLOBAL_CALENDAR_MONTH_SHORT_Dec')
                ],
                weekdays: [
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Sunday'),
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Monday'),
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Tuesday'),
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Wednesday'),
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Thursday'),
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Friday'),
                    this.$translate.instant('GLOBAL_CALENDAR_DAY_Saturday')
                ]
            }
        });
    }"><pre class="notranslate"><span class="pl-smi">UpdateCalendarStrings</span><span class="pl-kos">(</span><span class="pl-kos">)</span>:<span class="pl-k">void</span> <span class="pl-kos">{</span>
        <span class="pl-smi">Highcharts</span><span class="pl-kos">.</span><span class="pl-en">setOptions</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">lang</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">months</span>: <span class="pl-kos">[</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_January'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_February'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_March'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_April'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_May'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_June'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_July'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_August'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_September'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_October'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_November'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_December'</span><span class="pl-kos">)</span>
                <span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">shortMonths</span>: <span class="pl-kos">[</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Jan'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Feb'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Mar'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Apr'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_May'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Jun'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Jul'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Aug'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Sep'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Oct'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Nov'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_MONTH_SHORT_Dec'</span><span class="pl-kos">)</span>
                <span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-c1">weekdays</span>: <span class="pl-kos">[</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Sunday'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Monday'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Tuesday'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Wednesday'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Thursday'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Friday'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$translate</span><span class="pl-kos">.</span><span class="pl-en">instant</span><span class="pl-kos">(</span><span class="pl-s">'GLOBAL_CALENDAR_DAY_Saturday'</span><span class="pl-kos">)</span>
                <span class="pl-kos">]</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
</details>
**What is the motivation / use case for changing the behavior?**
Be able to translate strings outside templates.
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.6</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [TypeScript 2.0.2 | ES5 | SystemJS]</li>
</ul>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vicb/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vicb">@vicb</a></p>