i18n components with multiple instances

pagination-control.component.html

<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>