Passing Angular component to another one-CodePudding

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 >
  <ul >
     <li ngFor="let slideHtml of SlidesHTML?" >
       **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.

CodePudding user response：

Yes you can

<li *ngFor="let slide of slides" >
    <!-- 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.