Ang-mark-down-editor NPM

Angular MarkDown Editor

A directive for MarkDown which can be used with text area to make text area compatible for mark down support.
It is developed using Angular >=7.1.0 and its newly introduced ng g library schematics.
Library location: projects/angular-mark-down-editor directory of this repository.

Examples/Demo

Live Demo Example

angular-mark-down-editor

Installation

npm i ang-mark-down-editor

API

import { AngularMarkDownEditorModule } from 'ang-mark-down-editor'; directive: MarkDownEditor

@Inputs()

Input	Type	Required	Description
appMarkDownEditor	boolean	Optional, default: true	use false to hide preview pannel

@Output()

Output	Type	Required	Description
valueChange	EventEmitter()	Optional	returns event object 'event: { markDown: any; html: any; }'

Usage

   // Module File
   import { AngularMarkDownEditorModule } from 'ang-mark-down-editor'

   @NgModule({ 
       imports: [AngularMarkDownEditorModule]
   })

   // Component File
   import { Component } from '@angular/core';

   @Component({
     selector: 'my-app',
     template: `<textarea appMarkDownEditor (valueChange)="onValueChange($event)"></textarea>` // [appMarkDownEditor]='false' In case of hide preview
   })
   export class AppComponent  {

      onValueChange(event: { markDown: any; html: any; }) {
       console.log(event.markDown); // this will print markdown which user entered
       console.log(event.html); // this will print html output for the markdown
     }
   }