Content Projection and clarity

[symeonmattes]

Hi,

I would like to create a generic clarity datagrid for my application using content project. A very simple example is

Component1

<mycustom-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>
</mycustom-clr-datagrid>

MyCustomClrDatagridComponent

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

However I receive an error:

core.js:6210 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Compoenent1Module)[Sort -> Sort -> Sort -> Sort]: 
  NullInjectorError: No provider for Sort!
NullInjectorError: R3InjectorError(Component1Module)[Sort -> Sort -> Sort -> Sort]: 
  NullInjectorError: No provider for Sort!
    at NullInjector.get (core.js:11116)
    at R3Injector.get (core.js:11283)
    at R3Injector.get (core.js:11283)
    at R3Injector.get (core.js:11283)
    at NgModuleRef$1.get (core.js:25337)
    at R3Injector.get (core.js:11283)
    at NgModuleRef$1.get (core.js:25337)
    at Object.get (core.js:25051)
    at lookupTokenUsingModuleInjector (core.js:3389)
    at getOrCreateInjectable (core.js:3501)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28578)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

Any ideas how to solve it?

[bbogdanov]

Are you extending ClrDatagrid like class MyCustomDatagrid extends ClrDatagrid?

[symeonmattes]

That's a good idea, but it seems the constructor gets a lot of parameters (datagrid.d.ts) and it seems in my component constructor I have to call super() with all these parameters...not sure how to initialize it

[bbogdanov]

Well this is how class inheritance works. On the other hand I don't know what you are doing at the moment but from the message I see in the Error above, you need to provide a Sort that I believe is https://github.com/clr-team/clr-angular/blob/master/data/datagrid/providers/sort.d.ts

[symeonmattes]

If I do this

import {Component, OnInit} from '@angular/core';
import {Sort} from '@clr/angular/data/datagrid/providers/sort';
import {StateDebouncer} from '@clr/angular/data/datagrid/providers/state-debouncer.provider';


@Component({
  selector: 'app-custom-clr-datagrid',
  templateUrl: './custom-clr-datagrid.component.html',
  styleUrls: ['./custom-clr-datagrid.component.css']
})
export class CustomClrDatagridComponent<T = any> extends Sort<T> implements OnInit {

	// constructor() {
  constructor(stateDebouncer: StateDebouncer) {
  	super(stateDebouncer);
	}

  ngOnInit(): void {
  }

}
](url)

Then during build process I have an error:

Error: ./projects/app/src/app/shared/custom-clr-datagrid/custom-clr-datagrid.component.ts
Module not found: Error: Can't resolve '@clr/angular/data/datagrid/providers/state-debouncer.provider' in '.....custom-clr-datagrid'
resolve '@clr/angular/data/datagrid/providers/state-debouncer.provider' in '....custom-clr-datagrid'


I have similar errors if extend from ClrDatagrid

[symeonmattes]

I have done this as improvement (shorthands as described in link):

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 {
  }

}

However I receive the error:

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 (core.js:23165)

[bbogdanov]

After deep research, the team will encourage you to not proceed Content Projection but Wrapping the entire Datagrid and just passing the data and doing your own inputs and ouputs to control the datagrid behaviour inside your wrapper.

The content projection will slow down your performance, the inheritance will not be available cause there are providers that we don't export and you will have to write your own