Simple Markdown Editor with Angular2

mdeditor.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<textarea #simplemde></textarea>

mdeditor.ts

// Angular Imports
	import { Component, ElementRef, ViewChild } from '@angular/core';

// Declare Global Variable
	var SimpleMDE : any = require('simplemde');

// Define Editor Component
	@Component({
		selector: 'mdeditor',
		templateUrl: '/client/imports/ui/components/mdeditor/mdeditor.html',
	})

// Export Editor Class
	export class MDEditor {
		@ViewChild('simplemde') textarea : ElementRef;

		constructor(private elementRef:ElementRef) {
			super();
		}

		ngAfterViewInit(){
			var mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });
		}
	}

Thanks for posting. One correction: I think this line

var mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });

should use this.textarea.nativeElement. In my test app, elementRef was referring to the mdeditor directive, and SimpleMDE is expecting the textarea element within it. It does work as is because elementRef.nativeElement.value is undefined so it defaults to using the first textarea it finds. But if you try to put 2 editors on the same page, it runs into problems.

with the latest version (1.0.0.rc4)
var SimpleMDE : any = require('simplemde');

is causing

ERROR in .../..SomeComponent.ts (13,17): Cannot find name 'require'.) webpack: Failed to compile.

changed
var SimpleMDE : any = require('simplemde');
to

declare let require: any;
var SimpleMDE = require('simplemde/dist/simplemde.min.js');

But I still feel this is just a hack'y solution.