Upgrade AngularJS directive with ngModel to Angular component
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. :)
angularjs angular angularjs-directive angular-components
add a comment |
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. :)
angularjs angular angularjs-directive angular-components
You should probably share what theng1Tmp
component in your AngularJS 1.x does exactly. That will help people answer how it should look in Angular 2+. You probably wouldn't needsuper()
orinjector
in most cases, so understanding what the original component does will go a long way.
– Alexander Staroselsky
Nov 14 '18 at 1:13
add a comment |
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. :)
angularjs angular angularjs-directive angular-components
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. :)
angularjs angular angularjs-directive angular-components
angularjs angular angularjs-directive angular-components
asked Nov 14 '18 at 0:29
ForeverYangForeverYang
83
83
You should probably share what theng1Tmp
component in your AngularJS 1.x does exactly. That will help people answer how it should look in Angular 2+. You probably wouldn't needsuper()
orinjector
in most cases, so understanding what the original component does will go a long way.
– Alexander Staroselsky
Nov 14 '18 at 1:13
add a comment |
You should probably share what theng1Tmp
component in your AngularJS 1.x does exactly. That will help people answer how it should look in Angular 2+. You probably wouldn't needsuper()
orinjector
in most cases, so understanding what the original component does will go a long way.
– Alexander Staroselsky
Nov 14 '18 at 1:13
You should probably share what the
ng1Tmp
component in your AngularJS 1.x does exactly. That will help people answer how it should look in Angular 2+. You probably wouldn't need super()
or injector
in most cases, so understanding what the original component does will go a long way.– Alexander Staroselsky
Nov 14 '18 at 1:13
You should probably share what the
ng1Tmp
component in your AngularJS 1.x does exactly. That will help people answer how it should look in Angular 2+. You probably wouldn't need super()
or injector
in most cases, so understanding what the original component does will go a long way.– Alexander Staroselsky
Nov 14 '18 at 1:13
add a comment |
1 Answer
1
active
oldest
votes
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);
}
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291462%2fupgrade-angularjs-directive-with-ngmodel-to-angular-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
}
}
add a comment |
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);
}
}
add a comment |
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);
}
}
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);
}
}
answered Nov 14 '18 at 3:38
incNickincNick
43425
43425
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291462%2fupgrade-angularjs-directive-with-ngmodel-to-angular-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You should probably share what the
ng1Tmp
component in your AngularJS 1.x does exactly. That will help people answer how it should look in Angular 2+. You probably wouldn't needsuper()
orinjector
in most cases, so understanding what the original component does will go a long way.– Alexander Staroselsky
Nov 14 '18 at 1:13