I want to create a wrapper for IgxGrid component which will have customizable inputs.
https://stackblitz.com/edit/angular-n71deq
Here is the stackblitz link which contains my problem. I have a component app-grid-wrapper which will contain igx-grid and another component which will pass <igx-column> as content wrapped inside the tag which will then show the columns as projection inside <igx-grid>. But using this approach breaks the application with the error.NullInjectorError: No provider for InjectionToken IgxGridBaseToken!.Is there any way this can be achieved. Thanks
Hello Ammar,
Thank you for posting into our community!
I have been looking into your question and what I could say is that the reason for receiving this error is due to the IgxColumnComponent expects to be defined in an IgxGridComponent in order for it to work properly.
Having this in mind, an approach I could suggest is defining the columns in an array in the ts file and dynamically generating them with a *ngFor loop in the component that holds the IgxGrid, i.e., the grid wrapper. Then, a property with an @Input decorator should be defined, which will be used for binding the columns array to the one used by the *ngFor loop.
Additionally, in order to demonstrate my suggestion, I have prepared a small sample using the abovementioned approach and it could be found here.
Please test it on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely, Riva Ivanova Associate Software Developer
Hello Riva,
Thanks for your response. I saw your answer but due to the requirements I was looking for an approach in which user can pass IgxColumn as content.
Is there no way we can dynamically create IgxColumn and inject inside IgxGrid?
Thank you for following up!
After further investigating this matter what I could say is that the IgxColumnComponent could be used inside the ts file, for example, like the following:
<igx-grid #grid [data]="data" [autoGenerate]="true" (columnInit)="columnInit($event)" > </igx-grid>
import { IgxColumnComponent } from 'igniteui-angular'; public columnInit(column: IgxColumnComponent) { if (column.field === "ProductName") { column.filterable = true; } }
However, as previously mentioned, when defining the columns as templates, they need to be defined inside the IgxGridComponent in order to work properly and as expected. It is not possible to dynamically create columns and assign them to the grid. The correct and recommended ways is by using templates or by using the autoGenerate property.
Additionally, the suggestion from my initial message is an alternative approach for defining the columns in a separate component in the form of an array and dynamically generating them via *ngFor loop.
Please let me know if you need any further assistance regarding this matter.