I am developing a component that accepts other components and displays them.
Here the code of the component ts:
import { NgComponentOutlet, NgFor } from '@angular/common';
import { Component, Input } from '@angular/core';
import {MatGridListModule} from '@angular/material/grid-list'
import { MatGrid } from '../../models/MatGrid';
@Component({
selector: 'app-custom-grid',
standalone: true,
imports: [MatGridListModule, NgFor, NgComponentOutlet],
templateUrl: './custom-grid.component.html',
styleUrl: './custom-grid.component.scss'
})
export class CustomGridComponent {
@Input() grid!: MatGrid;
}
Here the code of the component html:
<mat-grid-list [cols]="grid.cols" [rowHeight]="grid.rowHeight" [gutterSize]="grid.gutterSize">
@for (cell of grid.cells; track cell) {
<mat-grid-tile
[colspan]="cell.cols"
[rowspan]="cell.rows"
[style.background]="cell.color">
<ng-container *ngComponentOutlet="cell.component"></ng-container>
</mat-grid-tile>
}
</mat-grid-list>
Unfortunately, in the console I get this error:
main.ts:5 ERROR Error: ASSERTION ERROR: It looks like Component factory was provided as the first argument and an options object as the second argument. This combination of arguments is incompatible. You can either change the first argument to provide Component type or change the second argument to be a number (representing an index at which to insert the new component's host view into this container) [Expected=> true == false <=Actual]
at throwError2 (core.mjs:393:11)
at assertEqual (core.mjs:344:9)
at ViewContainerRef2.createComponent (core.mjs:19934:17)
at _NgComponentOutlet.ngOnChanges (common.mjs:3093:53)
at _NgComponentOutlet.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:2510:14)
at callHookInternal (core.mjs:3544:14)
at callHook (core.mjs:3575:9)
at callHooks (core.mjs:3526:17)
at executeInitAndCheckHooks (core.mjs:3476:9)
at refreshView (core.mjs:13416:21)
I'm confused about the behaviour of ngComponentOutlet. I've looked the docs (https://angular.io/api/common/NgComponentOutlet#a-simple-example) but I don't get it. Any help understanding the error and printing my component would be appreciated.
I've tried to look at the docs but the error says nothing to me.