Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ng-md-components with all npm packages installed. Try it out:

var ngMdComponents = require("ng-md-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng-md-components v0.0.8

Markdown `templateUrl` support for Angular


Markdown templateUrl support for Angular

oclif Version Downloads/week License

## Usage
$ ng-md-components --help

  -d, --directory=directory  (required) Directory to recurse through
  -e, --ext=ext              [default: .md] File extension to look for
  -h, --help                 show CLI help
  -v, --version              show CLI version




Let's create an Angular application, using Markdown rather than HTML:

ng new --skip-install --interactive=false a && cd $_
for c in {a..z}; do ng g m "$c"; ng g c "$c" & done
fd .html -exec bash -c 'f=${0%.*}; pandoc "$0" -o "$"; rm "$0"' {} \;
fd .component.ts -exec sed -i 's/component.html/' {} \;

Reversal, using fd, bash and pandoc

fd .md --exclude -exec bash -c 'f=${0%.*}; pandoc "$0" -o "$f.html"; rm "$0"' {} \;
fd .component.ts -exec sed -i 's/' {} \;

Disadvantages: the fd and bash aren't really cross-platform, and pandoc doesn't do code-highlighting. Also there are no helpful hints saying what's generated, and no explicit way of referencing markdown templateUrl.

Reversal, using ng-md-components

Open a file, let's use src/app/a/a.component.ts:

// templateUrl: './' <-- add this line

  selector: 'app-a',
  templateUrl: './a.component.html', // <-- this gets generated
  styleUrls: ['./a.component.css']
export class AComponent {}

As you can see, we have added one line, a comment. Note that our simple parsing means the first templateUrl will be converted into HTML.

Alternative approaches

Extend @Component or create new decorator.


  • Can be used without any new precompilation stage


  • Bundle size
  • Dynamic rather than static, so runtime performance is impacted
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free