Управление положением элемента вкладыша в угловом положении

Question

Я пытаюсь достичь следующего результата с помощью компонента вкладки угловой материал:

То, что я до сих пор безуспешно пытался использовать свойство flex с margin-left: auto, которое должно толкать определенный элемент до упора вправо.

Добавление сюда моего кода:

<mat-tab-group>
  <mat-tab label="Top 5"></mat-tab>
  <mat-tab label="All Drivers"> Content 2</mat-tab>
  <mat-tab style="margin-left: auto" label="All Drivers"> Content 3</mat-tab>
</mat-tab-group>

В инструменте проверки мне удалось добиться этого с помощью margin-left: auto, но нев файле CSS.

Есть предложения?

Answer 1

Вы можете использовать следующий класс CSS в вашем style.css файле: StackBlitz

.mat-tab-label:last-child {
  margin-left: auto; 
}

Answer 2

Вы можете использовать :: ng-deep, это зависит от того, какую версию вы используете.
(в Angular 8 это не рекомендуется)

::ng-deep .mat-tab-label:last-child {
  padding-left: calc(50%) !important; 
}