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 create-angular-template with all npm packages installed. Try it out:

var createAngularTemplate = require("create-angular-template")

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

create-angular-template v3.0.0

Transform AngularJS templates into Angular syntax

Create Angular Template

Greenkeeper badge Build - Master Coverage Status Latest version

Transform AngularJS templates into Angular syntax. Currently supports Angular > 5.x.

How it works

Before:

<div>
    <p ng-if="vm.showDetails">Some details</p>
    <ul>
        <li ng-repeat="item in vm.items"></li>
    </ul>
</div>

After:

<div>
    <p *ngIf="showDetails">Some details</p>
    <ul>
        <li *ngFor="let item of items"></li>
    </ul>
</div>

Usage

Installation

Install create-angular-template as typical npm package:

npm install create-angular-template

Basic usage:

const { transformTemplate } = require('create-angular-template');
const angularTemplate = transformTemplate(template, options);
  • template (string) - AngularJS template
  • options (object) - configure transformation process

Options:

  • stripTagPrefix (string) - used to strip prefixes like data-ng-if (default: data)
  • aliasForThis (string) - used in AngularJS to define scope of given variable (default: $ctrl)
  • format (string) - format of input template (default: html, supported: html | pug)
  • bindToCurlyBraces (boolean) - transform ng-bind to curly braces binding (default: false)
  • classListToRemove (array) - array of classes which should be removed from elements (default: ['ng-hide'])

Supported transformations

Syntax changes:

Based on AngularJS to Angular Quick Reference CheatSheet

  • ng-click -> (click)
  • ng-submit -> (ngSubmit)
  • ng-model -> [(ngModel)]
  • ng-if -> *ngIf
  • ng-switch -> [ngSwitch]
  • ng-switch-when -> *ngSwitchCase
  • ng-switch-default -> *ngSwitchDefault
  • ng-class -> [ngClass]
  • ng-hide -> [hidden]
  • ng-show -> [hidden] with negation
  • ng-bind -> [innerText] (by default), or {{ }} (option bindToCurlyBraces set to true)
  • ng-bind-html -> [innerHTML]
  • ng-hide -> [hidden]
  • ng-repeat="item in items" -> *ngFor="let item of items"
  • ng-href -> [href]
  • ng-src -> [src]

Extras:

Prefixes cleanup:

  • data-ng-if -> *ngIf
  • x-ng-hide -> [hidden]

'Alias for this' cleanup - ($ctrl, vm, etc.):

  • ng-hide="$ctrl.isHidden" -> [hidden]="isHidden"

Typescript integration

Starting from 1.1.0 it's easier to use this library inside of TypeScript projects - there's a dedicated file containing type definitions which can help you write typed code.

Example (.ts):

import {transformTemplate, TransformationOptions} from 'create-angular-template';

const template = '<div ng-if="$ctrl.isVisible"></div>';

const options: TransformationOptions = {
    format: 'html',
    aliasForThis: '$ctrl'
};

const transformed = transformTemplate(template, options);

Would you like to see CLI here? Check Up!:

ng-up - Angular Upgrade Toolkit

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