Angular2 Smart Tables - Pass data to custom component

Question

I'm using Angular2 and I'm trying to add a view link for each row in my Smart Table. I'm doing this using the custom type which allows me to render a custom component.

The rendering process is working well but now I need to pass data (item's id) to the custom component and I have no idea how the data is being sent to the templates so I can't have access to it.

Here's my table component:

export class ShowLoans {
  query: string = '';

  settings = {
    actions: {
      delete: false,
      add: false
    },
   columns: {
   //...
      actions: {
        title: 'Acciones',
        type: 'custom',
        renderComponent: ViewLoan
      }
    }
  };

  source: LocalDataSource = new LocalDataSource();

  constructor(protected  loanService: LoanService) {
    this.loanService.getAllLoans().subscribe((data) => {
      this.source.load(data.loans);
    });
  }

And here's my custom component:

@Component({
  selector: 'viewloan',
  templateUrl: './viewLoan.html'
})
export class ViewLoan {

  public loan: Loan;
  constructor(){

  }
}

**NOTE: The ViewLoan component is declared as an entryComponent.

Answer 1

You can set the value of the cell to anything you would like. Like this:

ShowLoans

        //...
        columns: {
            //...
            actions: {
                title: 'Acciones',
                type: 'custom',
                valuePrepareFunction: (cell, row) => row, 
                renderComponent: ViewLoan
            }
        }
        //...

ViewLoan

    @Component({
        selector: 'viewloan',
        templateUrl: './viewLoan.html'
    })
    export class ViewLoan implements OnInit  {
        public value: Loan;
        
        ngOnInit() {
            console.log('Loan:', this.value);
            console.log('Loan ID:', this.value.id);
        }
    }

Note that value is set to whatever is returned by valuePrepareFunction

Answer 2

You may need to define a object in your class and then you can access in your view page.

data = [ // ... our data here ];
source: LocalDataSource; constructor() { 

    this.source = new LocalDataSource(this.data);


}

If you still have problem then kindly share source code.