The "No provider for NestedOptionHost" error occurs when using DxDataGrid in a custom Angular component

devexteme version: 16.2.6
devextreme-angular version: 16.2.6

[x] bug

I am trying to create a new data-grid component wrapping dx-data-grid, so that I can set default options for data-grid by default so that other developers will use that.

Something like below

my-data-table.html

<dx-data-grid #myGrid [dataSource]="dataSource">
<ng-content select-"dxi-column"></ng-content>
</dx-data-grid>

---

my-data-table.ts

@Component({
selector: 'app-my-data-table',
templateUrl: './my-data-table.html',
styleUrls: ['./my-data-table.less']
})
export class MyDataTableComponent {

@ViewChild('myGrid') myGrid: DxDataGridComponent;
@Input() dataSource: any;
} 

---

and in my test component using it as below

<app-my-data-table [dataSource]="expenseClaims">
<dxi-column dataField="Title" caption="Title"></dxi-column>
</app-my-data-table> 

but when I compile the code and open the page I get this error in console

Error: Template parse errors: No provider for NestedOptionHost ("le [dataSource]="expenseClaims" > [ERROR ->]<dxi-column dataField="Title" caption="Title"></dxi-column>

Also I imported NestedOptionHost, DxiColumnComponent in my module imports, still same issue

[artem-kurchenko]

Hi,   We don’t officially support extending our components and wouldn’t recommend doing this because the internal API may be changed after any release without any warning. So, you will be fully responsible for all issues (if there are any) and will likely need to constantly make some additional work after we do some changes in our widgets or integration package.   If you’re still going to extend our components, I recommend you refer to the node_modules/devextreme-angular/ui folder to see our source code and investigate how it works.   If your task is simply to define some default options at the widget level, you can use a public API for this. Please take a look at the following How to set default options for dxDataGrid in an Angular app ticket

[mikerentmeister]

@eliseurm

https://stackblitz.com/edit/angular-11-dev-express-grid-wrapper-khtmsu?file=src/app/table/table.component.html

My company decided to move to IgniteUi a few months ago for various reasons. I have put our code for the wrapper in this example (but didn’t update the dependencies in the package.json). This code works for us Angular 13.1.2 with DevExtreme 21.2.3, while we work on converting our code base to the new library. I cannot guarantee that it will work in StackBlitz, because I know StackBlitz has had some issues with Agnular 13, and DevExtreme is not ivy supported yet. Good luck.

Please also note that now my table.component now uses OnPush change detection, wheras in previous samples it did not,