angularng2-smart-table

how to pass data to ng2-smart-table renderComponent from http request?


I have a table with a custom component in a cell and a service that provides me some data to display. My custom component implements select. So, table's column looks like this:

userRole: {
title: 'User Role,
type: 'custom',
renderComponent: SelectComponent,
onComponentInitFunction: (instance) => {
instance.selectEdit
.subscribe( (data) => {
console.log(data);
});
}
  },

select.component.html:

<select #select
        (change)="callType(select.value)"
>
  <option *ngFor="let option of options"
          attr.value="option.id" >{{option.name}}</option>
</select>

select.component.ts:

export class SelectComponent implements OnInit, OnChanges, ViewCell {
@Input() value: string | number;
@Input() rowData: any;
@Input() options;
@Output() selectEdit = new EventEmitter();

constructor() {
}

ngOnInit() {
}

ngOnChanges(changes: SimpleChanges): void {

}

callType(event) {
this.selectEdit.emit(event);
}

  }

Seems like instance object should have options property (because it's under @Input), but it doesn't :( I've tried somethng like https://github.com/akveo/ng2-smart-table/issues/521#issuecomment-333273103 but it doesn't work for me because I need data from Observable.


Solution

  • tricky solution: prepare data for SelectComponent before render component with table. container.component.ts:

      ngOnInit() {
        this.userService.httpAllRoles()
          .subscribe((roles: Role[]) => {
            this.roles = roles;
          });
      }
    

    container.component.html:

    <div *ngIf="roles">
      <app-table [roles]="roles"></app-table>
    </div>
    

    then pass data to inner component through valuePrepareFunction table.component.ts:

          userRole: {
            title: 'userRole,
            filter: false,
            type: 'custom',
            valuePrepareFunction: (value, row, cell) => {
              // DATA FROM HERE GOES TO renderComponent
              return this.roles;
            },
            renderComponent: SelectComponent,
            onComponentInitFunction: (instance) => {
              instance.selectEdit
                .subscribe( (data) => {
                  console.log(data);
                });
            }
          },
    

    to receive data in SelectComponent:

    export class SelectComponent implements OnInit, ViewCell {
      @Input() value; // data from table
      @Input() rowData;