@ngx-markdown/core
Angular 2+ markdown to html module using marked a markdown parser and compiler.Commit Versioning
Demonstration
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.
Installation
To install, run:npm install --save @ngx-markdown/core
Usage
- 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>
Attributes
| Name | Type | Description | |----------|----------------|---------------------------| | callback | ((error: any, parseResult: string) => void) \| undefined | Function called when thestring
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 HooksWhen 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 guideGIT
Commit
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.
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.