Различные Html-теги основаны на условии или повторном использовании структуры

Question

Здравствуйте, сейчас я работаю с Angular Materials Steppers. Я хочу изменить свой горизонтальный степпер на вертикальный степпер на более низкой ширине экрана. Мой текущий подход использует 2 ngif, но тогда все внутри моих степперов избыточно. Есть ли способ изменить тег html с

<mat-horizontal-stepper>

до

<mat-vertical-stepper>

или повторно использовать внутреннюю часть моих степперов

<mat-horizontal-stepper>
 <!-- html-Stuff-->
</mat-horizontal-stepper>

<mat-vertical-stepper>
 <!--the same html-Stuff-->
</mat-vertical-stepper>

Я бы не хотел делать дополнительный компонент только для степперов

Answer 1

Вместо того, чтобы вставлять один и тот же HTML-код снова и снова, сделайте его template, и вы можете использовать ng-container ngTemplateOutlet ng-template:

<mat-horizontal-stepper>
    <!-- html-Stuff-->
    <ng-container *ngTemplateOutlet="stepperContent"></ng-container>
</mat-horizontal-stepper>

<mat-vertical-stepper>
    <!--the same html-Stuff-->
    <ng-container *ngTemplateOutlet="stepperContent"></ng-container>
</mat-vertical-stepper>


<ng-template #stepperContent>
    <!-- html-Stuff-->
</ng-template>