Custom pagination boundary and directional link text

In the pagination component I would like to use the words, First, Previous, Next and Last as the boundary and directional link text. However, I am unable to find any settings related to changing the shown text on these links.

When looking at the component template I see:

<a aria-label="First" class="page-link" href>
    <span aria-hidden="true">&laquo;</span>
    <span class="sr-only">First</span>
</a>

And I notice an .sr-only class is on the text I want shown. As a work around I can handle this in css, but I am unable to remove the .sr-only class from the element which makes the generated html unclear.

In the previous pagination component in bootstrap-ui (for angular 1.x) we were given settings to customize the boundary and directional link texts.

  • first-text
  • last-text
  • next-text
  • previous-text

Could we get these settings added or am I missing something and there is a better work around?

angular: 2.0.1
ng-bootstrap: 1.0.0-alpha.7
bootstrap: 4.0.0-alpha.4

3 thoughts on “Custom pagination boundary and directional link text

  1. Just to add another use-case; I want to add custom icons/html instead using SVG icons which go with a design we received:

    <i class="icon icon-left-triangle" inlineSVG="left-triangle.svg"></i>

    And I imagine it likely that people will want to add font icons there:

    <i class="fa fa-chevron-left"></i>