please update site examples and documentation

it works for me


@Component({
  selector: 'app-base-list',
  template: `
    <ul>
      <li *ngFor="let item of data">
        <ng-container
          [ngTemplateOutlet]="this.tmpl"
          [ngTemplateOutletContext]="{ row: item }"
        >
        </ng-container>
      </li>
    </ul>
  `
})
export class BaseListComponent implements OnInit, AfterViewInit {
  @Input() tmpl!: TemplateRef<any>;

  data = [
    {
      code: 'FI-SW-01',
      name: 'Koi',
      unitcost: 10.0,
      status: 'P',
      listprice: 36.5,
      attr: 'Large',
      itemid: 'EST-1',
    },
    {
      code: 'K9-DL-01',
      name: 'Dalmation',
      unitcost: 12.0,
      status: 'P',
      listprice: 18.5,
      attr: 'Spotted Adult Female',
      itemid: 'EST-10',
    },
    {
      code: 'RP-SN-01',
      name: 'Rattlesnake',
      unitcost: 12.0,
      status: 'P',
      listprice: 38.5,
      attr: 'Venomless',
      itemid: 'EST-11',
    },
  ];

  constructor() {}

  ngOnInit(): void {}
  ngAfterViewInit(): void {}
}


@Component({
  selector: 'app-my-list',
  template: `
    <app-base-list [tmpl]="this.tmp1">
      <ng-template #tmp1 let-item="row">
        <p>{{ item.name }}</p>
      </ng-template>
    </app-base-list>
  `,
})
export class MyListComponent implements OnInit, AfterViewInit {
  constructor() {}

  ngOnInit(): void {}
  ngAfterViewInit(): void {}
}





how can i perform this kind of content projection



@Component({
  selector: 'app-base-list02',
  template: `
    <eui-datagrid [data]="data" style="height:250px">
      <ng-container
        *ngFor="let item of data"
        [ngTemplateOutlet]="this.tmp"
        [ngTemplateOutletContext]="{ row: item }"
      >
      </ng-container>
    </eui-datagrid>
  `,
})
export class BaseList02Component implements OnInit {
  @Input() tmp!: TemplateRef<any>;

  data = [
    {
      code: 'FI-SW-01',
      name: 'Koi',
      unitcost: 10.0,
      status: 'P',
      listprice: 36.5,
      attr: 'Large',
      itemid: 'EST-1',
    },
    {
      code: 'K9-DL-01',
      name: 'Dalmation',
      unitcost: 12.0,
      status: 'P',
      listprice: 18.5,
      attr: 'Spotted Adult Female',
      itemid: 'EST-10',
    },
    {
      code: 'RP-SN-01',
      name: 'Rattlesnake',
      unitcost: 12.0,
      status: 'P',
      listprice: 38.5,
      attr: 'Venomless',
      itemid: 'EST-11',
    },
  ];

  constructor() {}

  ngOnInit(): void {}
}



import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-list02',
  template: `
    <app-base-list02 [tmp]="this.tmp1">
      <ng-template #tmp1 let-item="row.item">
        <eui-grid-column field="itemid" title="Item ID"></eui-grid-column>
        <eui-grid-column field="name" title="Name"></eui-grid-column>
      </ng-template>
    </app-base-list02>
  `,
})
export class MyList02Component implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

it woks. thank you

now another error occurs

Compiled with problems:X

ERROR in ./node_modules/ng-easyui/fesm2015/ng-easyui.js 3245:47-78

export 'ɵangular_packages_forms_forms_z' (imported as 'ɵangular_packages_forms_forms_z') was not found in '@angular/forms' (possible exports: AbstractControl, AbstractControlDirective, AbstractFormGroupDirective, COMPOSITION_BUFFER_MODE, CheckboxControlValueAccessor, CheckboxRequiredValidator, ControlContainer, DefaultValueAccessor, EmailValidator, FormArray, FormArrayName, FormBuilder, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormGroupName, FormsModule, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgControlStatus, NgControlStatusGroup, NgForm, NgModel, NgModelGroup, NgSelectOption, NumberValueAccessor, PatternValidator, RadioControlValueAccessor, RangeValueAccessor, ReactiveFormsModule, RequiredValidator, SelectControlValueAccessor, SelectMultipleControlValueAccessor, VERSION, Validators, ɵInternalFormsSharedModule, ɵNgNoValidate, ɵNgSelectMultipleOption)


ERROR

node_modules/ng-easyui/lib/accordion/accordion-panel.component.d.ts:31:21 - error TS2694: Namespace '"C:/DEV/PRJ/Angular/test05/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.

31     static ɵfac: i0.ɵɵFactoryDef<AccordionPanelComponent, [{ host: true; }, null]>;
                       ~~~~~~~~~~~~


............
............
............



ERROR

node_modules/ng-easyui/lib/treegrid/treegrid.module.d.ts:15:21 - error TS2694: Namespace '"C:/DEV/PRJ/Angular/test05/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDefWithMeta'.

15     static ɵmod: i0.ɵɵNgModuleDefWithMeta<TreeGridModule, [typeof i1.TreeGridComponent, typeof i2.TreeGridBodyComponent, typeof i3.TreeGridViewComponent, typeof i4.TreeGridRowComponent, typeof i5.TreeGridChildrenComponent, typeof i6.TreeGridEditTemplateDirective], [typeof i7.CommonModule, typeof i8.FormsModule, typeof i9.BaseModule, typeof i10.GridBaseModule, typeof i11.PaginationModule], [typeof i1.TreeGridComponent, typeof i2.TreeGridBodyComponent, typeof i3.TreeGridViewComponent, typeof i4.TreeGridRowComponent, typeof i5.TreeGridChildrenComponent, typeof i6.TreeGridEditTemplateDirective]>;
                       ~~~~~~~~~~~~~~~~~~~~~

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.


Angular CLI: 13.3.5
Node: 16.15.0
Package Manager: npm 8.5.5