TALY - The Allianz Library
  1. Components
  2. DfHeadlineComponent

File

libs/core/dynamic-form/headline/src/headline.component.ts

Extends

DfBaseComponent

Metadata

selector df-headline
styleUrls ./headline.component.scss
templateUrl ./headline.component.html

Index

Properties

Properties

control
Default value : input(undefined)
Inherited from DfBaseComponent
Defined in DfBaseComponent:16
Readonly Headline
Default value : HeaderType
Defined in libs/core/dynamic-form/headline/src/headline.component.ts:12
aclResource
Type : string
Inherited from DfBaseComponent
Defined in DfBaseComponent:56
componentOrControlInitFinished
Default value : new ReplaySubject<void>(1)
Inherited from DfBaseComponent
Defined in DfBaseComponent:116

Additionally to the controlChanged EventEmitter a ReplaySubject is provided. In difference to the EventEmitter, this one always contains the last emitted value, which allows to check if a component was initialized after the initialization already happened. (An event will be gone at that point in time.)
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 DfBaseConfig config interface as needed and expose that their own config interface.
Readonly controlChanged
Default value : output<AbstractControl | undefined>()
Inherited from DfBaseComponent
Defined in DfBaseComponent:101

Emits the AbstractControl associated with this formfield, once it has been fully configured (i.e. its initial value and validators have been added as per the config).

Applications that need to further process this AbstractControl (e.g. to add more validators) should therefore wait for this event to be emitted.
Public deferSetupControl
Default value : false
Inherited from DfBaseComponent
Defined in DfBaseComponent:126

By default, the AbstractControl is configured in ngOnInit(), however in some cases this causes an ExpressionChangedAfterItHasBeenCheckedError.

If this is set to true, the setup will not be run automatically. It is then the derived component's responsibility to run call setupFormControl() at the appropriate time.
formAclPath
Default value : input<string>()
Inherited from DfBaseComponent
Defined in DfBaseComponent:89
Readonly formEvent
Default value : output<DfEventPayload>()
Inherited from DfBaseComponent
Defined in DfBaseComponent:108

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, input } from '@angular/core';
import { DfHeadlineConfig, HeaderType } from './headline.model';

@Component({
  selector: 'df-headline',
  templateUrl: './headline.component.html',
  styleUrls: ['./headline.component.scss'],
  standalone: false
})
export class DfHeadlineComponent extends DfBaseComponent<DfHeadlineConfig> {
  readonly Headline = HeaderType;

  // Override some of the DfBaseComponent functionality
  // that is not needed in this component
  override control = input(undefined);
}

<ng-container *aclTag="aclResource">
  <ng-container [ngSwitch]="config().headerType" *ngIf="config().label">
    <div
      class="dynamic-heading"
      [attr.data-testid]="config().testId"
      [ngClass]="{
        'is-centered': isRetailChannel(),
        'is-retail': isRetailChannel()
      }"
    >
      <h1
        *ngSwitchCase="Headline.h1"
        nxHeadline="{{ config().headerOption }}"
        [class]="config().cssClasses"
      >
        {{ config().label | interpolateFromStore | async }}
      </h1>
      <h2
        *ngSwitchCase="Headline.h2"
        nxHeadline="{{ config().headerOption }}"
        [class]="config().cssClasses"
      >
        {{ config().label | interpolateFromStore | async }}
      </h2>
      <h3
        *ngSwitchCase="Headline.h3"
        nxHeadline="{{ config().headerOption }}"
        [class]="config().cssClasses"
      >
        {{ config().label | interpolateFromStore | async }}
      </h3>
      <h4
        *ngSwitchCase="Headline.h4"
        nxHeadline="{{ config().headerOption }}"
        [class]="config().cssClasses"
      >
        {{ config().label | interpolateFromStore | async }}
      </h4>
      <h5
        *ngSwitchCase="Headline.h5"
        nxHeadline="{{ config().headerOption }}"
        [class]="config().cssClasses"
      >
        {{ config().label | interpolateFromStore | async }}
      </h5>
      <h6
        *ngSwitchCase="Headline.h6"
        nxHeadline="{{ config().headerOption }}"
        [class]="config().cssClasses"
      >
        {{ config().label | interpolateFromStore | async }}
      </h6>
      <df-info-icon
        *ngIf="config().infoIcon"
        nxFormfieldAppendix
        [config]="config().infoIcon?.config"
        [modalConfig]="config().infoIcon?.modalConfig"
      ></df-info-icon>
    </div>
  </ng-container>
</ng-container>

./headline.component.scss 

:host {
  .dynamic-heading {
    display: flex;
    flex-direction: row;
  }

  df-info-icon {
    ::ng-deep {
      padding-left: 10px;
    }
  }

  h2 {
    margin-bottom: 24px;
  }

  h3 {
    margin-bottom: 16px;
  }

  .is-retail {
    h2 {
      margin-bottom: 48px;
    }

    h3 {
      margin-bottom: 32px;
    }
  }
}

.is-centered {
  justify-content: center;
  text-align: center;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""