I have designed a skills section that includes a name and corresponding image. Now, I would like to pass the skill's name into a child component. My goal is to display three of these skills on the same row, but using ngFor currently results in each skill being placed on its own row.
app.component.html
<div style="text-align:center">
<h1 class="ui block header">
Welcome to {{title}} WebApp!
</h1>
</div>
<app-skills *ngFor="let listOfSkills of skillList" [skill]="listOfSkills"></app-skills>
skills.component.html
<div class="col-md-4">
<h1>{{skill.name}}</h1>
<img src="assets/img/{{skill.name}}.jpg" alt="{{skill.name}} Badge" height="200" width="200">
<button class="btn btn-success" (click)="showHide = !showHide">Show {{skill.name}} Stages</button>
<app-stages *ngIf="showHide" [skill]="[skill.name]"></app-stages>
</div>