EasyUI Forum

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