I'm trying to render some components in a <mat-tab-group> from an array of components. This way:

TS

...
steps = [
    {label: "Step 1", content: [Step1Component]},
    {label: "Step 2", content: [Step2Component]},
    {label: "Step 3", content: [Step3_1Component, Step3_2Component]},
    {label: "Step 4", content: [Step4Component]},
]
...

HTML

...
<mat-tab-group>
    <div *ngFor="let step of steps;">
        <mat-tab label="{{step.label}}">
            <div *ngFor="let component of step.content;">
                <ng-container *ngComponentOutlet="component"></ng-container>
            </div>
        </mat-tab>
    </div>
</mat-tab-group>
...

All works fine, but one of my components now needs to have an MatDialog, so that component looks like this:

TS

...
@Component({
    selector: 'app-step2',
    templateUrl: './step2.component.html',
      : ['./step2.component.scss']
})
export class Step2Component implements OnInit {
    constructor(public dialog: MatDialog) { }
}
...

So I've noticed that when component's constructor has an argument (on this example, public dialog: MatDialog), my application stops working with this error:

Error: src/app/pages/home/home.component.html:40:85 - error TS2322: Type '(typeof Step1Component)[] | (typeof Step2Component)[]' is not assignable to type '((typeof Step1Component)[] & NgIterable<typeof Step1Component>) | null | undefined'.

Can someone help me fixing this? I can't find any viable solution to this.

Thanks!