libs/core/dynamic-form/headline/src/headline.component.ts
| selector | df-headline |
| styleUrls | ./headline.component.scss |
| templateUrl | ./headline.component.html |
Properties |
| control |
Default value : input(undefined)
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:16
|
| Readonly Headline |
Default value : HeaderType
|
| 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, 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
}}<ng-container *ngTemplateOutlet="infoicon"></ng-container>
</h1>
<h2
*ngSwitchCase="Headline.h2"
nxHeadline="{{ config().headerOption }}"
[class]="config().cssClasses"
>
{{ config().label | interpolateFromStore | async
}}<ng-container *ngTemplateOutlet="infoicon"></ng-container>
</h2>
<h3
*ngSwitchCase="Headline.h3"
nxHeadline="{{ config().headerOption }}"
[class]="config().cssClasses"
>
{{ config().label | interpolateFromStore | async
}}<ng-container *ngTemplateOutlet="infoicon"></ng-container>
</h3>
<h4
*ngSwitchCase="Headline.h4"
nxHeadline="{{ config().headerOption }}"
[class]="config().cssClasses"
>
{{ config().label | interpolateFromStore | async
}}<ng-container *ngTemplateOutlet="infoicon"></ng-container>
</h4>
<h5
*ngSwitchCase="Headline.h5"
nxHeadline="{{ config().headerOption }}"
[class]="config().cssClasses"
>
{{ config().label | interpolateFromStore | async
}}<ng-container *ngTemplateOutlet="infoicon"></ng-container>
</h5>
<h6
*ngSwitchCase="Headline.h6"
nxHeadline="{{ config().headerOption }}"
[class]="config().cssClasses"
>
{{ config().label | interpolateFromStore | async
}}<ng-container *ngTemplateOutlet="infoicon"></ng-container>
</h6>
<ng-template #infoicon>
<df-info-icon
*ngIf="config().infoIcon"
nxFormfieldAppendix
[config]="config().infoIcon"
></df-info-icon>
</ng-template>
</div>
</ng-container>
</ng-container>
./headline.component.scss
:host {
.dynamic-heading {
display: flex;
flex-direction: row;
}
df-info-icon {
::ng-deep {
padding-left: 8px;
display: inline-flex;
vertical-align: middle;
margin-top: -0.15em;
}
}
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;
}