Custom pagination boundary and directional link text

[forrestab]

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

[pkozlowski-opensource]

@forrestab we don't support customization of text / markup displayed on boundary links, although it is on our roadmap (not the high priority atm, though).

Regarding elements with the sr-only class - those are meant to be used by screen readers so you definitively don't want to remove / alter them if you care about accessibility (and as any web developer, you should).

[forrestab]

@pkozlowski-opensource glad its on the roadmap, however, I believed you may have jumped to a conclusion about me and my sr-only work around comment. As a developer I do care about accessibility.

My work around proposal is simply to show what the sr-only class is hiding and hide the arrows. I would prefer to show actual words instead of leaving it up to a user to determine what an icon does. This should not effect screen readers or accessibility. (I of course would not break the sr-only class for all of bootstrap, just the pagination component)

Do you or anyone else see an issue with this work around?

[wesleycho]

@pkozlowski-opensource maybe it would be worth using slots with ng-content here to allow custom content. This would have low overhead to implement I think, and allow full customization without having to add a binding.

[intellix]

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>

[maxpark-jd]

Since last November: alex7olaru@f7ca921
Will this ever be merged?

[khdevnet]

You can put any text in directional links with css add something like css below
a[aria-label] { span { display: none; } &:after { content: attr(aria-label); } }

instead attr(area-label) add text what you want, and also add css rules :nth-child() to specify specific element

[michaeljota]

I'm requiring this, and I think I figure a nice way to implement this:

Currently, the anchors are being created hard wired:

      <li *ngIf="directionLinks" class="page-item"
        [class.disabled]="!hasPrevious() || disabled">
        <a aria-label="Previous" i18n-aria-label="@@ngb.pagination.previous-aria" class="page-link" href
          (click)="selectPage(page-1); $event.preventDefault()" [attr.tabindex]="(hasPrevious() ? null : '-1')">
          <span aria-hidden="true" i18n="@@ngb.pagination.previous">&laquo;</span>
        </a>
      </li>

As it was said, the best way to do this properly is to do it by content projection. However, there is not currently a way to be able to react if the content is empty. However, it has been requested and in the issue you can find some interesting workarounds.

Like this one:

<div class="my-custom-component-content-wrapper">
    <ng-content select="my-custom-component"></ng-content>
</div>
<my-custom-component>
    This shows something default.
</my-custom-component>

.my-custom-component-content-wrapper:not(:empty) + my-custom-component {
    display: none;
}

So, this could be applied to pagination.

<li
  *ngIf="directionLinks"
  class="page-item"
  [class.disabled]="!hasPrevious() || disabled"
>
  <a
    aria-label="Previous"
    i18n-aria-label="@@ngb.pagination.previous-aria"
    class="page-link"
    href
    (click)="selectPage(page - 1); $event.preventDefault()"
    [attr.tabindex]="hasPrevious() ? null : '-1'"
  >
    <span class="page-anchor"><ng-content select="previous"></ng-content></span>
    <span aria-hidden="true" i18n="@@ngb.pagination.previous">&laquo;</span>
  </a>
</li>

  .page-anchor:emtpy {
    display: none;
  }
  .page-anchor:not(:empty) + span[aria-hidden="true"] {
    display: none;
  }

And could be used, like this:

<ngb-pagination>
  <span previous>Prev</span>
</ngb-pagination>

This wouldn't break any existent code, and would allow the usage of custom templates for the icon, including, the usage of FontAwesome's fa-icon component.

[ryanbowden]

Any update of this happening? We really need this for our project.

[varnastadeus]

this can be achieved partially by using css and custom fonts, eg.:

ngb-pagination li {
    &:first-child a {
        span {
            display: none;
        }
        &:before {
            content: "\F141";
            font: normal normal normal 24px/1 "Material Design Icons";
        }
    }
}

this will override first link with chevron from Material Design Icons.

[ryanbowden]

Well we want the words Next and Previous and that css fix does not really work for translations either.

[maxokorokov]

Could the interested people please take a look at #2971 and check if there are use case that won't be covered by this approach?

[michaeljota]

@maxokorokov Thanks! I would have to try it, but seems that it covers all the expected scenarios.

[p-maron]

Based on varnastadeus's comment, the following worked for me to change the pagination links to words. Thanks @varnastadeus.

::ng-deep ngb-pagination ul > li {
&:first-child a {
span {
display: none;
}
&:before {
content: "Previous";
font-size: 13px;
font-weight: 600;
}
}
&:last-child a {
span {
display: none;
}
&:before {
content: "Next";
font-size: 13px;
font-weight: 600;
}
}
}

[mendeza]

@p-maron, if you ever need to localize this site/app to a non-English language, this solution might need reconsideration.

[p-maron]

@mendeza Oh, do you mean because of the hard coded content entries?

[mendeza]

Yes

[p-maron]

Any suggestions?

[mendeza]

Well, isn't this a moot point as of 4.1.0? See "Using Templates."

[kcsattiraju]

I want to remove the directional link if it a first page or a last page since the UX design thinks that it is quiet confusing . I am struggling with the code . Any suggestions?