Standard component based on Kendo Treelist

[Huynh]

Hi,
I am making a standard treelist component based on kendo treelist, and im having some problem which i dont know how to fix it. 
2. I want to allow user can add kendo treelist column and use ng-template KendoTreelistCell as `Usage code` below but it keep throw this error:
Uncaught (in promise): NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]: 
  NullInjectorError: No provider for OptionChangesService!
NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]: 
 NullInjectorError: No provider for OptionChangesService!
https://stackblitz.com/edit/angular-keazja?file=src%2Fapp%2Fapp.component.ts
My component treelist:

export class PKendoTreelistComponent<T> implements OnInit, AfterViewInit {

  //Retrive input with many type of input array

  @Input() rootData: Subject<T[]> = new Subject<T[]>();

  @Input() hasChildrenFn: (item: T) => boolean;

  @Input() fetchChildrenFn: (item: T) => T[];

  @ViewChild('customTreeList') public customTreelist: TreeListComponent;

  @ViewChild('treelistContent', { static: true }) treelistContent!: TemplateRef<any>;

  @ContentChildren(PKendoTreeListColumnComponent) columns;

  @ContentChildren(ColumnGroupComponent) columnGroups;

  constructor() {}

  ngOnInit(): void {

    console.log(this.treelistContent);

  }

  ngAfterViewInit(): void {

      this.customTreelist.columns.reset([

        this.customTreelist.columns.toArray()[0],

        this.columnGroups.toArray(),

        this.customTreelist.columns.toArray().slice(1)

      ])

  }

}

<kendo-treelist

    #customTreeList

    kendoTreeListExpandable

    [data]="rootData | async"

    [fetchChildren]="fetchChildrenFn"

    [hasChildren]="hasChildrenFn"

    [height]="400"

    >

    <ng-content></ng-content>

</kendo-treelist>

@Component({

  selector: 'app-p-kendo-treelist-column',

  template: `<kendo-treelist-column

  #CustomTreelistColumn

  [field]="field"

  [title]="title"

  [width]="width"

  [expandable]="expandable"

  >

</kendo-treelist-column>`

})

export class PKendoTreeListColumnComponent {

  @ViewChild(ColumnComponent) public realColumn: ColumnComponent;

  @Input() field: string = '';

  @Input() title: string = '';

  @Input() width: number = 0;

  @Input() expandable: boolean = false;

  constructor() { }

  ngAfterViewInit() {

    console.log(this.realColumn)

  }

}

Usage:

      <app-p-kendo-treelist

      [rootData]="listGroupWebTreeList"

      [hasChildrenFn]="hasChildren"

      [fetchChildrenFn]="fetchChildren"

    >

      <kendo-treelist-column [expandable]="true" class="d-flex">

        <ng-template kendoTreeListCellTemplate let-dataItem>

          {{dataItem.VNGroupName}}

        </ng-template>

      </kendo-treelist-column>

      </app-p-kendo-treelist>

Regards,
Hnaul

[Yanmario]

Hi Hnaul,

The mentioned implementation isn't valid for the TreeList component as the TreeListCoolumnComponent needs to be defined inside the TreeList component:

https://stackblitz.com/edit/angular-keazja-hat4er?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ftreelist.component.ts

Now I do understand that content projection might be useful, but our components are complex and in certain scenarios might not be achievable as the OptionChangesService is private. 

You could possibly check the Grid with a similar approach, but I cannot promise that everything would work for a specific scenario.

https://stackblitz.com/edit/angular-lq8s9q?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ftest%2Ftest.component.ts,src%2Fapp%2Ftest%2Ftest.component.html

Regards,
Yanmario
Progress Telerik