Angular 4 Material 2 - Components of the central tab

Question

I could not learn how to center the Angular Material Tab component.

Here you can see: https://material.angular.io/components/tabs/overview

I think there’s even a way to do this, it’s just very unclear what to do imo.

Below is a screenshot of the documents. What do the properties mean? Is it in html or must it be installed in typescript?

I am very grateful for your help.

Answer 1

It looks like you are looking for an attribute md-stretch-tabsthat should be applied on <md-tab-group>:

<md-tab-group md-stretch-tabs>
    <md-tab label="Tab 1">
        <p>Content for tab 1.</p>
    </md-tab>
    <md-tab label="Tab 2">
        <p>Content for tab 2.</p>
    </md-tab>
    ...
</md-tab-group>

Plunker

Answer 2

, . , , API.

github .

, , .

Answer 3

You can set the position value when projecting content using the attribute md-tab-body.

This value positionmust be set with typescript code.

<md-tab-group>
  <md-tab label="Tab 1"  >
     <div md-tab-body #tab >
      <button (click)="clickedMe()">Clicked</button>
    </div>
  </md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

Typescript code

  @ViewChild('tab') tab: TemplateRef;
   ngAfterViewInit(){
     console.log(this.tab);
     this.tab.position = 100;
   }
   ngAfterContentInit(){
     console.log(this.tab);
   }
   clickedMe(){
     console.log(this.tab);
   }

Live demo