Angular Material Tabs, Place content on the right side of the tabs

Question

I am having a problem placing content on the right side of the tabs.

I tried putting content in mat-tab disabled but I don't want my content (placed on the right side to be disabled)

Moreover, the content also contains a dropdown.

Below is the attached image, which shows what I want to achieve.

This my html code

<!-- My input box with menu -->
  <div class="d-flex flex-wrap">
    <div class="mt-1 mr-2">
      <app-add-mention-filter>
      </app-add-mention-filter>
    </div>

    <div class="pt-3 mr-2">
      <app-mention-action>
      </app-mention-action>
    </div>
  </div>


<!-- my mat tabs -->

      <mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="selectTab($event)">
        <!-- mention_view -->
        <mat-tab (click)="selectTab(0)" label="List View">
          <ng-template matTabContent>
            <div *ngIf="project && scopes && filterObj.projectId">
              <app-mention>
              </app-mention>
            </div>
          </ng-template>
        </mat-tab>
        <!-- dashboard_view -->
        <mat-tab (click)="selectTab(1)" label="Dashboard">
          <ng-template matTabContent>
            <app-custom-report>
            </app-custom-report>
          </ng-template>
        </mat-tab>
        <!-- bulk_view -->
        <mat-tab (click)="selectTab(2)" label="Bulk View">
          <ng-template matTabContent>
            <app-bulk-edit-mention>
            </app-bulk-edit-mention>
          </ng-template>
        </mat-tab>
    </mat-tab-group>

I want my content on the top to be placed on the right empty block.

Any help would be appreciated. Thanks

Answer 1

You can achieve that using HTML and css , I will use Bootstrap classes to show you that.

<div class="row">
    <div class="col">
        <!-- Your material tabs -->
    </div>
    <div class="col d-flex justify-content-end">
        <!-- Your search box -->
    </div>
</div>