ng1-shift

ng1-shift

Library allows you to write with Angular 2 syntax on Angular 1.5+. That will make your migration to Angular 2(or 4) more easier.

How to install?

npm i ng1-shift

Component

Decorator for class, which links class to component contoller. It also passes property template as a static component value.

Lifecycle hooks:

• ngOnInit - links to $onInit
• ngOnChanges - links to $onChanges
• ngOnDestroy - links to $onDestroy

import {Component, Inject, Input} from "ng1-shift/core";
import {UserDeleteErrorEntity} from "../store/entity/user-delete-error";

@Component({
    template: `
        <h1>Place your template here</h1>
    `,
})
export class PlaygroundComponent implements ng.IController {
    ngOnInit() {
    }

    ngOnChanges() {
    }

    ngOnDestroy() {
    }
}

Equals to:

export class PlaygroundComponent implements ng.IController {
    static controller = PlaygroundComponent;
    static template = `
        <h1>Place your template here</h1>
    `;

    $onInit() {
    }

    $onChanges() {
    }

    $onDestroy() {
    }
}

Directive

Decorator for class, which links class to directive contoller. It also passes property selector as a directive selector.

Lifecycle hooks:

• ngOnInit - links to $onInit
• ngAfterViewInit - links to $postLink
• ngOnChanges - links to $onChanges
• ngOnDestroy - links to $onDestroy

import {Directive} from "ng1-shift/core";

@Directive({
    selector: `.ngClassDirective`,
})
export class PlaygroundDirective implements ng.IController {
    ngOnInit() {
    }

    ngAfterViewInit() {
    }

    ngOnChanges() {
    }

    ngOnDestroy() {
    }
}

Equals to:

export directiveInstance() {
    return {
        controller: PlaygroundDirective,
        restrict: "C"
    }
}

class PlaygroundDirective implements ng.IController {
    $onInit() {
    }

    $postLink() {
    }

    $onChanges() {
    }

    $onDestroy() {
    }
}

Input

Property decorator for bindings. Literary puts binding property name into static object bindings as one-way binding "<".

class DogComponent {
    @Input() name: string;
}

Equals to:

class DogComponent {
    static bindings = {
        name: "<"
    };

    name: string;
}

In order to setup two-way binding, you should add @Input for that property and @Output with 'Change' postfix property.

class DogComponent {
    @Input() name: string;
    @Output() nameChange = new EventEmitter();
}

Equals to:

class DogComponent {
    static bindings = {
        name: "=",
        nameChange: "&"
    };

    name: string;
    nameChange: Function;
}

Output

Property decorator for callback bindings. Literary puts binding property name into static object bindings as callback binding "&".

class CatComponent {
    @Output("onAliasCallback") onCallback: Function;
}

Equals to:

class CatComponent {
    static bindings = {
        onCallback: "&onAliasCallback"
    };

    onCallback: Function;
}

Inject

Parameter decorator for injection. Works a bit differ from @Inject in Angular 2. Just pushes specified injection into static property $inject.

class UserComponent {
    constructor(
        @Inject("userDataService") private userDataService: IUserDataService
    ) {
    }
}

Equals to:

class UserComponent {
    static $inject = ["userDataService"];

    constructor(private userDataService: IUserDataService) {
    }
}