Create-angular-template NPM

Create Angular Template

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);