Based on the Adam's solution you can implement a custom directive along with the pipe and re-insert scripts into the DOM. This would account for both cases: inline scripts and src scripts. Keep in mind that allowing scripts like so is very dangerous.

Pipe:

import { Pipe, PipeTransform } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser';



@Pipe({ name: 'safeHtml' })

export class SafeHtmlPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) { }



    transform(html) {

        return this.sanitizer.bypassSecurityTrustHtml(html);

    }

}

Directive:

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



@Directive({ selector: '[runScripts]' })

export class RunScriptsDirective implements OnInit {

    constructor(private elementRef: ElementRef) { }

    ngOnInit(): void {

        setTimeout(() => { // wait for DOM rendering

            this.reinsertScripts();

        });

    }

    reinsertScripts(): void {

        const scripts = <HTMLScriptElement[]>this.elementRef.nativeElement.getElementsByTagName('script');

        const scriptsInitialLength = scripts.length;

        for (let i = 0; i < scriptsInitialLength; i++) {

            const script = scripts[i];

            const scriptCopy = <HTMLScriptElement>document.createElement('script');

            scriptCopy.type = script.type ? script.type : 'text/javascript';

            if (script.innerHTML) {

                scriptCopy.innerHTML = script.innerHTML;

            } else if (script.src) {

                scriptCopy.src = script.src;

            }

            scriptCopy.async = false;

            script.parentNode.replaceChild(scriptCopy, script);

        }

    }

}

Usage:

<div [innerHTML]=myDynamicMarkup | safeHtml runScripts></div>