Angular 2+ markdown to html using marked a markdown parser and compiler.


400.2.24 years ago4 years agoMinified + gzip package size for @ngx-markdown/core in KB



Angular 2+ markdown to html module using marked a markdown parser and compiler.


Get simple example demonstration usage from github repository by opening your command line and do the following:

git clone https://github.com/ngx-markdown/demo.git
cd demo
npm install && npm start

Open http://localhost:4200/ in your browser.


To install, run:

npm install --save @ngx-markdown/core


  1. In file ./example.module.ts ```typescript // external import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';

// @ngx import { MarkdownModule } from '@ngx-markdown/core';

// internal import { ExampleComponent } from './example.component';

@NgModule({ imports: [ // external CommonModule,

// internal
  // this options are defaults when use forChild().
  options: {
    gfm: true,
    tables: true,
    breaks: true,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
  // template while loading
  loadingTemplate: `<div> Loading ... </div>`

], declarations: [ ] }) export class ExampleModule { }

2. In file `./example.component.ts`

// external
import { Component, OnInit } from '@angular/core';

// internal

  selector: 'example-component',
  templateUrl: './example.component.html'
export class ExampleComponent implements OnInit {
  stringToTransform = `**my bold**
  options = {
    gfm: true,
    tables: false, // changed
    breaks: true,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
  interpolate = {
    language: 'I speak english'
  callback = (error: any, result: string) => {
    console.log(`callback`, error, result);
  getResult(event) {
    console.log(`result,`, event);
  constructor() { }

  ngOnInit() { }
  1. In file ./example.component.html ```html

my bold {{language}}

<ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback"> my bold link {{language}}

<ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback" [string]="stringToTransform" (result)="getResult($event)">

## Attributes

| Name | Type | Description |
| callback | ((error: any, parseResult: string) => void) \| undefined | Function called when the `string` or `ngxmarkdown` has been fully parsed.  |
| **interpolation** | Object \| undefined | Data property values to inject.  |
| ngxmarkdown (directive) | string | *"String of markdown source to be compiled."* |
| **options** | marked.MarkedOptions \| undefined | Marked options how to compile markdown `string`.  |
| string (component) | string | *"String of markdown source to be compiled."* |

## Events

| Name | Type | Description |
| result | string | It returns fully parsed markdown string. |

## Lifecycle Hooks

[Angular Lifecycle Hooks](https://angular.io/guide/lifecycle-hooks)

When property `change` is set, its setter calls `markdownToHtml()` method to compile markdown string.

**ngAfterViewInit()**: When input property `string` is `undefined`, store `ng-content` and set property `change` to `true`.

**ngDoCheck()**: Detect input property `options` changes with `KeyValueDiffers`, and set property `change` to `true` if detected.   

**ngOnChanges()**: Detect input property `callback` and `string` changes, and set property `change` to `true` if detected.    

## Style guide

[Angular style guide](https://angular.io/docs/ts/latest/guide/style-guide.html)   

## GIT

### Commit
- [AngularJS Git Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)
- [Karma git commit](http://karma-runner.github.io/0.10/dev/git-commit-msg.html)

### Versioning
Semantic Versioning 2.0.0 http://semver.org/

**Given a version number MAJOR.MINOR.PATCH, increment the:**   
MAJOR version when you make incompatible API changes,  
MINOR version when you add functionality in a backwards-compatible manner, and  
PATCH version when you make backwards-compatible bug fixes.  
Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

How should I deal with revisions in the 0.y.z initial development phase?  
>The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.

How do I know when to release 1.0.0?

>If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.

## License

MIT © ngx-markdown

## Donate
[Click to donate](https://donorbox.org/help-creating-open-source-software)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.