Proposal: Carousel usage

usage-2.html

  <carousel [data]="items">
    <carousel-thumbs></carousel-thumbs>
   
    <div *carouselItem="let item">
      <img src="item.src">
    </div>
    <div *carouselThumb="let item">
      <img src="item.thumb">
    </div>
  </carousel>

<!-- 👎 Cannot add items individually, must have a custom for loop  -->
<!-- 👎 No type checking / autocompletion  -->
<!-- 👍 items object is passed using an input -->
<!-- 👍 No need for ng-container  -->

usage-3.html

  <carousel>
    <carousel-thumbs></carousel-thumbs>

    <ng-container *carouselFor="let item of items">
      <div carouselItem>
        <img src="item.src">
      </div>
      <div carouselThumb>
        <img src="item.thumb">
      </div>
    </ng-container>
  </carousel>

<!-- 👎 Cannot add items individually, must have a custom for loop  -->
<!-- 👍 Type checking / autocompletion can be accomplished -->
<!-- 👎 Has to be used on ng-container if thumb template needed -->
<!-- 👍 items object is passed using an input -->

usage.html

  <carousel>
    <carousel-thumbs></carousel-thumbs>
   
    <ng-container *ngFor="let item of items">
      <div *carouselItem>
        <img src="item.src">
      </div>
      <div *carouselThumb>
        <img src="item.thumb">
      </div>
    </ng-container>
  </carousel>

<!-- 👍 Can add items individually without ngFor -->
<!-- 👍 Type checking / autocompletion is available -->
<!-- 👎 Traditional ngFor -->
<!-- 👎 Must to be used on ng-container -->
<!-- ❔ Use ContentChildren stream to project items  -->