How to count dom elements in Angular2

Question

I was wondering if there is an easy way to count dom elements using Angular 2. For example having the following code:

    <div *ngFor="let user of users" [ngClass]="{'special': isSpecial(user)}">
        {{ user.name }}
    </div>

Is there an easy way to get the total number of rows containing the special class without creating pipes or functions?

With Jquery it would be as easy as running:

$( ".special" ).length;

Answer 1

You can use normal DOM APIs to do what you would've previously done via jQuery eg:

document.querySelectorAll('.special').length

However, unless the isSpecial(user) function is extremely expensive to run, why would querying the DOM be any more performant than just filtering the users array in code?

users.filter(u => isSpecial(u)).length

I'd caution against worrying about performance in this scenario too much without actually running some performance tests first to verify your assumptions.