0

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?

Symeon Mattes
  • 1,169
  • 16
  • 40
  • I’d expect the first solution to just work..? Is everything there (custom wrapper and projected components) in the same module? – MikeOne Aug 24 '21 at 18:15
  • no...they are in different module. Component1 is in module1 and CustomClrGridComponent is in module2.Not sure if it plays a role – Symeon Mattes Aug 24 '21 at 22:42
  • It would I guess..? Both components (and therefore modules) must be in scope.. – MikeOne Aug 25 '21 at 12:02
  • From Clarity they mentioned that it's not possible to be done https://github.com/vmware/clarity/discussions/6269 – Symeon Mattes Sep 09 '21 at 12:59

0 Answers0