'Passing Angular component to another one

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.

javascripthtmlangulartypescript


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sebastien Servouze

Related Questions