required-standard.component.html

<ng-template [ngTemplateOutlet]="isEditing ? editRs : viewRs" [ngTemplateOutletContext]="{ data: form }"></ng-template>

<ng-template #viewRs let-data="data">
  <h1>View me</h1>
</ng-template>

<ng-template #editRs let-data="data">
  <ng-container *ngIf="requiredStandard">
    <div class="govuk-grid-row govuk-!-margin-bottom-5">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Required Standard Details</h1>
        <span class="govuk-caption-m">{{ requiredStandard.sectionDescription }}</span>
        <h2 class="govuk-heading-s">{{ requiredStandard.refCalculation }} - {{ requiredStandard.sectionDescription }}: {{ requiredStandard.requiredStandard }}</h2>
        <app-tag *ngIf="requiredStandard.prs" id="prs-display" [type]="'blue'">PRS</app-tag>
      </div>
    </div>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-full">
        <ng-container [formGroup]="form">
          <app-text-area name="additionalNotes" label="Additional Notes" formControlName="additionalNotes"></app-text-area>

          <div class="govuk-form-group">
            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
              <div class="govuk-checkboxes__item">
                <input class="govuk-checkboxes__input" id="prs" type="checkbox" [checked]="requiredStandard.prs" (change)="toggleRsPrsField()" />
                <label class="govuk-label govuk-checkboxes__label" for="prs"> Defect repaired during test</label>
              </div>
            </div>
          </div>

          <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
              <app-button-group>
                <app-button id="confirm-requierdStandard" (clicked)="handleSubmit()">Confirm</app-button>
                <app-button *ngIf="index || index === 0" id="remove-requiredStandard" design="warning" (clicked)="handleRemove()"
                  >Remove Required Standard</app-button
                >
                <app-button id="remove-nav-back" design="link" (clicked)="navigateBack()">Cancel</app-button>
              </app-button-group>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </ng-container>
</ng-template>