Vfrdtyky

I am trying to upgrade my AngularJS directive to Angular Component.

Here is the code of directive:

ng1AppModule.component('ng1Tmp', {

    bindings: {p: '<'},

    require: {ngModel: 'ngModel'}

});

And I tried to upgrade it by:

 @Directive({selector: 'ng1-tmp'})

 class Ng1HTmpComponent extends UpgradeComponent{

     @Input() p: string;

     @Input() ngModel: INgModelController;



     constrcutor(elementRef: ElementRef, injector: Injector) {

          super('ng1Tmp', elementRef, injector);

     }

}

It doesn't work well. It seems not to support ngModel to upgrade in this way. But I don't see any related information in this documentation: https://angular.io/guide/upgrade .

Does anyone have some ideas on this?

Thanks in advance. :)

Angular not mean new version of AngularJS, them are different struct.
3 point must known before code one component: Input, Output and EventEmitter.

One example Directive/Component here may can some help.

//AngularJS directive, use it like <pagination></pagination>

app.register.directive('pagination', function () {

    return {

        restrict        : 'E',

        scope           : true,

        templateUrl     : '/views/widgets/pagination.html',

        controllerAs    : 'vm',

        controller      : PaginationController

    };

    PaginationController.$inject = ['$scope'];

    function PaginationController($scope) {

    }

});

And now I was redefined it on Angular.

//Angular6 Component, use it like 

//<app-pagination [pager]="pagination" (fired)="onFire($event)"></app-pagination>

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

@Component({

  selector: 'app-pagination',

  templateUrl: './pagination.component.html',

  styleUrls: ['./pagination.component.scss']

})

export class PaginationComponent implements OnInit {

    @Input() pager: any;

    @Output() fired = new EventEmitter<any>();



    constructor() { }



    ngOnInit() {

    }



    prev() {

        let page = this.pager.current_page - 1;

        if (page < 0) page = 1;

        this.fired.emit({type: 'page', data: page});

    }



    next() {

        let page = this.pager.current_page + 1;

        if (page > this.pager.page_count) page = this.pager.page_count;

        this.fired.emit({type: 'page', data: page});

    }



}

And at parent Component or Page, should be listen the event, like:

onFire(event) {

    switch (event.type) {

        case 'page': //pagination component fire

            return this.gotoPage(event.data);

        case 'edit': //list item fire

            return this.editArticle(event.data);

        case 'view': //list item fire

            return this.viewArticle(event.data);

        case 'trash': //list item fire

            return this.trashArticle(event.data);

    }

}