Displaying a material table in Angular - html

Question

I'm pretty new to Angular and I'm trying to create a table to better display my data. I'm getting the data from a JSON provided by my server.
Content of data.component.html:
<div class="container">
<h1>Search history</h1>
<table *ngIf="searches">
<li *ngFor="let search of searches">
<p class="searchParams">{{search.searchParams}}</p>
<p class="searchDate">{{search.searchDate | date: "yyyy-MM-dd hh:mm"}}</p>
</li>
</table>
</div>
Content of data.component.ts:
#Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.scss']
})
export class DataComponent implements OnInit {
searches: Object;
constructor(private _http: HttpService) {
}
ngOnInit() {
this._http.getSearches().subscribe(data => {
this.searches = data;
console.log(this.searches);
});
}
}
What I get is something that looks like a bullet list:
I'm trying to take this as example but I don't understand how to implement it. What is my datasource here? What HTML should I write to get such a nice looking table?

Answer 1

If you want something like the angular material table you should actually use it and follow the docs.
If you don't want to use angular material but instead just want a regular HTML table you should adjust you code like that to use actuale table rows and colums:
<div class="container">
<h1>Search history</h1>
<table *ngIf="searches">
<tr *ngFor="let search of searches">
<td class="searchParams">{{search.searchParams}}</p>
<td class="searchDate">{{search.searchDate | date: "yyyy-MM-dd hh:mm"}}</p>
</tr>
</table>
</div>
You can then style your table via CSS.
For an angular material approach you should first install the package and import it to your module. Then you could use a template like that:
<table mat-table [dataSource]="searches" class="mat-elevation-z8">
<!-- searchParams Column -->
<ng-container matColumnDef="searchParams">
<th mat-header-cell *matHeaderCellDef> Search parameters </th>
<td mat-cell *matCellDef="let element"> {{element.searchParams}} </td>
</ng-container>
<!-- searchDate Column -->
<ng-container matColumnDef="searchDate">
<th mat-header-cell *matHeaderCellDef> Date </th>
<td mat-cell *matCellDef="let element"> {{element.searchDate}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
dont forget to define displayColumns in code behind:
displayedColumns: string[] = ['searchParams', 'searchDate'];

Answer 2

Something like this could work,
data.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Keyword Column -->
<ng-container matColumnDef="keyword">
<th mat-header-cell *matHeaderCellDef> Keyword </th>
<td mat-cell *matCellDef="let element"> {{element.keyword}} </td>
</ng-container>
<!-- Limit Column -->
<ng-container matColumnDef="limit">
<th mat-header-cell *matHeaderCellDef> Limit </th>
<td mat-cell *matCellDef="let element"> {{element.limit}} </td>
</ng-container>
<!-- Date Search Column -->
<ng-container matColumnDef="dateSearch">
<th mat-header-cell *matHeaderCellDef> Date Search </th>
<td mat-cell *matCellDef="let element"> {{element.dateSearch | date: "yyyy-MM-dd hh:mm"}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</tabl1e>
data.component.ts
#Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.scss']
})
export class DataComponent implements OnInit {
searches: Object;
displayedColumns: string[] = ['position', 'keyword', 'limit', 'date'];
dataSource = ELEMENT_DATA;
constructor(private _http: HttpService) {
}
ngOnInit() {
this._http.getSearches().subscribe(data => {
this.searches = data;
this.dataSource = data.map((v, i) => {
position: i,
keyword: v.searchParams.keyword,
limit: v.searchParams.limit,
dateSearch: v.searchDate
});
console.log(this.searches);
});
}
}