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": "[email protected]",
      "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": "[email protected]",
        "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": "[email protected]",
      "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": "[email protected]",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": [
      {
        "id": "95ac8466-8d98-47ab-95f8-24eb7b7cc27b",
        "email": "[email protected]",
        "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?

zerocewl · Accepted Answer · 2020-07-27 19:14:06Z

1

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.

answered Jul 27, 2020 at 19:14

zerocewl

12.9k8 gold badges34 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

Add certain data from API into Angular Material Table expanded section

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related