Add certain data from API into Angular Material Table expanded section

Question

I have the following response data set that comes from an API call. I am trying to add one object called contributorProfiles from within the data set to be my expanded data in the material table.

[
  {
    "title": "bob",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "asdas",
    "locationId": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
    "startDate": "2020-07-08T00:00:00.000+0000",
    "endDate": "2020-07-10T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 22,
    "accreditationRequired": false,
    "accreditationReason": null,
    "subjects": "test",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "b6b99931-c6a3-476a-8c3a-9e2535823c13",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
      "country": "Bhutan",
      "city": "Lhuentse"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  },
  {
    "title": "tester kalpesh",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "123",
    "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
    "startDate": "2020-06-24T00:00:00.000+0000",
    "endDate": "2020-07-03T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 55,
    "accreditationRequired": false,
    "accreditationReason": "none",
    "subjects": "55",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "3fdf9972-9b21-4a6e-b650-4141f5c6809e",
    "status": "Assigned",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
      "country": "South Africa",
      "city": "Johannesburg"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": [
      {
        "id": "95ac8466-8d98-47ab-95f8-24eb7b7cc27b",
        "email": "kalpesh@mithal.co.za",
        "firstname": "Kalpesh",
        "surname": "Mithal",
        "cell": "0884441122",
        "appliedStatus": "Created"
      }
    ]
  }
]

I have made a stackblitz example of my code

https://stackblitz.com/edit/angular-hvcf5z

Code HTML

    <table mat-table
           [dataSource]="dataSource" multiTemplateDataRows
           class="mat-elevation-z8">
      <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      </ng-container>
    
      <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
      <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
          <div class="example-element-detail"
               [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
    
          </div>
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
          class="example-element-row"
          [class.example-expanded-row]="expandedElement === element"
          (click)="expandedElement = expandedElement === element ? null : element">
      </tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>

TS

columnsToDisplay = ['title','city','startDate','deviceType','status','cancel'];
expandedElement: ['contributorProfiles'] | null;

So when I click on a row and it expands I would like to show the contributorProfiles for that specific row. Any ideas how I can go about this?

score 1 · Accepted Answer · answered Jul 27 '20 at 19:14

Here is a working Stackblitz for your data.

It's a bit hard to figure out whats your question, but i think you get the idea of the solution from within the demo.

Another good example can be found in the Angular table docs and the depending Stackblitz for Table with expandable rows.

Add certain data from API into Angular Material Table expanded section

1 Answers1