SimpleHtmlComponent class

A component that allows the inclusion of some limited HTML in a safe way. This is ideal if you have internationalized messages with simple inline HTML. It is generally much preferable to using bypassSecurityTrustHtml, which disables all sanitization.

The specific subset of HTML that is permitted is:

  • <a> with href pointing to a same-origin URL or a permitted external URL (see simpleHtmlUriWhitelist) and (optionally) class, rel, or target attributes. If target is set, rel must also be set and must contain noopener (see https://mathiasbynens.github.io/rel-noopener/ for background).
  • <span> <b>, <br>, <em>, and <i> with (optionally) a class attribute.

Note that any styles applied with the class attribute will need to be annotated with ::ng-deep (or equivalent mechanism) in order to actually reach the content elements.

Prohibited HTML (including invalid elements, attributes, or URLs) will blank the entire component and print a loud log message.

If the attribute doNotVerifyUrlDestinations is present, external URLs will not be verified, except for their URI scheme. This is flag should only ever be used for URLs that come from a safe source, such as internal documentation.

If the (trigger) output is bound, anchor elements with the sentinel class "trigger" will send an event to this output. The event is the original Angular $event.

Annotations
  • @Component.new(selector: 'simple-html', template: '<span></span>', styleUrls: ['simple_html.scss.css'], changeDetection: ChangeDetectionStrategy.onPush)

Constructors

SimpleHtmlComponent(DomService domService, Element _element, @Optional.new() @Inject.new(simpleHtmlUriWhitelist) List<Uri>? domainWhitelist, @Attribute.new('doNotVerifyUrlDestinations') String? externalUrisAllowed)

Properties

contents ← String
HTML to display in the component.
no getterinherited
hashCode → int
The hash code for this object.
no setterinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
targetElement → Element?
The element into which the sanitized HTML should be injected.
no setter
trigger → Stream<UIEvent>
Propagates events from internal anchor elements with the class trigger sending the original angular event.
no setterinherited

Methods

ngOnDestroy() → void
Executed before the directive is removed from the DOM and destroyed.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited