Display Nested Object with Ng2 Smart Table using AngularFire and Firestore



Above Is my Data Structure in Firebase’s Firestore db. I can successfully pull data and put it into the ng2 smart table using these settings:

export const userTableSettings = {
  delete: {
confirmDelete: true,
deleteButtonContent: '<i class="ft-x danger font-medium-1 mr-2"></i>'
  add: {
confirmCreate: true,
  edit: {
confirmSave: true,
editButtonContent: '<i class="ft-edit-2 info font-medium-1 mr-2"></i>'
  firstName: {
title: 'Full Name',
  lastName: {
title: 'User Name',
  email: {
title: 'Email',
  attr: {
    class: 'table table-responsive'

but when I add a place for roles

roles: {
    title: 'Role',

the output is

enter image description here

I want to be able to display the users role or roles if they have more than one, and be able to update them from the table.


Since what you get for the roles data is an Object (and not a primitive, e.g. a string, a number, a boolean, etc.) you should use a renderComponent attribute. It will allow you to pass a Custom component to render into the cell (i.e. the type shall be custom).

See the doc https://akveo.github.io/ng2-smart-table/#/documentation (search for renderComponent in the page) and the proposed example (https://github.com/akveo/ng2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/advanced-example-custom-editor.component.ts)

Answered By – Renaud Tarnec

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.