Как изменить положение кнопки в дочернем компоненте, который используется в родительском компоненте?

Question

У меня есть шаговый (родительский) компонент с предыдущей кнопкой. Я хочу изменить стили этой кнопки на четвертом шаге моего степпера.

<div class="container">
    <mat-horizontal-stepper
        class="mat-stepper"
        #stepper
        labelPosition="bottom"
        [selectedIndex]="currentStep"
        (selectionChange)="onStepChange($event)"
        [linear]="true"
    >
        <mat-step #step1 [completed]="step1.interacted || 0 < currentStep" [stepControl]="stepConfirmation.formGroup">
            <ng-template matStepLabel>Contact Info</ng-template>
            <fo-new-customer-confirmation-info #stepConfirmation></fo-new-customer-confirmation-info>
        </mat-step>
        <mat-step #step2 [completed]="step2.interacted || 1 < currentStep" [stepControl]="stepBusiness.formGroup">
            <ng-template matStepLabel>Business Info</ng-template>
            <fo-new-customer-business-info #stepBusiness></fo-new-customer-business-info>
        </mat-step>
        <mat-step #step3 [completed]="step3.interacted || 2 < currentStep" [stepControl]="stepApplicant.formGroup">
            <ng-template matStepLabel>Applicant Info</ng-template>
            <fo-new-customer-applicant-info #stepApplicant></fo-new-customer-applicant-info>
        </mat-step>
        <mat-step #step4 [completed]="step4.interacted || 3 < currentStep" [stepControl]="stepFinancial.formGroup">
            <ng-template matStepLabel>Financial Review</ng-template>
            <fo-new-customer-financial-review-info class="financial-step" #stepFinancial></fo-new-customer-financial-review-info>
        </mat-step>
    </mat-horizontal-stepper>
    <footer class="row">
        <div
            class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 d-flex flex-column-reverse flex-sm-row justify-content-sm-between">
            <button
                class="previous-stepper-button"
                mat-button
                mat-flat-button
                *ngIf="stepper.selectedIndex !== 0"
                (click)="preview()"
                color="accent">
                Previous
            </button>
            <button
                class="mb-3 mb-sm-0 ml-auto"
                mat-button
                mat-flat-button
                color="primary"
                [ladda]="isDataUploading"
                *ngIf="stepper.selectedIndex !== stepper.steps?.length-1"
                (click)="next()">
                Next
            </button>
        </div>
    </footer>
</div>

Я хочу изменить стили, когда нахожусь на четвертом шаге () Как это сделать?

Answer 1

Определите CSS классы для стилизации кнопок так, как вы хотите.

.common-step-button { 
  // ...
}

.last-step-button {
  // ...
}

Затем используйте директиву ngClass, чтобы применить динамические c классы к компоненту. Как я вижу, у вас уже есть условие, чтобы проверить, является ли текущий шаг последним или нет, поэтому

<button [ngClass]="{
   'common-step-button': !step4.interacted && 3 >= currentStep,
   'last-step-button': step4.interacted || 3 < currentStep
}">
   Button
</button>

Классы будут применяться динамически.
Для получения дополнительной информации, проверьте ngClass документация