Remove slide number text from top of ng carousal

I am using this carousal from ng-bootstrap :

<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="assets\fsfhjllz_vegetables-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit:cover;">
      </div>
    </ng-template>
  
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="assets\vh9oeys6_fruit-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit: cover;">
      </div>
    </ng-template>
</ngb-carousel>

And it shows this text on top of image like:: slide 1 of 2 .

How do I remove this text and only show image. It is showing up as this when inspected in browser::

<div role="tabpanel" class="carousel-item" id="slide-ngb-slide-1">
<span class="sr-only"> Slide 2 of 2 </span>                      // this one

Here is the source code of this peace:

<span class="sr-only" i18n="Currently selected slide number read by screen reader@@ngb.carousel.slide-number">
  Slide {{i + 1}} of {{c}}
</span>

I see 2 possibilities to hide this text:

1. add the CSS to hide .carousel-inner .sr-only to hide this element, eg

.carousel-inner .sr-only {
   display: none;
}

2. set the value of the translation key ngb.carousel.slide-number to an empty string. Guidelines on internatiolization.