Passing property to components inside ng-content (properties which aren't available in the component where the markup lies)

Viewed 3085

I am trying to develop a carousel.

The desired end result should be that the developer would simply write the entire markup in one place (let's say in app.component.html) with only an options property and then, the carousel would take over.

Problem is that from carousel.component I need to set some properties on carousel-item.component (properties that app.component should have nothing to do with... but all the markup is in app.component.html).

How can I achieve this?

app.component.html:

<carousel [options]="myOptions">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

<hr />

<carousel [options]="myOptions2">
    <carousel-item *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </carousel-item>
</carousel>

carousel.component.html:

<div class="carousel-stage">
    <ng-content></ng-content>
</div>

carousel-item.component.html:

<ng-content></ng-content>
1 Answers
Related