How to make two tabs take whole screen width in angular material 2

Question

I am using angular material 2 and have only two tabs and want them to take up the whole screen width (half each, see pic2). How can I do that (by default it looks like pic1)?

pic1
------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------

pic 2
------------------------------------------------
|         ITEM1        |          ITEM 2       |
------------------------------------------------

Answer 1

I think what you're looking for is the [mat-stretch-tabs] property:

<mat-tab-group mat-stretch-tabs>
    <mat-tab label="Tab 1">Tab 1</mat-tab>
    <mat-tab label="Tab 2">Tab 2</mat-tab>
</mat-tab-group>

Note: For some reason, it only works on the mat-tab-group component, but not nav[mat-tab-nav-bar].