@Directive({
selector: '.carousel-item'
})
export class CarouselItemElement {
}
@Component({
selector: 'carousel',
template: `
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
`,
styles: [`...`]
})
export class CarouselComponent implements AfterViewInit {
@ContentChildren(CarouselItemDirective) items : QueryList<CarouselItemDirective>;
@ViewChildren(CarouselItemElement, { read: ElementRef }) private itemsElements : QueryList<ElementRef>;
carouselWrapperStyle = {}
ngAfterViewInit() {
this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
this.carouselWrapperStyle = {
width: `${this.itemWidth}px`
}
}
}