libs/core/dynamic-form/switcher/src/switcher.component.ts
| selector | df-switcher | 
| styleUrls | ./switcher.component.scss | 
| templateUrl | ./switcher.component.html | 
| Properties | 
| control | 
| Default value : input<UntypedFormControl>(new UntypedFormControl()) | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:21 | 
| SwitcherLabelPosition | 
| Default value : SwitcherLabelPosition | 
| SwitcherSize | 
| Default value : SwitcherSize | 
| aclResource | 
| Type : string | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:56 | 
| componentOrControlInitFinished | 
| Default value : new ReplaySubject<AbstractControl | undefined>(1) | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:103 | 
| This ReplaySubject is provided to emit the control once it is initialized. | 
| config | 
| Type : InputSignal<C> | 
| Default value : input.required<C>() | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:64 | 
| The configuration object for this formfield. Note that derived formfield components should extend the  | 
| formAclPath | 
| Default value : input<string>() | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:89 | 
| Readonly formEvent | 
| Default value : output<DfEventPayload>() | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:98 | 
| Emits when events associated to the form control happen. The emitted object contains the data necessary to uniquely identify the event (field id and event type). It also contains the event data. | 
| isRetailChannel | 
| Default value : input<boolean>() | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:91 | 
| validationConfigs | 
| Default value : input<ValidationConfig[] | undefined>() | 
| Inherited from          DfBaseComponent | 
| Defined in          DfBaseComponent:87 | 
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import { Component, DoCheck, input, OnInit, inject } from '@angular/core';
import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { ErrorStateMatcher } from '@allianz/ng-aquila/utils';
import { DfSwitcherConfig, SwitcherLabelPosition, SwitcherSize } from './switcher.model';
@Component({
  selector: 'df-switcher',
  styleUrls: ['./switcher.component.scss'],
  templateUrl: './switcher.component.html',
  standalone: false
})
export class DfSwitcherComponent
  extends DfBaseComponent<DfSwitcherConfig>
  implements OnInit, DoCheck
{
  private readonly _parentForm = inject(NgForm, { optional: true });
  private readonly _parentFormGroup = inject(FormGroupDirective, { optional: true });
  private readonly errorStateMatcher = inject(ErrorStateMatcher);
  override control = input<UntypedFormControl>(new UntypedFormControl());
  SwitcherLabelPosition = SwitcherLabelPosition;
  SwitcherSize = SwitcherSize;
  protected errorState = false;
  override ngOnInit() {
    super.ngOnInit();
    this.emitFormControlEventOnValueChanges();
  }
  ngDoCheck(): void {
    if (this.control()) {
      // We follow the Aquila approach with the ErrorStateMatcher here:
      // We need to re-evaluate this on every change detection cycle, because there are some
      // error triggers that we can't subscribe to (e.g. parent form submissions). This means
      // that whatever logic is in here has to be super lean or we risk destroying the performance.
      const newErrorState = this.errorStateMatcher.isErrorState(
        this.control(),
        this._parentFormGroup || this._parentForm
      );
      if (this.errorState !== newErrorState) {
        this.errorState = newErrorState;
      }
    }
  }
}
<ng-container *aclTag="aclResource">
  <div class="df-switcher__container">
    <nx-switcher
      [formControl]="control()"
      [id]="config().id"
      [labelPosition]="config().labelPosition || SwitcherLabelPosition.Left"
      [big]="config().size === SwitcherSize.Large"
      [attr.data-testid]="config().testId"
      (focusout)="emitFormEvent('onBlurEvent', control().value)"
    >
      <span nxCopytext>
        <span>{{ config().label | interpolateFromStore | async }}</span>
        <br />
        <span>{{ config().hint | interpolateFromStore | async }}</span>
      </span>
    </nx-switcher>
    @if (config().infoIcon) {
    <df-info-icon [config]="config().infoIcon"></df-info-icon>
    }
  </div>
  <div>
    @if (this.errorState) {
    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="validationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>
    } @if (config().note && !this.errorState) {
    <nx-message context="info">
      <span>{{ config().note | interpolateFromStore | async }}</span>
    </nx-message>
    }
  </div>
</ng-container>
                    ./switcher.component.scss
                
:host {
  display: block;
}
.df-switcher__container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 8px;
}
.df-info-icon {
  // Used to compensate the icon top position with the switcher
  position: relative;
  top: 2px;
}