Proposal usage design poll

[MurhafSousli]

For next release (v9), I am refactoring the current usage by adding a new carousel module which can be imported from ng-gallery/next

The focus will be on providing more components and control over the carousel parts and templates while keeping it simple as possible.

I would like to get some feedback regarding the two options below, think in term of flexibility, extendibility and simplicity, how do you compare the two options below? are there pros and cons?

Option 1

Use a for loop and two different directives to set main item and its thumbnail

Similar to Angular CDK Virtual Scroll component

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

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

Option 2

Use a data source input and a single directive to set main item and its thumbnail

Similar to Angular Material Table component

<carousel [dataSource]="items">
  <div *carouselItemDef="let item">
    <img [src]="item.src">
  </div>
  
  <carousel-thumbs>
    <div *carouselItemDef="let item">
      <img [src]="item.thumb">
    </div>
  </carousel-thumbs>
</carousel>

[MurhafSousli]

My personal take on it:

	Pros	Cons
Option 1	Traditional loop everyone is familiar with and can be modified	Need to have two different directives for carouselItem and carouselThumb and both of them has to be defined in the same ngFor
Option 2	Looks more elegant and uses a single item directive	The item object in the template has no interface and no control over the loop