Repeat child component defined html inside a ForOf loop of a parent component using ng content

Question

I am trying to repeat ng-content inside a loop like following:

@Component({
  selector: 'app-card',
  template: `
     <div *ngFor="let x of [1,2,3,4,5,6]">
       {{x}} <ng-content></ng-content>
     </div>
`
})

I am calling that component inside something like following:

@Component({
  selector: 'app-card-with-options',
  template: `
     <app-product>
       <input type="submit" min="1">
     </app-product>
`
})

And the result shows only onc input button, where I expected it to return 6. Why does it not show 6?