I have here a custom input component. This input component will be used on two different pages. I thought that I can abstract this input component to reusing it. But depending on the page, the style is a bit different:

On Page 1: The Input component is horizontal designed, without a headline and a full button

On Page 2: The Input component is more vertically designed with some additional headline and a primary button

I defined an Input() variable horizontalStyle, which will be used as a bool to know, which style is required. As you can see in the following, I check multiple times the variable this.horizontalStyle to either choose between css classes or within an *ngIf. What is here the best practice? Use instead 2 different ng-template with some duplicate html, use it as it is currently or a completely other solution?

<tile [ngClass]="this.horizontalStyle ? 'tile-horizontal' : 'tile-vertical'">
  <form [formGroup]='calculationInputForm' (ngSubmit)='passSubmitData(candyName, isChocolate)'>
    <div class="tile_container_default"
         [ngClass]="this.horizontalStyle ? 'tile-horizontal-container' : 'tile_vertical_container'">
      <headline class="tile_headline" *ngIf="!horizontalStyle">
        <span>Candy Selection</span>
      </headline>
      <text-input style="width: 270px" [value]='candyName' (change)='changeInputCandyName($event)'
                      id='inputCandyName' label="CandyName" formControlName="candyName">
      </text-input>
      <switch [checked]='isChocolate' (change)='toggleChocolate()' formControlName="Chocolate">
        check if choco
      </switch>
      <button *ngIf="this.horizontalStyle" [disabled]='calculationInputForm.invalid' type="submit" text="Calculate"
                  (submit)=passSubmitData(candyName,isChocolate)></button>
    </div>
    <ng-container *ngIf="!this.horizontalStyle">
      <div style="width: 100%; display: flex; flex-direction: column">
        <hr>
        <button [disabled]='calculationInputForm.invalid' type="submit" variant="text"
                    text="Check" color="primary"
                    (submit)=passSubmitData(candyName,isChocolate)>
        </button>
      </div>
    </ng-container>
  </form>
</tile>