Angular 4. How to add item to an array according to sorting

Question

I use Angular 4.4.6 in my project. Having a list of events I want this list to be sorted by date. I achieved this by adding ng2-order-pipe

// customers.html

<tr *ngFor="let event of customer.events | orderBy: order : reverse">

The sorting works but my problem is that if I add an event, it is placed at the end of the list, ignoring sorting.

// customers.ts

this.order               = 'date';
this.reverse             = true;

.........................................

addEvent(new_date, new_state, new_description) {

    var new_event = {
        date:        new_date,
        state:       new_state,
        description: new_description,
        customer_id: this.customer['id']
    };
this.customer['events'].push(new_event);
}

How to add an event so that it appears in its place according to sorting?

Read angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe, and angular.io/guide/pipes#pure-and-impure-pipes — JB Nizet
– JB Nizet, Commented Dec 6, 2017 at 22:05
because pure pipes doesn't detect changes. don't sort the list with pipe, it is not recommended. — omeralper
– omeralper, Commented Dec 6, 2017 at 22:05

basarat · Accepted Answer · 2017-12-07 02:19:06Z

3

From : https://angular.io/guide/pipes#pure-and-impure-pipes

Angular ignores changes within (composite) objects. It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.

Fix

Reassign the array e.g.

this.customer['events'] = this.customer['events'].concat(new_event);

answered Dec 7, 2017 at 2:19

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4. How to add item to an array according to sorting

1 Answer 1

Fix

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Fix

Comments

Your Answer

Sign up or log in

Post as a guest

Related