Skip to content

Instantly share code, notes, and snippets.

@istupakov
Created June 7, 2017 16:38
Show Gist options
  • Save istupakov/454aae597b488077ac7b8f0b185d44fd to your computer and use it in GitHub Desktop.
Save istupakov/454aae597b488077ac7b8f0b185d44fd to your computer and use it in GitHub Desktop.
Angular 4 Markdown Component with Router Navigation.
import { Component, Input, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { markdown } from 'markdown';
@Component({
selector: 'markdown',
template: `<div [innerHtml]="html" #root></div>`
})
export class MarkdownComponent implements AfterViewInit {
@ViewChild('root') root: ElementRef;
html: string;
@Input()
set data(value: string) {
this.html = markdown.toHTML(value);
}
constructor(private router: Router) { }
ngAfterViewInit() {
let links: HTMLAnchorElement[] = this.root.nativeElement.querySelectorAll('a');
links.forEach(el => el.addEventListener('click', event => {
if (location.origin === (<any>el).origin) {
event.preventDefault();
this.router.navigateByUrl(el.getAttribute('href'));
}
}));
}
}
@tucq88
Copy link

tucq88 commented Oct 11, 2017

Styling this is kind of headache as /deep/ , >>> are deprecated and will be removed soon :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment