const isAbsolute = new RegExp('(?:^[a-z][a-z0-9+.-]*:|\/\/)', 'i');
export class MainComponent implements OnInit, OnDestroy {
  private listenObj: any;

  @ViewChild('postDiv', {static: false})
  private postDiv: MarkdownComponent;
constructor(private markdownService: MarkdownService, private renderer: Renderer2, private router: Router,) { }

  public onMarkdownLoad() {
    // because MarkdownComponent isn't 'compiled' the links don't use the angular router,
    // so I'll catch the link click events here and pass them to the router...
    if (this.postDiv) {
      this.listenObj = this.renderer.listen(this.postDiv.element.nativeElement, 'click', (e: Event) => {
        if (e.target && (e.target as any).tagName === 'A') {
          const el = (e.target as HTMLElement);
          const linkURL = el.getAttribute && el.getAttribute('href');
          if (linkURL && !isAbsolute.test(linkURL)) {
            e.preventDefault();
            this.router.navigate([linkURL]);
          }
        }
      });
    }
  }

  ngOnInit() {  }

  ngOnDestroy(): void {
    if (this.listenObj) {
      this.listenObj();
    }
  }

}

import {RouterLink} from '@angular/router';
// code...

export class MarkdownComponent {
    // code...

    @HostBinding('attr.routerLink') dynamicRouterLink = new RouterLink(this.elementRef);
    

}

import { ElementRef, Injectable } from '@angular/core';
import { Router } from '@angular/router';

const WIRED_LINK_ATTRIBUTE = '_ngx_markdown_rewired_link';

/**
 * !!! HERE BE DRAGONS !!!
 * @hack in order to support local links created from markdown rather than shipping the entire angular compiler just
 * to compile a <a [routerLink]=""> directive, instead we attach a custom event handler to dispatch a router navigation
 * event.
 * This is truly awful and if a better solution exists, slay this beast! Maybe the Ivy compiler will be our saviour?
 */
@Injectable({ providedIn: 'root' })
export class LinkHandlerService {
  constructor(private router: Router) {}

  private linkShouldBeWired(link: HTMLAnchorElement): boolean {
    const attributeNames = link.getAttributeNames();

    const isAngularLink = attributeNames.some(n => n.startsWith('_ngcontent'));
    const isAlreadyWired = attributeNames.some(n => n === WIRED_LINK_ATTRIBUTE);

    return !isAngularLink && !isAlreadyWired && link.getAttribute('href').startsWith('/');
  }

  public wireInsertedLinks(element: ElementRef): void {
    const allLinks: HTMLAnchorElement[] = Array.from(element.nativeElement.getElementsByTagName('a'));

    allLinks.filter(this.linkShouldBeWired).forEach(link => {
      link.addEventListener('click', $event => {
        $event.preventDefault();
        this.router.navigateByUrl(link.getAttribute('href'));
      });

      link.setAttribute(WIRED_LINK_ATTRIBUTE, '');
    });
  }
}

import { LocationStrategy } from '@angular/common';
import { Injectable } from '@angular/core';
import { ActivatedRoute, Router, UrlTree } from '@angular/router';

/**
 * Service to handle links generated through markdown parsing.
 * The following `RouterModule` configuration is required to enabled anchors
 * to be scrolled to when URL has a fragment via the Angular router:
 * ```
 * RouterModule.forRoot(routes, {
 *  anchorScrolling: 'enabled',           // scrolls to the anchor element when the URL has a fragment
 *  scrollOffset: [0, 64],                // scroll offset when scrolling to an element (optional)
 *  scrollPositionRestoration: 'enabled', // restores the previous scroll position on backward navigation
 * })
 * ```
 * _Refer to [Angular Router documentation](https://angular.io/api/router/ExtraOptions#anchorScrolling) for more details._
 */
@Injectable({ providedIn: 'root' })
export class AnchorService {

