I know this has been asked before but I don't understand those answer to be honest. I want to make something simple:
Basically I have this:
<div class="carousel">
<ul class="carousel__track">
<li ngFor="let slideHtml of SlidesHTML?" class="carousel__slide">
**THIS IS ACTUALLY WHERE I WANT TO PASS ANOTHER HTML COMPONENT**
i.e: <app-slideHtml>
</li>
</ul>
</div>
I want to achieve that basically, but I don't know if I can go with @Input() html or if I need to use ng-content for that. What do I need to put in the .ts file?
Edit: I'm using ngFor directive in the li element, so I can display actually all the slides. I don't know if that's even possible, I just wanted to see If I can actually achieve that.
Yes you can
<li *ngFor="let slide of slides" class="carousel__slide">
<!-- Rename inputName by the actual input name you want-->
<app-slideHtml [inputName]="slide.someData"></app-slideHtml>
</li>
Where inputName is the name of the @Input in app-slideHtml and someData an attribute of slide.
In app-slideHtml.component.ts
@Input() inputName: any; // Rename 'inputName' by the actual input name you want
You can pass the whole object instead of some attributes by passing slide to the input.