angular - use marked in Angular2 -
i'm trying make simple markdown inline editor angular2. tryed several approaches none seems work. installed marked npm , visible in projects node_modules directory. can import , recognized netbeans. when ever use nothing works , if open firefox debuger find localhost:3000/marked not found.
i put markdown converter in service. looks following:
import { injectable } 'angular2/core'; import * marked 'marked'; interface imarkdownconfig { sanitize?: boolean, gfm?: boolean, breaks?: boolean, smartypants?: boolean } @injectable() export class markdownservice { //private md: markedstatic; constructor() { //this.md = marked.setoptions({}); } setconfig(config: imarkdownconfig) { // this.md = marked.setoptions(config); } convert(markdown: string): string { if(!markdown) { return ''; } return markdown; //return this.md.parse(markdown); } }
used works fine, except markdown not translated. if uncomment lines md stops working. component in i'm using looks that:
import {component, input, oninit } 'angular2/core'; import {routeparams} 'angular2/router'; import {markdownservice} '../services/markdown-converter' @component({ selector: 'my-story', templateurl: 'app/components/story.html', bindings: [markdownservice] }) export class storycomponent implements oninit { public html: string; private md: markdownservice; constructor( private _routeparams: routeparams, private _converter: markdownservice) { this.html =''; this.md = _converter; } ngoninit() { } public updatevalue(val:string) { if(!val) { return ''; } this.html = val; } }
i'm not displaying involved files if there file should provide ask in comments. if didn't right typescript , or angular2 injection or whatever, resource of information explaining concepts welcome. have read lot on www seems documents angular2 quite fast outdated.
i import marked library way:
import marked 'marked';
and use do:
@component({ selector: 'markdown', template: ` <div [innerhtml]="converteddata"> </div> ` }) export class markdowncomponent { @input('data') data:string; ngonchanges() { var md = marked.setoptions({}); this.converteddata = md.parse(this.data); } }
see plunkr: https://plnkr.co/edit/zusts3t7ijxjquvcxiam?p=preview.
this question you:
Comments
Post a Comment