  constructor(
    private locationStrategy: LocationStrategy,
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  /**
   * Intercept clicks on `HTMLAnchorElement` to use `Router.navigate()`
   * when `href` is an internal URL not handled by `routerLink` directive.
   * @param event The event to evaluated for link click.
   */
  interceptClick(event: Event) {
    const element = event.target;
    if (!(element instanceof HTMLAnchorElement)) {
      return;
    }
    const href = element.getAttribute('href');
    if (this.isExternalUrl(href) || this.isRouterLink(element)) {
      return;
    }
    this.navigate(href);
    event.preventDefault();
  }

  /**
   * Navigate to URL using angular `Router`.
   * @param url Destination path to navigate to.
   * @param replaceUrl If `true`, replaces current state in browser history.
   */
  navigate(url: string, replaceUrl = false) {
    const urlTree = this.getUrlTree(url);
    this.router.navigated = false;
    this.router.navigateByUrl(urlTree, { replaceUrl });
  }

  /**
   * Transform a relative URL to its absolute representation according to current router state.
   * @param url Relative URL path.
   * @return Absolute URL based on the current route.
   */
  normalizeExternalUrl(url: string): string {
    if (this.isExternalUrl(url)) {
      return url;
    }
    const urlTree = this.getUrlTree(url);
    const serializedUrl = this.router.serializeUrl(urlTree);
    return this.locationStrategy.prepareExternalUrl(serializedUrl);
  }

  /**
   * Scroll view to the anchor corresponding to current route fragment.
   */
  scrollToAnchor() {
    const url = this.router.parseUrl(this.router.url);
    if (url.fragment) {
      this.navigate(this.router.url, true);
    }
  }

  private getUrlTree(url: string): UrlTree {
    const urlPath = this.stripFragment(url) || this.stripFragment(this.router.url);
    const urlFragment = this.router.parseUrl(url).fragment;
    return this.router.createUrlTree([urlPath], { relativeTo: this.route, fragment: urlFragment });
  }

  private isExternalUrl(url: string): boolean {
    return /^(?!http(s?):\/\/).+$/.exec(url) == null;
  }

  private isRouterLink(element: HTMLAnchorElement): boolean {
    return element.getAttributeNames().some(n => n.startsWith('_ngcontent'));
  }

  private stripFragment(url: string): string {
    return /[^#]*/.exec(url)[0];
  }
}

RouterModule.forRoot(routes, {
  anchorScrolling: 'enabled', // scrolls to the anchor element when the URL has a fragment
  scrollOffset: [0, 64],  // scroll offset when scrolling to an element (optional)
  scrollPositionRestoration: 'enabled', // restores the previous scroll position on backward navigation
})

@HostListener('document:click', ['$event'])
onDocumentClick(event: Event) {
  this.anchorService.interceptClick(event);
}

constructor(
  private anchorService: AnchorService,
) { }

export function markedOptionsFactory(anchorService: AnchorService): MarkedOptions {
  const renderer = new MarkedRenderer();

  // fix `href` for absolute link with fragments so that _copy-paste_ urls are correct
  renderer.link = (href, title, text) => {
    return MarkedRenderer.prototype.link.call(renderer, anchorService.normalizeExternalUrl(href), title, text);
  };

  return { renderer };
}

MarkdownModule.forRoot({
  loader: HttpClient,
  markedOptions: {
    provide: MarkedOptions,
    useFactory: markedOptionsFactory,
    deps: [AnchorService],
  },
}),

import { Directive, EventEmitter, Output, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[elementReady]'
})
export class ElementReadyDirective implements AfterViewInit {
  @Output() initEvent: EventEmitter<any> = new EventEmitter();

  constructor() {}

  ngAfterViewInit() {
    this.initEvent.emit();
  }
}

import { MarkedRenderer } from 'ngx-markdown';

export class MarkdownRenderer extends MarkedRenderer {

    public link(href: string | null, title: string | null, text: string): string {
        return `<a routerLink="${href || ''}">${text}</a>`;
    }
}

import {
  Directive,
  ElementRef,
  Injector,
  ApplicationRef,
  ComponentFactoryResolver,
  Component,
  Input,
  Inject,
  HostListener
} from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  template: '<a [routerLink]="href">{{text}}</a>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RouterLinkComponent {
  @Input() public href: string;
  @Input() public text: string;
}

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: 'markdown,[markdown]'
})
export class ConvertLinksDirective {

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private injector: Injector,
    private applicationRef: ApplicationRef,
    private componentFactoryResolver: ComponentFactoryResolver,
    private element: ElementRef<HTMLElement>
  ) { }

  @HostListener('ready')
  public processAnchors() {
    this.element.nativeElement.querySelectorAll(
      'a[routerLink]'
    ).forEach(a => {
      const parent = a.parentElement;
      if (parent) {
        const container = this.document.createElement('span');
        const component = this.componentFactoryResolver.resolveComponentFactory(
          RouterLinkComponent
        ).create(this.injector, [], container);
        this.applicationRef.attachView(component.hostView);
        component.instance.href = a.getAttribute('routerLink') || '';
        component.instance.text = a.textContent || '';
        parent.replaceChild(container, a);
      }
    });
  }
}

