title: How to change the position of button in child component that is used on parent component?
body: <p>I have a stepper (parent) component, that has previous button. I want to change styles of that button in the fourth step of my stepper.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;mat-horizontal-stepper
          class="mat-stepper"
          #stepper
          labelPosition="bottom"
          [selectedIndex]="currentStep"
          (selectionChange)="onStepChange($event)"
          [linear]="true"
      &gt;
          &lt;mat-step #step1 [completed]="step1.interacted || 0 &lt; currentStep" [stepControl]="stepConfirmation.formGroup"&gt;
              &lt;ng-template matStepLabel&gt;Contact Info&lt;/ng-template&gt;
              &lt;fo-new-customer-confirmation-info #stepConfirmation&gt;&lt;/fo-new-customer-confirmation-info&gt;
          &lt;/mat-step&gt;
          &lt;mat-step #step2 [completed]="step2.interacted || 1 &lt; currentStep" [stepControl]="stepBusiness.formGroup"&gt;
              &lt;ng-template matStepLabel&gt;Business Info&lt;/ng-template&gt;
              &lt;fo-new-customer-business-info #stepBusiness&gt;&lt;/fo-new-customer-business-info&gt;
          &lt;/mat-step&gt;
          &lt;mat-step #step3 [completed]="step3.interacted || 2 &lt; currentStep" [stepControl]="stepApplicant.formGroup"&gt;
              &lt;ng-template matStepLabel&gt;Applicant Info&lt;/ng-template&gt;
              &lt;fo-new-customer-applicant-info #stepApplicant&gt;&lt;/fo-new-customer-applicant-info&gt;
          &lt;/mat-step&gt;
          &lt;mat-step #step4 [completed]="step4.interacted || 3 &lt; currentStep" [stepControl]="stepFinancial.formGroup"&gt;
              &lt;ng-template matStepLabel&gt;Financial Review&lt;/ng-template&gt;
              &lt;fo-new-customer-financial-review-info class="financial-step" #stepFinancial&gt;&lt;/fo-new-customer-financial-review-info&gt;
          &lt;/mat-step&gt;
      &lt;/mat-horizontal-stepper&gt;
      &lt;footer class="row"&gt;
          &lt;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"&gt;
              &lt;button
                  class="previous-stepper-button"
                  mat-button
                  mat-flat-button
                  *ngIf="stepper.selectedIndex !== 0"
                  (click)="preview()"
                  color="accent"&gt;
                  Previous
              &lt;/button&gt;
              &lt;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()"&gt;
                  Next
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to change styles, when I am on the fourth step()
  How to do this?</p>