Skip to content

Instantly share code, notes, and snippets.

@gregbown
Created September 27, 2017 16:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gregbown/e9cc3b1cc03808bb4d221a01c420020b to your computer and use it in GitHub Desktop.
Save gregbown/e9cc3b1cc03808bb4d221a01c420020b to your computer and use it in GitHub Desktop.
i18n components with multiple instances
<div class="form-group row-select">
<label for="rowDropdownMenu" i18n="the title for pagination results@@controlPaginationResults">Results per page</label>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="rowDropdownMenu" ngbDropdownToggle>{{rows.current.text}}</button>
<div class="dropdown-menu" aria-labelledby="rowDropdownMenu">
<ng-template ngFor let-option [ngForOf]="rows.options | displays">
<button
class="dropdown-item"
value="{{option.value}}"
(click)="changed.emit({value:option.value, bubbles: true})">{{option.text}}</button>
</ng-template>
</div>
</div>
</div>
<div class="form-group page-select row">
<a class="page-nav first" [ngClass]="{disabled: (pages.current === 1)}" (click)="firstEvent()"></a>
<a class="page-nav prev" [ngClass]="{disabled: (pages.current === 1)}" (click)="prevEvent()" i18n="the title for pagination previous@@controlPaginationPrev">Prev</a>
<input
min="1"
type="number"
class="page-nav goto"
value="{{pages.current}}"
[disabled]="(pages.total < 2)? true:null"
(keyup)="pageInput$.next($event.target.value)">
<span class="total">of {{pages.total}}</span>
<a class="page-nav next" [ngClass]="{disabled: (pages.total === pages.current)}" (click)="nextEvent()" i18n="the title for pagination next@@controlPaginationNext">Next</a>
<a class="page-nav last" [ngClass]="{disabled: (pages.total === pages.current)}" (click)="lastEvent()"></a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment