Nascent Prototype Metaverse

    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published


    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
    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
    // external
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    // @ngx
    import { MarkdownModule } from '@ngx-markdown/core';
    // internal 
    import { ExampleComponent } from './example.component';
      imports: [
        // external
        // 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 { }
    1. 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
    <!-- Directive: ng-content -->
    <div ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback">
      **my bold** {{language}}
    <!-- Component: ng-content -->
    <ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback">
      **my bold**
    <!-- Component: dynamic with property `string` -->
    <!-- Directive: dynamic with property `ngxmarkdown` -->


    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."


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

    Lifecycle Hooks

    Angular 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




    Semantic Versioning 2.0.0

    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.


    MIT © ngx-markdown


    Click to donate


    npm i @ngx-markdown/core

    DownloadsWeekly Downloads






    Last publish


    • ngxpackage