I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example:
const next = jQuery(this).next();I am looking to convert the JQuery code from the link to Angular's jQuery library or achieve the same outcome using Typescript. Which method of the lifecycle hooks in Angular should I implement it in (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));
}
});
Thank you
<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>