Owl-Carousel does not load with dynamic angular array

Question

Guys I have a serious problem and I’ve tried everything to solve and so far nothing!

I have a CMS for my site, the site has several plugins, I created an array with the images, texts, and I called on the site with *ngFor, it worked perfectly, but it was static. Dai I made an HTTP request for my CMS and mounted the arrays, so far so good, the array was mounted just like the other one, but the JS does not work, the banner stopped working, the Owl-Carousel also does not work, nothing... no JS function works...

I really need help please!! follows below an example of code..

VIEW

getItensHome() {
    // /************
    // HEADER GERAL
    // *************/
    let headerConfig = {
      stsValue: "A",
      deleteValue: "N"
    }

    // /************
    // GET DEPOIMENTOS
    // *************/
    return this.HttpService.JSON_GET(`https://innsere-rest.herokuapp.com/api/mysql/data/depoimentos/nomePessoa/asc/*/id,hashID,sts,nomePessoa,depoimento/*`, headerConfig)
      .then(
        (res) => {
          this.arDepoimentos = res.json().data;
          console.log(this.arDepoimentos);

        },
        (error) => {
          console.log(error);
        })
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<owl-carousel [options]="{items: 1, dots: false, nav: true, margin: 120, loop: true}" [carouselClasses]="['owl-theme', 'row', 'sliding']">
  <div class="item" owl-carousel-item *ngFor="let depoimento of arDepoimentos">
    <p class="description">
      “{{ depoimento.depoimento }}”
    </p>
    <h2 class="nome-pessoa text-right">
      - {{ depoimento.nomePessoa }}
    </h2>
  </div>
</owl-carousel>