src/app/app.component.html
<!-- MAIN HEADER -->
<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1 class="lead">Chomsky-NG2 Documentation</h1>
<p>A lightweight Angular 2 i18n wrapper.</p>
<nav>
<a href="//github.com/bullhorn/chomsky-ng2" target="_blank" class="btn btn-sm btn-primary">
<i class="fa fa-github"></i> View on Github</a>
<a href="//github.com/bullhorn/chomsky-ng2/zipball/master" class="btn btn-sm btn-default">
<i class="fa fa-download"></i> Download</a>
</nav>
</div>
</div>
</div>
</section>
<div class="container">
<!-- CHOOSE LANGUAGE -->
<div data-spy="affix">
<div class="btn-group-vertical">
<ul class="nav nav-pills nav-stacked">
<li (click)="changeLanguage(usLocale)" [class.active]="currentLocale === usLocale" role="presentation">
<a>English</a>
</li>
<li (click)="changeLanguage(ruLocale)" [class.active]="currentLocale === ruLocale" role="presentation">
<a>Russian</a>
</li>
<li (click)="changeLanguage(frLocale)" [class.active]="currentLocale === frLocale" role="presentation">
<a>French</a>
</li>
</ul>
</div>
</div>
<!-- GETTING STARTED -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Installation</h2>
<pre>NPM: npm install chomsky-ng2 --save OR YARN: yarn add chomsky-ng2</pre>
<h2 class="text-center">Configuration</h2>
<code>// TODO: </code>
<div class="divider"></div>
</div>
</section>
<!-- SIMPLE TRANSLATION -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Simple Translation</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/{{ currentLocale }}.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "greeting": {{ translateService.dictionaryManager.dictionaries[currentLocale].greeting | json }} {{ '}' }} </pre>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'greeting' | translate</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'greeting' | translate }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'greeting'"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'greeting'"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('greeting');</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'greeting'"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH VARIABLE -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Variables</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/{{ currentLocale }}.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} farewell": {{ translateService.dictionaryManager.dictionaries[currentLocale].farewell | json }} {{ '}' }}</pre>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'farewell' | translate: {{ '{' }} name: 'Jane' {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'farewell' | translate: { name: 'Jane' } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'farewell'" [dynamicValues]="{{ '{' }} name: 'Jane' {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'farewell'" [dynamicValues]="{ name: 'Jane' }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('farewell', {{ '{' }} name: 'Jane' {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'farewell'" [dynamicValues]="{ name: 'Jane' }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH VARIABLE:DATE -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Date Variables</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/{{ currentLocale }}.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "today": {{ translateService.dictionaryManager.dictionaries[currentLocale].today | json }} {{ '}' }}</pre>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "formatToday": {{ translateService.dictionaryManager.dictionaries[currentLocale].formatToday | json }} {{ '}' }}</pre>
<p>
<small>Can be used with syntax from
<a href="//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank">Intl.DateTimeFormat</a>.</small>
</p>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'today' | translate: {{ '{' }} today: {{ demoVariables.today }} {{ '}' }}</pre>
<pre>'formatToday' | translate: {{ '{' }} today: {{ demoVariables.today }} {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'today' | translate: { today: demoVariables.today } }}</p>
<p>{{ 'formatToday' | translate: { today: demoVariables.today } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'today'" [dynamicValues]="{{ '{' }} today: {{ demoVariables.today }} {{ '}' }}"></p></pre>
<pre><p [translate]="'formatToday'" [dynamicValues]="{{ '{' }} today: {{ demoVariables.today }} {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'today'" [dynamicValues]="{ today: demoVariables.today }"></p>
<p [translate]="'formatToday'" [dynamicValues]="{ today: demoVariables.today }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('today', {{ '{' }} today: {{ demoVariables.today }} {{ '}' }});</pre>
<pre>let message = translationService.translate('formatToday', {{ '{' }} today: {{ demoVariables.today }} {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'today'" [dynamicValues]="{ today: demoVariables.today }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH VARIABLE:DATE -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Date Variables with Formatting</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/{{ currentLocale }}.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "long": {{ translateService.dictionaryManager.dictionaries[currentLocale].long | json }} {{ '}' }}</pre>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "timeLong": {{ translateService.dictionaryManager.dictionaries[currentLocale].timeLong | json }} {{ '}' }}</pre>
<p>
<small>Other short formats include (bold is default):</small>
<br/>
<small>
<i>short - 02/14/2017, 1:17 PM</i>
</small>
<br/>
<small>
<i>medium - Feb 14, 2017, 1:17 PM</i>
</small>
<br/>
<small>
<i>long - Febuary 14, 2017, 1:17 PM CST</i>
</small>
<br/>
<small>
<b>
<i>dateShort - 02/14/2017</i>
</b>
</small>
<br/>
<small>
<i>dateMedium - Feb 14, 2017</i>
</small>
<br/>
<small>
<i>dateLong - Febuary 14, 2017</i>
</small>
<br/>
<small>
<i>timeShort - 1:17 PM</i>
</small>
<br/>
<small>
<i>timeLong - 1:17 PM CST</i>
</small>
</p>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'long' | translate: {{ '{' }} today: {{ demoVariables.today }} {{ '}' }}</pre>
<pre>'timeLong' | translate: {{ '{' }} today: {{ demoVariables.today }} {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'long' | translate: { today: demoVariables.today } }}</p>
<p>{{ 'timeLong' | translate: { today: demoVariables.today } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'long'" [dynamicValues]="{{ '{' }} today: {{ demoVariables.today }} {{ '}' }}"></p></pre>
<pre><p [translate]="'timeLong'" [dynamicValues]="{{ '{' }} today: {{ demoVariables.today }} {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'long'" [dynamicValues]="{ today: demoVariables.today }"></p>
<p [translate]="'timeLong'" [dynamicValues]="{ today: demoVariables.today }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('long', {{ '{' }} today: {{ demoVariables.today }} {{ '}' }});</pre>
<pre>let message = translationService.translate('timeLong', {{ '{' }} today: {{ demoVariables.today }} {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'long'" [dynamicValues]="{ today: demoVariables.today }"></p>
<p [translate]="'timeLong'" [dynamicValues]="{ today: demoVariables.today }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH VARIABLE:NUMBER -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Number Variables</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/{{ currentLocale }}.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "alert": {{ translateService.dictionaryManager.dictionaries[currentLocale].alert | json }} {{ '}' }}</pre>
<p>
<small>Can be used with syntax from
<a href="//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl.NumberFormat</a>.</small>
</p>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'alert' | translate: {{ '{' }} count: {{ demoVariables.count }} {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'alert' | translate: { count: demoVariables.count } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'alert'" [dynamicValues]="{{ '{' }} count: {{ demoVariables.count }} {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'alert'" [dynamicValues]="{ count: demoVariables.count }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('alert', {{ '{' }} count: {{ demoVariables.count }} {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'alert'" [dynamicValues]="{ count: demoVariables.count }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH VARIABLE:CURRENCY -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Currency Variables</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/{{ currentLocale }}.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "debt": {{ translateService.dictionaryManager.dictionaries[currentLocale].debt | json }} {{ '}' }}</pre>
<p>
<small>Can be used with syntax from
<a href="//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl.NumberFormat</a>.</small>
</p>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'debt' | translate: {{ '{' }} balance: {{ demoVariables.balance }} {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'debt' | translate: { balance: demoVariables.balance } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'debt'" [dynamicValues]="{{ '{' }} balance: {{ demoVariables.balance }} {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'debt'" [dynamicValues]="{ balance: demoVariables.balance }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('debt', {{ '{' }} balance: {{ demoVariables.balance }} {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'debt'" [dynamicValues]="{ balance: demoVariables.balance }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH PLURALIZATION -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Pluralization</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/en-US.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "messages": {{ translateService.dictionaryManager.dictionaries[currentLocale].messages | json }} {{ '}' }}</pre>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'messages' | translate: {{ '{' }} quantity: 0 {{ '}' }}</pre>
<pre>'messages' | translate: {{ '{' }} quantity: 1 {{ '}' }}</pre>
<pre>'messages' | translate: {{ '{' }} quantity: 20 {{ '}' }}</pre>
<pre>'messages' | translate: {{ '{' }} quantity: 50 {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'messages' | translate: { quantity: 0 } }}</p>
<p>{{ 'messages' | translate: { quantity: 1 } }}</p>
<p>{{ 'messages' | translate: { quantity: 20 } }}</p>
<p>{{ 'messages' | translate: { quantity: 50 } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'messages'" [dynamicValues]="{{ '{' }} quantity: 0 {{ '}' }}"></p></pre>
<pre><p [translate]="'messages'" [dynamicValues]="{{ '{' }} quantity: 1 {{ '}' }}"></p></pre>
<pre><p [translate]="'messages'" [dynamicValues]="{{ '{' }} quantity: 20 {{ '}' }}"></p></pre>
<pre><p [translate]="'messages'" [dynamicValues]="{{ '{' }} quantity: 50 {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'messages'" [dynamicValues]="{ quantity: 0 }"></p>
<p [translate]="'messages'" [dynamicValues]="{ quantity: 1 }"></p>
<p [translate]="'messages'" [dynamicValues]="{ quantity: 20 }"></p>
<p [translate]="'messages'" [dynamicValues]="{ quantity: 50 }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('messages', {{ '{' }} quantity: 0 {{ '}' }});</pre>
<pre>let message = translationService.translate('messages', {{ '{' }} quantity: 1 {{ '}' }});</pre>
<pre>let message = translationService.translate('messages', {{ '{' }} quantity: 20 {{ '}' }});</pre>
<pre>let message = translationService.translate('messages', {{ '{' }} quantity: 50 {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'messages'" [dynamicValues]="{ quantity: 0 }"></p>
<p [translate]="'messages'" [dynamicValues]="{ quantity: 1 }"></p>
<p [translate]="'messages'" [dynamicValues]="{ quantity: 20 }"></p>
<p [translate]="'messages'" [dynamicValues]="{ quantity: 50 }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH PLURALIZATION WITH DYNAMIC LABELS -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center">Translation with Pluralization With Dynamic Labels</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/en-US.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "candidate": {{ translateService.dictionaryManager.dictionaries[currentLocale].candidate | json }} {{ '}' }}</pre>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Pipe</h4>
<!-- CODE -->
<pre>'candidate' | translate:{{ '{' }} gender: 'female', quantity: 1, host: 'Jane', candidate: 'candidate' {{ '}' }}</pre>
<pre>'candidate' | translate:{{ '{' }} gender: 'male', quantity: 0, host: 'John', candidate: 'candidates' {{ '}' }}</pre>
<pre>'candidate' | translate:{{ '{' }} gender: 'other', quantity: 15, host: 'Les gens', candidate: 'candidates' {{ '}' }}</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p>{{ 'candidate' | translate:{ gender: 'female', quantity: 1, host: 'Jane', candidate: 'candidates' } }}</p>
<p>{{ 'candidate' | translate:{ gender: 'male', quantity: 0, host: 'John', candidate: 'candidates' } }}</p>
<p>{{ 'candidate' | translate:{ gender: 'other', quantity: 0, host: 'Les gens', candidate: 'candidates' } }}</p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'candidate'" [dynamicValues]="{{ '{' }} gender: 'female', quantity: 1, host: 'Jane', candidate: 'candidate' {{ '}' }}"></p></pre>
<pre><p [translate]="'candidate'" [dynamicValues]="{{ '{' }} gender: 'male', quantity: 0, host: 'John', candidate: 'candidates' {{ '}' }}"></p></pre>
<pre><p [translate]="'candidate'" [dynamicValues]="{{ '{' }} gender: 'other', quantity: 15, host: 'Les gens', candidate: 'candidates' {{ '}' }}"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'candidate'" [dynamicValues]="{ gender: 'female', quantity: 1, host: 'Jane', candidate: 'candidates' }"></p>
<p [translate]="'candidate'" [dynamicValues]="{ gender: 'male', quantity: 0, host: 'John', candidate: 'candidates' }"></p>
<p [translate]="'candidate'" [dynamicValues]="{ gender: 'other', quantity: 0, host: 'Les gens', candidate: 'candidates' }"></p>
</div>
</div>
<div class="clearfix"> </div>
<h4>Controller</h4>
<!-- CODE -->
<pre>let message = translationService.translate('candidate', {{ '{' }} gender: 'female', quantity: 1, host: 'Jane', candidate: 'candidate' {{ '}' }});</pre>
<pre>let message = translationService.translate('candidate', {{ '{' }} gender: 'male', quantity: 0, host: 'John', candidate: 'candidates' {{ '}' }});</pre>
<pre>let message = translationService.translate('candidate', {{ '{' }} gender: 'other', quantity: 15, host: 'Les gens', candidate: 'candidates' {{ '}' }});</pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'candidate'" [dynamicValues]="{ gender: 'female', quantity: 1, host: 'Jane', candidate: 'candidates' }"></p>
<p [translate]="'candidate'" [dynamicValues]="{ gender: 'male', quantity: 0, host: 'John', candidate: 'candidates' }"></p>
<p [translate]="'candidate'" [dynamicValues]="{ gender: 'other', quantity: 0, host: 'Les gens', candidate: 'candidates' }"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- TRANSLATION WITH HTML IN VALUE -->
<section class="row">
<div class="col-xs-12">
<h2 class="text-center" style="margin-bottom: 5px">Translation with HTML in the value</h2>
<h4 class="text-center">
<b>ONLY use with the Directive</b>
</h4>
<div class="row">
<div class="col-xs-12 col-sm-4">
<h4>
<code>../i18n/en-US.json</code>
</h4>
<pre *ngIf="translateService.dictionaryManager.dictionaries[currentLocale]">{{ '{' }} "html": {{ translateService.dictionaryManager.dictionaries[currentLocale].html | json }} {{ '}' }}</pre>
</div>
<div class="col-xs-12 col-sm-8">
<h4>Directive</h4>
<!-- CODE -->
<pre><p [translate]="'html'"></p></pre>
<!-- DEMO -->
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
<p [translate]="'html'"></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
</div>