ssougnez

if (element.tagName === 'A') {
  const href: string = element.href?.toLowerCase();

  if (href?.startsWith(location.origin.toLowerCase())) {
    element.addEventListener('click', (e: MouseEvent) => {
      this._router.navigate([href.substring(location.origin.length)]);
      e.preventDefault();
    });
  }
}

ssougnez

const descandants = this._elementRef.nativeElement.querySelectorAll('*');

for (const element of descandants) {
  element.setAttribute(this._uniqueId, '');

  ...
}

ssougnez

this._elementRef.nativeElement.innerHTML = this.html;

ssougnez

this._uniqueId ||= [...this._elementRef.nativeElement.attributes].find(
  (attr) => attr.name.startsWith('_ngcontent-')
).name;

ssougnez

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[html]',
})
export class HtmlDirective implements OnChanges {
  private _uniqueId: string;

  @Input()

ssougnez

@Component({
  selector: 'app-main',
  template: `<div [innerHTML]="content"></div>`,
  styles: ['.bold { font-weight: bold; }'],
})
export class MainComponent {
  public content: string = `<p class="bold">I'm the main component</p>
                            <p><a href="/hello">Hello</a></p>
                            <p><a href="https://angular-rxe6rp.stackblitz.io/bye">Bye</a></p>
                            <p><a href="https://www.medium.com">Medium</a></p>`;

ssougnez

<div *ngFor="let entry of entries">
  <generic-history-entry [entry]="entry"></generic-history-entry>
</div>

ssougnez

import {
  AfterViewInit,
  Component,
  ComponentFactoryResolver,
  Input,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { BaseHistoryEntryComponent } from './base-history-entry.component';
import { GetHistoryEntryComponent } from './history-entry-type.decorator';

ssougnez

import { Component } from '@angular/core';
import { BaseHistoryEntryComponent } from './base-history-entry.component';
import { HistoryEntryComponent } from './history-entry-type.decorator';

@Component({
  selector: 'workflow-ended-history-entry',
  template: `<div>The workflow took {{ data | number }}ms to complete</div>`,
})
@HistoryEntryComponent(3)
export class WorkflowEndedHistoryEntryComponent extends BaseHistoryEntryComponent<number> {}

ssougnez

let _bag = new Map<number, any>();

export function HistoryEntryComponent(type: any) {
  return function (cls: any) {
    _bag.set(type, cls);
  };
}

export function GetHistoryEntryComponent(type: number) {
  return _bag.get(type);