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

[RezaRahmati]

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

[alexzuza]

Here is an idea https://plnkr.co/edit/PF84xdL6rnQEmmlKirox?p=preview

[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

[RezaRahmati]

@artem-kurchenko @alexzuza Hey, thanks so much for help, this what I was looking for, yes I undrestand the risk

[mikerentmeister]

For anyone coming here in the future, I have successfully created a wrapper around the dx-data-grid. A working example for Angular v 8.x can be found here:

https://stackblitz.com/edit/dev-express-grid-wrapper

[sadra74]

For anyone coming here in the future, I have successfully created a wrapper around the dx-data-grid. A working example for Angular v 8.x can be found here:

https://stackblitz.com/edit/dev-express-grid-wrapper

were you able to wrap other components such as dxo-paging?

[eliseurm]

@Mimis40, I was using your grid-wrapper implementation, so I needed to update the version of devExtreme. From there the table enters an infinite loop and extends the memory. Have you had this problem? Trying to find the problem I noticed that the loop happens when the directive finds the property '@Input () public dataField ?: string;'.

[mikerentmeister]

@eliseurm and @sadra74 I have uploaded a version of what I'm currently using that works with angular 11. As a bonus, I also included an example of how to get dev extreme to work with Observables, instead of Differed/Promises. The table wrapper has evolved a lot since I last posted, so forgive me for that.

https://stackblitz.com/edit/angular-11-dev-express-grid-wrapper

[jeanmelo25]

@eliseurm and @sadra74 I have uploaded a version of what I'm currently using that works with angular 11. As a bonus, I also included an example of how to get dev extreme to work with Observables, instead of Differed/Promises. The table wrapper has evolved a lot since I last posted, so forgive me for that.

https://stackblitz.com/edit/angular-11-dev-express-grid-wrapper

@Mimis40 I've tried to use your approach, but many of the grid functions don't work, like updating rows, column width set, alignment and stuff, did you notice that? Or is it on purpose?

[elessariel]

@eliseurm and @sadra74 I have uploaded a version of what I'm currently using that works with angular 11. As a bonus, I also included an example of how to get dev extreme to work with Observables, instead of Differed/Promises. The table wrapper has evolved a lot since I last posted, so forgive me for that.

https://stackblitz.com/edit/angular-11-dev-express-grid-wrapper

Hey there. Thanks a lot for that example, it really did help me creating something similar. However what I tried is to customize the grid's toolbar using a custom template. I set the toolbar in 21.2.4 to this setting:

toolbar: {visible: true, items: [{location: 'after', template: 'toolbarTmpl'}]},

and in my wrapper I setup my template like this:

<div *dxTemplate="let data of 'toolbarTmpl'"> Toolbar Template test.

[eliseurm]

@eliseurm and @sadra74 I have uploaded a version of what I'm currently using that works with angular 11. As a bonus, I also included an example of how to get dev extreme to work with Observables, instead of Differed/Promises. The table wrapper has evolved a lot since I last posted, so forgive me for that.

https://stackblitz.com/edit/angular-11-dev-express-grid-wrapper

Hi @mikerentmeister, I need your help again. After upgrading from devExtreme 21.2.5 my grids stopped working. We actually need devExtreme to take care of this and implement a way to wrap columns. In the meantime, if you can make your solution update available, I would be eternally grateful. :)

[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,