I need to pass data from array in parent component to child component and for every element in array create child component with passing data in it.

That’s my parent component:

@Component({
  selector: 'app-profile-card',
  standalone: true,
  imports: [
    SkillTagComponent
  ],
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.scss'
})
export class ProfileCardComponent {
  skillTypes: string[] = ['angular', 'JS', 'CSS', 'HTML']
}

Parent component template part where i try to loop and pass the data:

<div class="profile-card__tags">
    <app-skill-tag *ngFor="let skill of skillTypes"
        [skillType]="skill"></app-skill-tag>
</div>

Child component:

@Component({
  selector: 'app-skill-tag',
  standalone: true,
  imports: [
    CommonModule,
  ],
  templateUrl: './skill-tag.component.html',
  styleUrl: './skill-tag.component.scss',
})
export class SkillTagComponent {
  @Input() skillType: string = ''
}

Child component template:

<div class="skill-tag">
    {{skillType}}
</div>

So i am trying to loop through skillTypes and for every skill in it create app-skill-tag component and pass data from skill variable to app-skill-tag, but that doesn’t work.