Mixing
Custom sorting pipe for Angular 6
I am trying to sort my data in the ngFor loop , but my custom pipe doesnot work as intened , can anybody help me out...
export class OrderbyLastMessagePipe implements PipeTransform {
transform(array: Array<string>, args?: any): Array<string> {
if (array !== undefined && array !== null && args !== '') {
console.log('args', array);
const direction = args === 'desc' ? 1 : -1;
array.sort((a: any, b: any) => {
console.log('args', a);
if (a['lastUpdatedat'] < b['lastUpdatedat']) {
return -1 * direction;
} else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
return 1 * direction;
} else {
return 0;
}
});
}
return array;
}
My Component ng container is this , i am using two filters one for search and another for sort on specific lastupdatedat value which is the timestamp ...
<ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">
angular sorting angular2-custom-pipes
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
add a comment |
I am trying to sort my data in the ngFor loop , but my custom pipe doesnot work as intened , can anybody help me out...
export class OrderbyLastMessagePipe implements PipeTransform {
transform(array: Array<string>, args?: any): Array<string> {
if (array !== undefined && array !== null && args !== '') {
console.log('args', array);
const direction = args === 'desc' ? 1 : -1;
array.sort((a: any, b: any) => {
console.log('args', a);
if (a['lastUpdatedat'] < b['lastUpdatedat']) {
return -1 * direction;
} else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
return 1 * direction;
} else {
return 0;
}
});
}
return array;
}
My Component ng container is this , i am using two filters one for search and another for sort on specific lastupdatedat value which is the timestamp ...
<ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">
angular sorting angular2-custom-pipes
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
2
angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
– JB Nizet
Nov 20 '18 at 17:24
@JBNizet that doesnot help ... can please point out what am i doing wrong ...
– Ankit Prajapati
Nov 20 '18 at 17:36
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string.
– ShaneCoder
Nov 20 '18 at 19:12
2
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work".
– JB Nizet
Nov 20 '18 at 20:29
add a comment |
I am trying to sort my data in the ngFor loop , but my custom pipe doesnot work as intened , can anybody help me out...
export class OrderbyLastMessagePipe implements PipeTransform {
transform(array: Array<string>, args?: any): Array<string> {
if (array !== undefined && array !== null && args !== '') {
console.log('args', array);
const direction = args === 'desc' ? 1 : -1;
array.sort((a: any, b: any) => {
console.log('args', a);
if (a['lastUpdatedat'] < b['lastUpdatedat']) {
return -1 * direction;
} else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
return 1 * direction;
} else {
return 0;
}
});
}
return array;
}
My Component ng container is this , i am using two filters one for search and another for sort on specific lastupdatedat value which is the timestamp ...
<ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">
angular sorting angular2-custom-pipes
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
I am trying to sort my data in the ngFor loop , but my custom pipe doesnot work as intened , can anybody help me out...
export class OrderbyLastMessagePipe implements PipeTransform {
transform(array: Array<string>, args?: any): Array<string> {
if (array !== undefined && array !== null && args !== '') {
console.log('args', array);
const direction = args === 'desc' ? 1 : -1;
array.sort((a: any, b: any) => {
console.log('args', a);
if (a['lastUpdatedat'] < b['lastUpdatedat']) {
return -1 * direction;
} else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
return 1 * direction;
} else {
return 0;
}
});
}
return array;
}
My Component ng container is this , i am using two filters one for search and another for sort on specific lastupdatedat value which is the timestamp ...
<ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">
angular sorting angular2-custom-pipes
angular sorting angular2-custom-pipes
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
edited Nov 21 '18 at 7:46
Ankit Prajapati
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
asked Nov 20 '18 at 17:21
Ankit PrajapatiAnkit Prajapati
217210
217210
2
angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
– JB Nizet
Nov 20 '18 at 17:24
@JBNizet that doesnot help ... can please point out what am i doing wrong ...
– Ankit Prajapati
Nov 20 '18 at 17:36
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string.
– ShaneCoder
Nov 20 '18 at 19:12
2
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work".
– JB Nizet
Nov 20 '18 at 20:29
add a comment |
2
angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
– JB Nizet
Nov 20 '18 at 17:24
@JBNizet that doesnot help ... can please point out what am i doing wrong ...
– Ankit Prajapati
Nov 20 '18 at 17:36
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string.
– ShaneCoder
Nov 20 '18 at 19:12
2
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work".
– JB Nizet
Nov 20 '18 at 20:29
2
2
angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
– JB Nizet
Nov 20 '18 at 17:24
angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
– JB Nizet
Nov 20 '18 at 17:24
@JBNizet that doesnot help ... can please point out what am i doing wrong ...
– Ankit Prajapati
Nov 20 '18 at 17:36
@JBNizet that doesnot help ... can please point out what am i doing wrong ...
– Ankit Prajapati
Nov 20 '18 at 17:36
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string.
– ShaneCoder
Nov 20 '18 at 19:12
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string.
– ShaneCoder
Nov 20 '18 at 19:12
2
2
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work".
– JB Nizet
Nov 20 '18 at 20:29
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work".
– JB Nizet
Nov 20 '18 at 20:29
add a comment |
2 Answers
2
active
oldest
votes
very similar answered here
Angular Custom Order Pipe sorting array correctly
The user search must be done with input type text, keyup event, and array.filter method.
Good luck!
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
add a comment |
Two recommendations:
If you used angular CLI to generate your pipe, it's
nameisorderByLastMessagePipe. You can see this in your code like such:
@Pipe({name: 'orderByLastMessagePipe'})
The parameters you are passing to your pipe will always cause it to sort ascending. With angular pipes, multiple parameters are delimited by
:. TheorderbyLastMessage:'uLists':true"should beorderbyLastMessage:'desc'to sort descending, andorderbyLastMessageto sort ascending, ororderbyLastMessage:'asc'.
Change your template to:
<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">
See if that fixes your sorting.
Edit
The array parameter to your pipe is obviously not an Array<string>. If you have a specific type for the objects in your array, the parameter should be typed to that Array<SomeObject>. If not, any will do Array<any>, or just any.
This answer is NOT the correct way to do sorting due to poor performance as pointed out in previous comments. Just trying to answer the specific question that is asked.
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
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%2f53398278%2fcustom-sorting-pipe-for-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
very similar answered here
Angular Custom Order Pipe sorting array correctly
The user search must be done with input type text, keyup event, and array.filter method.
Good luck!
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
add a comment |
very similar answered here
Angular Custom Order Pipe sorting array correctly
The user search must be done with input type text, keyup event, and array.filter method.
Good luck!
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
add a comment |
very similar answered here
Angular Custom Order Pipe sorting array correctly
The user search must be done with input type text, keyup event, and array.filter method.
Good luck!
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
very similar answered here
Angular Custom Order Pipe sorting array correctly
The user search must be done with input type text, keyup event, and array.filter method.
Good luck!
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
answered Nov 20 '18 at 22:00
freepowderfreepowder
2796
2796
add a comment |
add a comment |
Two recommendations:
If you used angular CLI to generate your pipe, it's
nameisorderByLastMessagePipe. You can see this in your code like such:
@Pipe({name: 'orderByLastMessagePipe'})
The parameters you are passing to your pipe will always cause it to sort ascending. With angular pipes, multiple parameters are delimited by
:. TheorderbyLastMessage:'uLists':true"should beorderbyLastMessage:'desc'to sort descending, andorderbyLastMessageto sort ascending, ororderbyLastMessage:'asc'.
Change your template to:
<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">
See if that fixes your sorting.
Edit
The array parameter to your pipe is obviously not an Array<string>. If you have a specific type for the objects in your array, the parameter should be typed to that Array<SomeObject>. If not, any will do Array<any>, or just any.
This answer is NOT the correct way to do sorting due to poor performance as pointed out in previous comments. Just trying to answer the specific question that is asked.
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
add a comment |
Two recommendations:
If you used angular CLI to generate your pipe, it's
nameisorderByLastMessagePipe. You can see this in your code like such:
@Pipe({name: 'orderByLastMessagePipe'})
The parameters you are passing to your pipe will always cause it to sort ascending. With angular pipes, multiple parameters are delimited by
:. TheorderbyLastMessage:'uLists':true"should beorderbyLastMessage:'desc'to sort descending, andorderbyLastMessageto sort ascending, ororderbyLastMessage:'asc'.
Change your template to:
<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">
See if that fixes your sorting.
Edit
The array parameter to your pipe is obviously not an Array<string>. If you have a specific type for the objects in your array, the parameter should be typed to that Array<SomeObject>. If not, any will do Array<any>, or just any.
This answer is NOT the correct way to do sorting due to poor performance as pointed out in previous comments. Just trying to answer the specific question that is asked.
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
add a comment |
Two recommendations:
If you used angular CLI to generate your pipe, it's
nameisorderByLastMessagePipe. You can see this in your code like such:
@Pipe({name: 'orderByLastMessagePipe'})
The parameters you are passing to your pipe will always cause it to sort ascending. With angular pipes, multiple parameters are delimited by
:. TheorderbyLastMessage:'uLists':true"should beorderbyLastMessage:'desc'to sort descending, andorderbyLastMessageto sort ascending, ororderbyLastMessage:'asc'.
Change your template to:
<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">
See if that fixes your sorting.
Edit
The array parameter to your pipe is obviously not an Array<string>. If you have a specific type for the objects in your array, the parameter should be typed to that Array<SomeObject>. If not, any will do Array<any>, or just any.
This answer is NOT the correct way to do sorting due to poor performance as pointed out in previous comments. Just trying to answer the specific question that is asked.
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
Two recommendations:
If you used angular CLI to generate your pipe, it's
nameisorderByLastMessagePipe. You can see this in your code like such:
@Pipe({name: 'orderByLastMessagePipe'})
The parameters you are passing to your pipe will always cause it to sort ascending. With angular pipes, multiple parameters are delimited by
:. TheorderbyLastMessage:'uLists':true"should beorderbyLastMessage:'desc'to sort descending, andorderbyLastMessageto sort ascending, ororderbyLastMessage:'asc'.
Change your template to:
<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">
See if that fixes your sorting.
Edit
The array parameter to your pipe is obviously not an Array<string>. If you have a specific type for the objects in your array, the parameter should be typed to that Array<SomeObject>. If not, any will do Array<any>, or just any.
This answer is NOT the correct way to do sorting due to poor performance as pointed out in previous comments. Just trying to answer the specific question that is asked.
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
edited Nov 20 '18 at 21:49
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
answered Nov 20 '18 at 21:30
ShaneCoderShaneCoder
721410
721410
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
add a comment |
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
Changing this orderbyLastMessagePipe:'desc' also doesnot sort
– Ankit Prajapati
Nov 21 '18 at 7:47
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%2f53398278%2fcustom-sorting-pipe-for-angular-6%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
2
angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
– JB Nizet
Nov 20 '18 at 17:24
@JBNizet that doesnot help ... can please point out what am i doing wrong ...
– Ankit Prajapati
Nov 20 '18 at 17:36
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string.
– ShaneCoder
Nov 20 '18 at 19:12
2
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work".
– JB Nizet
Nov 20 '18 at 20:29