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 startOpen http://localhost:4200/ in your browser.
To install, run:
npm install --save @ngx-markdown/core- 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';
@NgModule({
imports: [
// external
CommonModule,
// internal
MarkdownModule.forRoot({
// 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 { }- In file
./example.component.ts
// external
import { Component, OnInit } from '@angular/core';
// internal
@Component({
selector: 'example-component',
templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
stringToTransform = `**my bold**
[link](http://example.com)
{{language}}
`;
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() { }
}- In file
./example.component.html
<!-- Directive: ng-content -->
<div ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback">
**my bold** {{language}}
</div>
<!-- Component: ng-content -->
<ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback">
**my bold**
[link](http://example.com)
{{language}}
</ngx-markdown>
<!-- Component: dynamic with property `string` -->
<ngx-markdown
[interpolation]="interpolate"
[options]="options"
[callback]="callback"
[string]="stringToTransform"
(result)="getResult($event)"></ngx-markdown>
<!-- Directive: dynamic with property `ngxmarkdown` -->
<div
[ngxmarkdown]="stringToTransform"
[callback]="callback"
[interpolation]="interpolate"
[options]="options"
></div>| 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. |
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.
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.
FAQ
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