I would like to create a generic clarity datagrid for my application using content project. A very simple example is
Component1
<app-custom-clr-datagrid>
<clr-dg-column>Col1</clr-dg-column>
<clr-dg-column>Col2</clr-dg-column>
<clr-dg-row *clrDgItems="let user of users">
<clr-dg-cell>{{user.id}}</clr-dg-cell>
<clr-dg-cell>{{user.name}}</clr-dg-cell>
</clr-dg-row>
</app-custom-clr-datagrid>
CustomClrDatagridComponent
<clr-datagrid class="datagrid-inner-height">
<ng-content></ng-content>
<clr-dg-footer> <clr-dg-pagination #pagination
[clrDgPageSize]="20"> <clr-dg-page-size
[clrPageSizeOptions]="[10,20,50,100]">Items per
page</clr-dg-page-size> {{pagination.firstItem + 1}} -
{{pagination.lastItem + 1}} of {{pagination.totalItems}} items
</clr-dg-pagination> </clr-dg-footer>
</clr-datagrid>
Just as that I was receiving different errors of such as
NullInjectorError: No provider for blblb
So I tried to extend Clarity datagrid, shorthands described in https://github.com/clr-team/clr-angular/blob/master/clr-angular.d.ts, with no much success:
import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';
import {ClrDatagrid, ClrCommonStringsService, ɵci, ɵco, ɵcp,
ɵcq, ɵcr, ɵcs, ɵct, ɵcu, ɵcv, ɵcw, ɵcx, ɵcy, ɵcz, ɵda, ɵdb} from '@clr/angular';
@Component({
selector: 'app-custom-clr-datagrid',
templateUrl: './custom-clr-datagrid.component.html',
styleUrls: ['./custom-clr-datagrid.component.css'],
providers: [ɵcs, ɵct, ɵcq, ɵcr, ɵcx, ɵcu, ɵci, ɵda, ɵcz, ɵcp, ɵco, ɵcv, ɵcw, ɵdb, ɵcy]
})
export class CustomClrDatagridComponent<T = any> extends ClrDatagrid<T> implements OnInit {
constructor(organizer: ɵcu, items: ɵcp<T>, expandableRows: ɵcw, selection: ɵco<T>,
rowActionService: ɵcv, stateProvider: ɵcy<T>, displayMode: ɵdb, renderer: Renderer2,
detailService: ɵcx, el: ElementRef, page: ɵcr, commonStrings: ClrCommonStringsService) {
const datagridId = 'CustomClrDatagrid';
super(organizer, items, expandableRows, selection, rowActionService, stateProvider,
displayMode, renderer, detailService, datagridId, el, page, commonStrings);
}
ngOnInit(): void {
}
}
but different errors insist
core.js:6210 ERROR TypeError: Cannot read property 'length' of undefined
at SafeSubscriber._next (clr-angular.js:17171)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at BehaviorSubject._subscribe (BehaviorSubject.js:14)
at BehaviorSubject._trySubscribe (Observable.js:42)
at BehaviorSubject._trySubscribe (Subject.js:81)
at BehaviorSubject.subscribe (Observable.js:28)
at Observable._subscribe (Observable.js:76)
core.js:6210 ERROR Error: clr-dg-row should only be used inside of a clr-datagrid
at new ActionableOompaLoompa (clr-angular.js:14600)
at NodeInjectorFactory.ActionableOompaLoompa_Factory [as factory] (clr-angular.js:14609)
at getNodeInjectable (core.js:3596)
at instantiateAllDirectives (core.js:10294)
at createDirectivesInstances (core.js:9643)
at Module.ɵɵelementStart (core.js:14851)
at MainNavigationComponent_clr_dg_row_30_Template (Component1.html:58)
at executeTemplate (core.js:9614)
at renderView (core.js:9418)
at TemplateRef.createEmbeddedView (core.js:23034)
Show 53 more frames
core.js:6210 ERROR Error: NG0300: Multiple components match node with tagname clr-dg-row. Find more at https://angular.io/errors/NG0300
at throwMultipleComponentError (core.js:6779)
at findDirectiveDefMatches (core.js:10358)
at resolveDirectives (core.js:10172)
at elementStartFirstCreatePass (core.js:14786)
at Module.ɵɵelementStart (core.js:14823)
at MainNavigationComponent_clr_dg_row_30_Template (main-navigation.component.html:58)
at executeTemplate (core.js:9614)
at renderView (core.js:9418)
at TemplateRef.createEmbeddedView (core.js:23034)
at ViewContainerRef.createEmbeddedView (
Any ideas?