File

src/app/components/utilities/text-sub-paragraph/text-sub-paragraph.component.ts

Description

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).

Metadata

Index

Properties
Inputs

Inputs

subPar
Type : SubParagraph
Default value : new SubParagraph(SubParagraphRoot.BR, '')

The SubParagraph entity to display.

Properties

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 */
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""