How to set a click handler to component that is passed to the cell?

[Kristina1996]

Hi! I have a problem with table customization. Could you tell me how to use @output to track the click event of a button that is displayed with FactoryRenderer in skawa-data-table-col? Thank you)

table_component.html:

    <skawa-data-table-col *ngFor="let column of columns"
                          [accessor]="column.accessor"
                          [colRenderer]="column.columnRenderer?.factoryRenderer"
                          [class]="column.classString"
                          [header]="column.header">
    </skawa-data-table-col>
</skawa-data-table>

table_component.dart:

class TableComponent implements OnInit {

  static final FactoryRenderer<TestIconComponent, StartupRowData> firstDownPercentRenderer =
      (RowData row) => fpc.TestIconComponentNgFactory;

  final ReportsService reportsService;
  TableComponent(this.reportsService);

  List<StartupRowData> selectableRowData = <StartupRowData>[
    StartupRowData('20202020', 'asd', 'asd', 'asd', 'asd', 'asd', false),
    StartupRowData('20202020', 'asd', 'asd', 'asd', 'asd', 'asd', false),
    StartupRowData('20202020', 'asd', 'asd', 'asd', 'asd', 'asd', false),
    StartupRowData('20202020', 'asd', 'asd', 'asd', 'asd', 'asd', false),
  ];

  List<SkawaDataTableColComponent<StartupRowData>> columns = _columns;

  static String searchDateAccessor(StartupRowData row) => row.searchDate;
  static String startupNameAccessor(StartupRowData row) => row.startupName;
  static String iconAccessor(StartupRowData row) => row.financingRound;

  static final List<SkawaDataTableColComponent<StartupRowData>> _columns = [
    SkawaDataTableColComponent<StartupRowData>(null)
      ..header = 'startupName'
      ..accessor = startupNameAccessor
      ..classString = 'text-column',
    SkawaDataTableColComponent<StartupRowData>(
        SkawaDataColRendererDirective<StartupRowData>()..factoryRenderer = firstDownPercentRenderer)
      ..header = 'Events'
  ];
}

icon_component.dart:

@Component(
  selector: 'icon-component',
  styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
  template: '<material-button raised class="blue" (click)="click()">Click</material-button>',
  directives: [MaterialButtonComponent]
)
class TestIconComponent extends RendersValue<StartupRowData> {
  final _trigger = StreamController<String>();
  @Output() // How set handler on this trigger?
  Stream<String> get trigger => _trigger.stream;

  @override
  StartupRowData value;

  click() {
    print('btn click');
    _trigger.add('trigger');
  }
}

[valakis]

Currently there are not possible to do it without some painfull solution. I planning to add some feature to the DataTAble in the week, i will try to add a solution for this one too.

[valakis]

I checked it, on the following example (with ddc and dart2js too)

@Component(
    selector: 'app',
    template: '<stream (stream)="a()"></stream><button (click)="a()"></button>>',
    directives: [StreamComponent])
class AppCmp {
  void a() {}
}

@Component(selector: 'stream', template: '')
class StreamComponent {
  @Output()
  Stream stream = Stream.empty();
}

The stream listen will be different for the stream with @Output() and for the original html streams. To the 'click' stream, the angular will listen by addEventListener, but in the case of the @Outpt() streams, the angular will listen to them directly. Therefor now i didn't see non painfull short term solution.

[Kristina1996]

Thank you) We have already painless rewritten the whole project to Angular TypeScript. ;)