Hello, I'm trying out angular 2 on a small app that displays a long list (1000+ items) and allows multiple filtering. The thing I'm wondering about it how to properly handle this scenario for optimal performance. I've tried 2 approaches 1) filter the data source and refresh the list bound to *ngFor each time the filter changes 2) use display:none for each item that doesn't pass the filter
The first approach seems to leave the UI a bit more responsive (you can modify the filters before the filtering is done - so the controls don't "freeze") but takes longer to process. The second approach is faster in terms of producing the final result, but as the filter is applied, it doesn't allow modifications until the rendering is done. My question is, what's the recommended/proper way to handle this scenario? Some additional info to provide more context. The filters consist of 2 kinds of controls - text inputs or buttons. Buttons represent 'categorized' values, text inputs filter by specific object properties, though I'd like to have a single input that filter on multiple (but predefined) properties. In the first approach I'm performing 'raw' filtering on an array. Not using an observable here (though considering it, how much and what would that change in terms of performance?) As for my current findings, the obvious reason for the first approach being slower is multiple DOM operations - every time the data source changes, the DOM is rebuilt by *ngFor. Are there any non obvious reasons why this slows down? The second approach does not create any extra DOM insertions/deletions, but it does cause multiple repaint/layout (?!?) operations done by the browser. Is there a way to delay these? Any insight on the subject is appreciated. Thanks in advance. -- You received this message because you are subscribed to the Google Groups "Angular" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
