feat(carousel-indicators): allow custom content via TemplateId directive, refactor

Author: xidedix

projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.html

@@ -1,4 +1,7 @@
-<div class="carousel-indicators">
+@let tmpl = templates();
+<ng-container *ngTemplateOutlet="tmpl['carouselIndicatorsTemplate'] || defaultCarouselIndicatorsTemplate; context: {$implicit: items, active: active}" />
+
+<ng-template #defaultCarouselIndicatorsTemplate>
   @for (item of items; track item; let i = $index) {
     <button
       [attr.data-coreui-target]="i"
@@ -8,4 +11,4 @@
       [attr.aria-current]="active === i">
     </button>
   }
-</div>
+</ng-template>

projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts

@@ -1,12 +1,17 @@
-import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { Component, computed, contentChildren, DestroyRef, inject, OnInit, TemplateRef } from '@angular/core';
 
 import { CarouselState } from '../carousel-state';
 import { CarouselService } from '../carousel.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
+import { TemplateIdDirective } from '../../shared';
 
 @Component({
   selector: 'c-carousel-indicators',
-  templateUrl: './carousel-indicators.component.html'
+  exportAs: 'cCarouselIndicators',
+  imports: [NgTemplateOutlet],
+  templateUrl: './carousel-indicators.component.html',
+  host: { class: 'carousel-indicators' }
 })
 export class CarouselIndicatorsComponent implements OnInit {
   readonly #destroyRef = inject(DestroyRef);
@@ -16,6 +21,18 @@ export class CarouselIndicatorsComponent implements OnInit {
   items: (number | undefined)[] = [];
   active = 0;
 
+  readonly contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
+
+  readonly templates = computed(() => {
+    return this.contentTemplates().reduce(
+      (acc, child) => {
+        acc[child.id] = child.templateRef;
+        return acc;
+      },
+      {} as Record<string, TemplateRef<any>>
+    );
+  });
+
   ngOnInit(): void {
     this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextIndex) => {
       this.items = this.#carouselState?.state?.items?.map((item) => item.index) ?? [];