I received the following data from my API:
{
"id": 82,
"shortname": "testing2",
"fullname": "test2",
"address": "addrtest2",
"telephone": "380979379993",
"website": "www.site2.com",
"sociallinks": {
"facebook": "fb2.com"
},
"foundationyear": "1992",
"rating": 0.0
}
My goal is to display the social network column in a material table. Here's the code snippet for the template:
<button mat-raised-button color="primary" (click)="route.navigate(['/addbuildcompany'])">Add</button>
<table mat-table [dataSource]="dataSource" matSort >
<!-- Table columns definition -->
</table>
Currently, I am able to display the Facebook link in the social network column. However, I want to dynamically show any key name and its respective value. How can I achieve this?
Here is my model class for Buildcompany:
export class Buildcompany {
id?:any;
shortname?:string;
fullname?:string;
address?:string;
telephone?:string;
website?:string;
sociallinks?:string;
foundationyear?:string;
rating?:number;
}
And here is my component class:
import {Component, OnInit, ViewChild} from '@angular/core';
import {Buildcompany} from "../../models/buildcompany.model";
import {BuildcompanyService} from "../../services/buildcompany.service";
import {MatTableDataSource} from "@angular/material/table";
import {MatSort} from "@angular/material/sort";
import { Router } from '@angular/router';
import {Region} from "../../models/region.model";
import {RegionService} from "../../services/region.service";
@Component({
selector: 'app-buildcompanies-list',
templateUrl: './buildcompanies-list.component.html',
styleUrls: ['./buildcompanies-list.component.css']
})
export class BuildcompaniesListComponent implements OnInit {
// Class properties and methods
}