CODEWITHSUNDEEP
angularangular-material
uhetz
uhetz

Reputation: 412

What is the difference?

I'm learning now Angular and Angular Material. On the website of Angular Material there is an example how to build a table.

If I do it selfsame it's written, it won't work as well. It will be looking as I don't have half of css styles. https://material.angular.io/components/table/examples

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

But if I change it to this, it will be looking already fine. 

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

And I didn't yet get it, how I can use buttons with css styles. Maybe I've missed something.

Thank You!

Upvotes: 2

Views: 1152

Answers (1)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11940

mat-table renders table, so 

<mat-table />

becomes

<table /> <-- material table

But table mat-table renders table, inside table

<table mat-table />

becomes

<table> <-- your parent element
  <table /> <-- material table
</table>

same for th, tr, ...etc

Upvotes: 1

Related Questions