import { Injectable } from "@angular/core";
import { ActivatedRoute, Router, UrlTree } from "@angular/router";

@Injectable({
  providedIn: "root",
})
export class BsMarkdownAnchorService {
  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
  ) {
  }

  isExternalUrl(href: string | null): boolean {
    return !href
      || href.startsWith("http:")
      || href.startsWith("https:")
      || href.startsWith("mailto:")
      || href.startsWith("tel:")
      || href.startsWith("/");
  }

  stripQuery(url: string): string {
    return /[^?]*/.exec(url)[0];
  }

  stripFragmentAndQuery(url: string): string {
    return this.stripQuery(/[^#]*/.exec(url)[0]);
  }

  getUrlTree(url: string): UrlTree {
    const urlPath = this.stripFragmentAndQuery(url) || this.stripFragmentAndQuery(this._router.url);
    const parsedUrl = this._router.parseUrl(url);
    const fragment = parsedUrl.fragment;
    const queryParams = parsedUrl.queryParams;
    return this._router.createUrlTree([urlPath], { relativeTo: this._route, fragment, queryParams });
  }

  navigate(url: string, replaceUrl = false) {
    const urlTree = this.getUrlTree(url);
    this._router.navigated = false;
    this._router.navigateByUrl(urlTree, { replaceUrl });
  }

  interceptClick(event: Event) {
    const element = event.target;
    if (!(element instanceof HTMLAnchorElement)) {
      return;
    }

    const href = element.getAttribute("href");
    if (this.isExternalUrl(href)) {
      return;
    }

    this.navigate(`/${href}`);
    event.preventDefault();
  }
}

  @HostListener("click", ["$event"])
  onDocumentClick(event: Event) {
    this._anchorService.interceptClick(event);
  }

@Directive({
    // tslint:disable-next-line: directive-selector
    selector: 'markdown,[markdown]'
})
export class ConvertMarkdownLinksDirective {
    constructor(private _router: Router, private _element: ElementRef<HTMLElement>) {}

    // unable to use the standard technique involving ActivatedRoute
    @HostListener('ready')
    processAnchors() {
        const isAbsolute = new RegExp('(?:^[a-z][a-z0-9+.-]*:|//)', 'i');
        this._element.nativeElement.querySelectorAll('a').forEach(a => {
            const linkURL = a.getAttribute && a.getAttribute('href');
            if (linkURL) {
                if (isAbsolute.test(linkURL)) {
                    a.target = '_blank';
                } else {
                    a.addEventListener('click', e => {
                        e.preventDefault();
                        const url = new URL(window.location.href);
                        const path = url.pathname;
                        const pathParts = path.split('/').filter(p => !!p);
                        const linkParts = linkURL.split('/').filter(p => !!p);
                        while (linkParts[0] === '..') {
                            linkParts.shift();
                            pathParts.pop();
                        }
                        let newPath = '/' + [...pathParts, ...linkParts].join('/') + '/';
                        const linkRest = linkURL.split('?')[1];
                        if (linkRest) {
                            newPath += `?${linkRest}`;
                        }
                        this._router.navigateByUrl(newPath);
                    });
                }
            }
        });
    }
}

import { Directive, HostListener } from "@angular/core"

/**
 * Handle click events on HTML elements inside a safe HTML content projection.
 * 
 * @example
 * ```html
 * <div [innerHtml]="..." appSafeHTMLClickHandler></div>
 * ```
 */
@Directive({
  selector: "[appSafeHTMLClickHandler]",
})
export class SafeHTMLClickDirective {
  constructor() {}

  /**
   * Listener for click events in any HTMLElement.
   */
  @HostListener("click", ["$event"])
  onClick($event: MouseEvent) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const target = $event.target as any

    switch ($event.target.constructor) {
      case HTMLAnchorElement:
        $event.preventDefault()
        this.handleAnchorElement(target)
        // add even more handlers for different stuff you want to do on an anchor element
        break
      // or add even more handlers
    }
  }

  /**
   * Handle anchor element click
   */
  private async handleAnchorElement(target: HTMLAnchorElement): Promise<void> {
    // for example: if starts with `mailto:` exec function to open native client
    // or if no protocol and url is in router navigate to internal route
    // ANY Angular/Ionic/Capacitor stuff will work here
  }
}