Markdown `templateUrl` support for Angular
Last updated a month ago by samuelmarks .
(Apache-2.0 OR MIT) · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ng-md-components 
SYNC missed versions from official npm registry.


Markdown templateUrl support for Angular

oclif Version Downloads/week License


$ 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:

import { Component, OnInit } from '@angular/core';

// 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

Current Tags

  • 0.0.11                                ...           latest (a month ago)

6 Versions

  • 0.0.11                                ...           a month ago
  • 0.0.10                                ...           a month ago
  • 0.0.9                                ...           3 months ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 27
Dependencies (6)
Dev Dependencies (12)
Dependents (0)

Copyright 2014 - 2016 © |