How to change position of arrows of Carousel using in Angular/ng-bootstrap?

Question

I was able to change the colors of my navigation arrows using encapsulation: ViewEncapsulation.None and changing CSS styles of carousel-control-next-icon.

I did this with help of other answers at StackOverflow.

But, I did not find any answers here on how to change the positioning of the navigation arrows of my Carosel.

I have my main card with my carousel, and I just want to put my navigation arrows outside my carousel, outside ng-template...

This is my current template:

        <!-- This card will contain a carosel / O meu card vai ter um carrocel. -->
        <div class="card rounded-3 whyus-carrocel bg-transparent bg-dark-subtle d-flex align-items-center">

          <!-- The carosel itself / O carrocel em si. - Usa 100% da altura do card -->
          <!-- Hidden Classes: carousel, slide. -->
          <!--suppress AngularUndefinedBinding -->
          <ngb-carousel *ngIf="cards.length > 0" class="bg-white shadow" [showNavigationIndicators]="false">
            <!-- Layer/Camada 1: Role "Tablist". Classe: carousel-indicators. É o Navigation Indicators -->

            <!-- Layer/Camada 2: Wrapper for slides, carousel-inner. -->
            <ng-template ngbSlide *ngFor="let card of cards">
              <!--suppress AngularNgOptimizedImage -->
              <img [src]="card.caminhoImg" class="img-thumbnail card-img-top w-100" [alt]="card.textoAlternativo"
                   height="400" width="600">
              <div class="card-body">
                <header class="card-title h5">{{ card.cardTitulo }}</header>
                <p class="card-text">{{ card.cardDescricao }}</p>
              </div>
            </ng-template>

            <!-- Layer/Camada 3: Buttons. Carousel-control-prev e next. -->

          </ngb-carousel>

        </div>

And this is the CSS and TypeScript applied in it:

/* Styles applied with the help of dev-tools - Use it */
.whyus-carrocel {
  height: 428px;
  width: 690px;
}

/* Here I am on carousel/Dentro do carrocel: Inside/Dentro de ngb-carousel do Angular. */
.whyus-carrocel .carousel {
  height: 100%;
  width: 18rem;
}

.carousel-control-next-icon {
  background-image: none;
  background-color: rgb(13, 110, 253);
  border-radius: 50%;
}

.carousel-control-prev-icon {
  background-image: none;
  background-color: rgb(13, 110, 253);
  border-radius: 50%;
}

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-row-whyus',

  // To be able to change carosel style/Mudar estilo do carrocel.
  encapsulation: ViewEncapsulation.None,

// Etc

I tried applying something I saw at another question, that just told me to hide the buttons using navigation arrows to false, and creating a new button group outside the div, but it did'nt work.

My final result would be something like this:

< | CAROSEL | >

At the moment, it's like this:

| < CAROSEL > |

The navigation arrows are inside the carosel - Which is the default behaviour of the ng-bootstrap carousel.

I tried my best here to use my spelling correct and say what I want to achieve... Can someone help me?

Edit: In my previous attempt, I tried adding the buttons with the classes inside the ng-template, to see if the HTML tags would override the ng-template ones, but it did'nt even appear and did not do that.

Answer 1

I was able to solve this by envolving my elements inside the ng-template and give it a padding on right/left side, like this:

          <!-- The carosel itself / O carrocel em si. - Usa 100% da altura do card -->
          <!-- Hidden Classes: carousel, slide. -->
          <!--suppress AngularUndefinedBinding -->
          <ngb-carousel *ngIf="cards.length > 0" [showNavigationIndicators]="false" class="shadow">
            <!-- Layer/Camada 1: Role "Tablist". Classe: carousel-indicators. É o Navigation Indicators -->

            <!-- Layer/Camada 2: Wrapper for slides, carousel-inner - Não aplicar classes aqui. -->
            <ng-template ngbSlide *ngFor="let card of cards">

              <!-- Container para envolver o card com os botões -->
              <div class="px-5">

                <!--suppress AngularNgOptimizedImage -->
                <img [src]="card.caminhoImg" class="img-thumbnail card-img-top" [alt]="card.textoAlternativo"
                     height="400" width="600">
                <div class="card-body">
                  <header class="card-title h5">{{ card.cardTitulo }}</header>
                  <p class="card-text">{{ card.cardDescricao }}</p>
                </div>

              </div>

            </ng-template>

            <!-- Layer/Camada 3: Buttons. Carousel-control-prev e next. -->
          </ngb-carousel>

Se the line <div class="px-5">

This is what it reproduced: