import { Component, Inject } from '@angular/core';
import { NX_MODAL_DATA, NxModalRef } from '@aposin/ng-aquila/modal';
import { DfInfoIconModalConfig } from './info-icon-modal.model';
@Component({
selector: 'df-info-icon-modal',
templateUrl: './info-icon-modal.component.html',
styleUrls: ['./info-icon-modal.component.scss'],
standalone: false
})
export class DfInfoIconModalComponent {
constructor(
@Inject(NX_MODAL_DATA) public config: DfInfoIconModalConfig,
private ref: NxModalRef<DfInfoIconModalComponent>
) {}
}
<div class="info-icon-modal">
<div class="info-icon-modal__header" *ngIf="config?.title">
<h1 nxHeadline size="xl">{{ config.title }}</h1>
</div>
<div class="info-icon-modal__body">
<p nxCopytext="normal" *ngIf="config?.infoText" class="info-icon-modal__body__paragraph">
{{ config.infoText }}
</p>
<div class="info-icon-modal__body__image" *ngIf="config?.image">
<img [src]="config.image || '' | talyNormalizeUrl" alt="" />
</div>
<p
nxCopytext="normal"
*ngIf="config?.additionalInfoText"
class="info-icon-modal__body__paragraph"
>
{{ config.additionalInfoText }}
</p>
</div>
</div>
.info-icon-modal {
display: flex;
flex-flow: column;
gap: 16px;
&__header {
h1 {
word-break: break-word;
}
}
&__body {
gap: 16px;
&__paragraph {
word-break: break-word;
}
&__image {
display: flex;
justify-content: center;
img {
max-width: 500px;
width: 100%;
}
}
}
}
Legend
Html element with directive