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

ssougnez

import {
  AfterViewInit,
  Component,
  ComponentFactoryResolver,
  Input,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { HistoryEntry } from './history-entry.model';

ssougnez

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

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

ssougnez

import { Directive, Input } from '@angular/core';

@Directive({})
export class BaseHistoryEntryComponent<T> {
  @Input()
  public data: T;
}

ssougnez

public entries: HistoryEntry[] = [
  {
    type: 1,
    data: null,
  },
  {
    type: 2,
    data: '2021-10-09T15:32:15.456Z',
  },
  {

ssougnez

function foo() {
  console.log('Hello');

  bar();
}

function bar() {
  console.log('Good bye')
}