htmlcssangularmat-tab

How can I change the start point of content display in mat-tab-group?

Code:

    <mat-tab-group dynamicHeight>
      <mat-tab label="Short tab">
        <div class="example-small-box mat-elevation-z4">
          Common Div
        </div>
        <div class="example-small-box mat-elevation-z4">
          Nav 1
        </div>
      </mat-tab>
      <mat-tab label="Long tab">
        <div class="example-small-box mat-elevation-z4">
          Common Div
        </div>
        <div class="example-small-box mat-elevation-z4">
          Nav 2
        </div>
      </mat-tab>
    </mat-tab-group>

How can I not use common div for each navigation?

Can make common div fix?

I want make common div at fix position and when I navigate just uncommon div should slide-down/move.

UPDATE Is possible to change the start point of content. As you see in below image, content 1 start from beginning from red arrow instead can change position to yellow arrow ? so at begging I can place common div.

enter image description here

Solution

  • If this is meant to be dynamic, do as stated in the commments.

    If it is mean to be hard coded, make a re-usable component.

    ng g my-component

    Change the HTML in the new component to be

    <div class="example-small-box mat-elevation-z4">
      Common Div
</div>
<div class="example-small-box mat-elevation-z4">
      {{label}}
</div>

    Add an input to the new component:

    @Input() label: string = '';

    import in your main component and use like so:

    <mat-tab-group dynamicHeight>
  <mat-tab label="Short tab">
    <my-component [label]="Nav 1"></my-component>
  </mat-tab>
  <mat-tab label="Long tab">
    <my-component [label]="Nav 2"></my-component>
  </mat-tab>
</mat-tab-group>