Should I use " Asked Apr 10 '19 at 07:49 Active Nov 07 '22 at 04:34 Viewed 7,241 times 26 0 The title already says it, which one should I use and is there / what is the difference between having <table mat table [dataSource]="items" ... or <mat table [dataSource]="items" ... in my HTML markup? On a cursory glance they both work fine, but I assume there must be a difference... EDIT: I'm specifically talking about resizeable columns, like in this example: https://stackblitz.com/edit/angular-rtfc5v?file=src%2Fapp%2Fapp.component.html If you switch the angular tags mat-table edited Apr 10 '19 at 08:38 Hobbamok asked Apr 10 '19 at 07:49 Hobbamok 767 1 11 21 2 they are the same, but in angular material docs tell you to put ` `. So I will put it like that. – Jon Fernandez Apr 10 '19 at 08:10

Answer 1

Option 1 Stackblitz: <mat-table>: When you use as an element it uses CSS flex-box properties to align your data/table so when you have very long text it will not resize automatically unless specified otherwise.
Note: using this option you have to compromise on rowspan and colspan such as if the need arises you can't span your rows/cols

Option 2 Stackblitz: table[mat-table]: When you use as an attribute to html table the td takes care of auto resizing its content based on the cell in turn based to the column. So the whole column gets the width

The modern approach would be to use the Option-1 CSS flex-box approach, but if you have very long content in cell you can specify the column width to a large number, but if you don't want to go to a lot of hassle you can use it with Option-2 native html table/tr/td

Here is the source code of Angular material table

Happy Coding!