Show checkmark on step complete on nested wizard

[vcarrin1]

The code below works on the parent wizard, but doesn't trigger on the nested wizard. The parent wizard has steps that each load a component, then that component contains another wizard with its own steps. I want to mark the steps as completed with a checkmark.

<ng-template awWizardStepTitle let-wizardStep="wizardStep">
     <div>Title</div>
     <span *ngIf="wizardStep.completed" class="fa fa-check pl-2" [style.color]="'#393'" size="lg"></span>
</ng-template>

// parent wizard
<aw-wizard #parentWizard navBarLocation="left" navBarLayout="large-empty-symbols" [awNavigationMode] 
       navigateForward="deny" navigateBackward="allow">
      <aw-wizard-step>
        <ng-template awWizardStepTitle>
          <div>Pipeline Type</div>
        </ng-template>
        <child-component></child-component>
      </aw-wizard-step>
</aw-wizard>

// child component / nested wizard (this doesn't work)
<aw-wizard #wizard navBarLayout="small" navBarLocation="" [disableNavigationBar]="true" class="wizard-container ver">
   <aw-wizard-step stepTitle="Details 1" [navigationSymbol]="{ symbol: '1' }">
      <ng-template awWizardStepTitle let-wizardStep="wizardStep">
         <span *ngIf="wizardStep.completed" class="fa fa-check pl-2" [style.color]="'#393'" size="lg"></span>
      </ng-template>
      <!-- content here -->
  </aw-wizard-step>
  <aw-wizard-step stepTitle="Details 2" [navigationSymbol]="{ symbol: '2' }">
      <ng-template awWizardStepTitle let-wizardStep="wizardStep">
         <span *ngIf="wizardStep.completed" class="fa fa-check pl-2" [style.color]="'#393'" size="lg"></span>
      </ng-template>
      <!-- content here -->
  </aw-wizard-step>
</aw-wizard>