src/app/components/utilities/text-sub-paragraph/text-sub-paragraph.component.ts
Component used to display a SubParagraph entity.
Do note that those elements are designed with the existence of code injection
in mind and/or malicious content in mind. For instance, <a\> links are
designed to be always prefixed by the asset folder path and hence avoid any
kind of attacks and injection of link to another domain (or even the same
domain but with an unexpected path).
| selector | app-text-sub-paragraph |
| Standalone | true |
| imports |
CommonModule
|
| styleUrls | ./text-sub-paragraph.component.css |
| templateUrl | ./text-sub-paragraph.component.html |
Properties |
Inputs |
| subPar | |
Type : SubParagraph
|
|
Default value : new SubParagraph(SubParagraphRoot.BR, '')
|
|
|
The SubParagraph entity to display. |
|
| SubParagraphRoot |
Default value : SubParagraphRoot
|
|
The SubParagraphRoot enumeration, in a variable so that it can be used in html template. |
import { Component, Input } from '@angular/core';
import { SubParagraph } from '../../classes/subparagraph/subParagraph';
import { SubParagraphRoot } from 'src/app/enums/subParagraphRoot';
import { CommonModule } from '@angular/common';
/**
* Component used to display a {@link SubParagraph} entity.
*
* Do note that those elements are designed with the existence of code injection
* in mind and/or malicious content in mind. For instance, `<a\>` links are
* designed to be always prefixed by the asset folder path and hence avoid any
* kind of attacks and injection of link to another domain (or even the same
* domain but with an unexpected path).
*/
@Component({
selector: 'app-text-sub-paragraph',
templateUrl: './text-sub-paragraph.component.html',
styleUrls: ['./text-sub-paragraph.component.css'],
standalone: true,
imports: [CommonModule],
})
export class TextSubParagraphComponent {
/** The {@link SubParagraph} entity to display. */
@Input() subPar: SubParagraph = new SubParagraph(SubParagraphRoot.BR, '');
/**
* The {@link SubParagraphRoot} enumeration, in a variable so that it can be
* used in html template.
*/
SubParagraphRoot = SubParagraphRoot;
}
<span
*ngIf="subPar.root === SubParagraphRoot.SPAN"
[class.empty-content]="!subPar.content"
>{{ subPar.content }}</span
>
<br *ngIf="subPar.root === SubParagraphRoot.BR" />
<strong
*ngIf="subPar.root === SubParagraphRoot.STRONG_EM"
[class.empty-content]="!subPar.content"
><em>{{ subPar.content }}</em></strong
>
<a
*ngIf="subPar.root === SubParagraphRoot.A_ASSET"
[href]="'assets/' + subPar.assetHref"
>{{ subPar.content }}</a
>
./text-sub-paragraph.component.css
.empty-content {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}