карусель по одному с использованием Typescript (Angular8)

Question

Я нашел решение по этой ссылке Карусель включена на один , но я не могу работать с кодом jquery, даже если у меня установлен JQuery в моем примере проекта: const next = jQuery(this).next();

Мне нужно преобразовать код JQuery в ссылке на библиотеку jQuery Angular или сделать то же самое с использованием Typescript, но при каком методе ловушек жизненного цикла в angular следует добавить его (OnInit, AfterViewInit, ...)

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

спасибо

 <div class="row">
              <div class="col-md-1" *ngIf="val">
                <span class="dot">
                  <button type="button" (click)="openModal1()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal 1</label>

                </span>
              </div>
              <div class="col-md-1" *ngIf="val === 'label 1'">
                <span class="dot">
                  <button type="button" (click)="openModalL1()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal L1</label>

                </span>
              </div>
               <div class="col-md-1" *ngIf="val === 'label 1'">
                <span class="dot">
                  <button type="button" (click)="openModalL1()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal L1</label>

                </span>
              </div>
               <div class="col-md-1">
                <span class="dot">
                  <button type="button" (click)="openModal()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal</label>

                </span>
              </div>
               <div class="col-md-1">
                <span class="dot">
                  <button type="button" (click)="openModal()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal</label>

                </span>
              </div>
               <div class="col-md-1">
                <span class="dot">
                  <button type="button" (click)="openModal()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal</label>

                </span>
              </div>
               <div class="col-md-1">
                <span class="dot">
                  <button type="button" (click)="openModal()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal</label>

                </span>
              </div>
               <div class="col-md-1">
                <span class="dot">
                  <button type="button" (click)="openModal()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal</label>

                </span>
              </div> <div class="col-md-1" *ngIf="number === 3">
                <span class="dot">
                  <button type="button" (click)="openModalN3()" class="btn btn-default btn-circle btn-xl "><i
                      class="fa fa-history "></i></button>
                  <label class="carousel-label"> Modal N3</label>

                </span>
              </div>

 </div>

Answer 1

Попробуйте создать структурную директиву в угловых для каруселей. Карусели на самом деле типичный пример для них. В сети много хитов, попробуйте это например:

https://netbasal.com/understanding-angular-structural-directives-659acd0f67e