0

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

JoSSte
  • 2,953
  • 6
  • 34
  • 54
nyla L
  • 57
  • 6

1 Answers1

1

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>
EJoshuaS - Stand with Ukraine
  • 11,977
  • 56
  • 49
  • 78