Angular binding method or variable

Question

Let say I have this component with the following template

<div *ngFor="let t of test">{{t}}</div>

And this code

  test: number[] = [1, 2, 3];
  ngOnInit() {
    this.test = this.test.reduce((a, b) => {
      a.push(b * 10);
      return a;
    }, []);
    setTimeout(() => {
      this.test.push(4);
    }, 3000);
  }

This will be result in this

10
20
30
4 // not what I was looking for

However if I decide to move the code in a method getTest()

<div *ngFor="let t of getTest()">{{t}}</div>

with the code

  getTest(): number[] {
    return this.test.reduce((a, b) => {
      a.push(b * 10);
      return a;
    }, []);
  }

Then the delayed value will show as 40 which is what I was looking for.

Is this a valid implementation or is resource consuming? getTest() method seems to be called quite often.

In a bigger picture I'm trying to add / remove / update items in an array and show a reduced version of that array on screen.

Of course it will be called quite often

yurzui
– yurzui

2017-11-11 16:24:28 +00:00
Commented Nov 11, 2017 at 16:24 — yurzui
– yurzui, Commented Nov 11, 2017 at 16:24

Günter Zöchbauer · Accepted Answer · 2017-11-11 16:33:01Z

2

If you bind to a method, it will be called every time Angular runs change detection. This can become a serious performance burden.

It's better to assign the result of the method to a field and bind to the field instead. Change detection with fields is extremely efficient.

answered Nov 11, 2017 at 16:33

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

Whisher · Accepted Answer · 2017-11-12 11:21:53Z

1

You could use Observable using async pipe like (change rxjs part to your logic)

import { Observable } from 'rxjs/Observable';
import { from } from 'rxjs/observable/from';
import { of } from 'rxjs/observable/of';
import { reduce, concatMap, delay } from 'rxjs/operators';

test: number[] = [1, 2, 3];
$test:Observable<number>;

ngOnInit() {
    this.$test = from(this.test)
      .pipe(
        concatMap(x => of(40)),
        delay(1000),
        reduce((acc, current) => {
          return  acc + current
        },0)
      );
}

in the view

{{$test | async}}

answered Nov 12, 2017 at 11:21

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Collectives™ on Stack Overflow

Angular binding method or variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related