lux‐html v16

LUX-Html

• LUX-Html
  • Overview / API
    • Allgemein
    • @Input
    • @ViewChild
  • Classes / Interfaces
    • LuxSanitizeConfig
  • Beispiel

Overview / API

Allgemein

Wichtig! Bevor die Komponente verwendet werden kann, muss die Dependency "dompurify" in der package.json hinzugefügt werden.

Name	Beschreibung
import	LuxHtmlModule
selector	lux-html

@Input

Name	Typ	Beschreibung
luxData	string	Daten im Html-Format
luxSanitizeConfig	LuxSanitizeConfig	Über dieses Property kann das Sanitizing beeinflusst werden.
luxStyle	string	Über dieses Property können CSS-Styles gesetzt werden.
luxClass	string	Über dieses Property können CSS-Klassen gesetzt werden.

@ViewChild

Name	Typ	Beschreibung
contentRef	ElementRef	Referenz auf das Div mit dem Html-Inhalt.

Classes / Interfaces

LuxSanitizeConfig

Diese Klasse ermöglicht die Konfiguration beim Sanitizing.

Name	Typ	Beschreibung
allowedTags	string[]	Ein Array mit erlaubten Tags.
allowedAttrs	string[]	Ein Array mit erlaubten Attributen
addAllowedTags	string[]	Ein Array mit zusätzlich erlaubten Tags. D.h. Default-Tags plus die aus dem Array.
addAllowedAttrs	string[]	Ein Array mit zusätzlich erlaubten Attributen. D.h. Default-Attribute plus die aus dem Array.
forbiddenTags	string[]	Ein Array mit den verbotenen Tags.
forbiddenAttrs	string[]	Ein Array mit den Verbotenden Attributen.

Beispiel

Ts

htmlData = `<h1>Lorem ipsum</h1>
<p><b>Lorem ipsum</b> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
   dolore magna aliquyam erat, sed diam voluptua.
   <script>alert('Unsicher!!!!')</script>
   At vero eos et accusam et justo duo dolores et ea rebum.</p>

<p>Stet clita kasd gubergren, no sea takimata sanctus est <span style="color: red">Lorem ipsum</span> dolor sit amet.
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
   magna aliquyam erat, sed diam voluptua.</p>

<p>Schau doch mal bei der <a href="https://www.ihk-gfi.de" target="_blank">IHK-Gfi</a> vorbei. </p>`;

Html

<lux-card luxTitle="HTML">
  <lux-icon luxIconName="fab fa-html5"></lux-icon>
  <lux-card-content>
    <lux-html [luxData]="htmlData"></lux-html>
  </lux-card-content>
</lux-card>