Displaying a material table in Angular

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?

It's what you fetch through your service. See here stackoverflow.com/questions/53740101/… — sinanspd
– sinanspd, Commented Feb 4, 2020 at 17:52
Also if you click on the little expand button in the docs, it will take you to slack bitz where you can see the underlying code — sinanspd
– sinanspd, Commented Feb 4, 2020 at 17:57
Hi @sinanspd, thanks for you answer. I tried clicking on that button but I get an "Internal Server Error". Does it work to you? — Robb1
– Robb1, Commented Feb 4, 2020 at 17:58

puGoNaut · Accepted Answer · 2020-02-04 18:08:30Z

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'];

edited Feb 4, 2020 at 18:08

answered Feb 4, 2020 at 17:53

puGoNaut

1354 bronze badges

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

2 Comments

Robb1 Over a year ago

Didn't exactly answer to what I was asking, but at least improved considerably my view, thanks!

puGoNaut Over a year ago

i added the angular material approach

cabesuon · Accepted Answer · 2020-02-04 18:19:30Z

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);
    });
  }
}

Collectives™ on Stack Overflow

Displaying a material table in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related