Combining multiple columns to 1 in angular material 2

Question

I was trying the example of material 2 table as explained in this tutorialand it worked nice.

My problem is that in their api or example they have nowhere mention of to combine 2 separate columns to one single column.

I have having this data..

Column 1 - User ID
Columns 2 - First name
Columns 3 - Last name
Column 4 - Address

I want to a new columns which will replace Column2 and Column3 (i.e want to make new column with name Full Name which will be Coulmn2 + column3 )

Is there any way so that i can achieve the desired functionality. I dont want to edit the data at server side for this. this should be only done via frontend.

Will Howell · Accepted Answer · 2017-09-13 19:53:36Z

1

As an alternative, map your server data into the object format you want to use:

interface User {
  id: string;
  firstName: string;
  lastName: string;
  address: string;
}

interface UserDisplay {
  id: string;
  fullName: string;
  address: string;
}

const displayUsers: UserDisplay[] = this.getAllUsers()
  .map(user => {
    return {
      id: user.id,
      fullName: `${firstName} ${lastName}`,
      address: user.address,
    }
  });

answered Sep 13, 2017 at 19:53

Will Howell

3,7252 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gosha_Fighten · Accepted Answer · 2017-09-13 19:51:30Z

1

You can concatenate values of several columns inside the moustache binding:

<md-cell *mdCellDef="let row"> {{row.id.toString() + ' ' + row.name.toString()}} </md-cell>

See the plunk.

answered Sep 13, 2017 at 19:51

Gosha_Fighten

3,8881 gold badge25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Combining multiple columns to 1 in angular material 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related