Proposal: computed (aka memoized) properties

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

There is no real computed properties. Getters are bad for performance. Example https://plnkr.co/edit/TQMQFb?p=preview

Expected behavior

To be able to use computed properties as in vue or mobx

What is the motivation / use case for changing the behavior?

My proposal is to make change detection smarter by adding computed properties like in mobx or vue.

import {Computed, Reactive} from '@angular/core';
...

class MyCmp {
  age = 69;

  @Reactive firstName = 'hello';
  @Reactive lastName = 'angular';
  @Computed get fullName() {
     console.log('recomputed');
     return `${this.firstName} ${this.lastName}`;
  }
}

This will allow to have computed get property and be able to cache it, so it is computed only when needed. Currently this is not possible and getter is recomputed a lot of times, especially if using default change detection.

[marcelcremer]

I was switching between a ng and a vue project back and forth the last weeks and cannot believe, how natural the computed properties in vue work and that angular hasn’t something similiar to offer.

In vue, you can easily do something like this(translated to ng terminology):

@Input({
    default: ''
})
firstName: string;

@Input({
    default: '';
})
lastName: string;

get fullName() {
    return `${this.firstName} ${this.lastName}`;
}

which, despite the fact that we don’t have default values in ng too, expresses exactly what we are doing.

However, in angular you have to do something like

@Input()
set firstName(value: string)
{
    this._firstName = value || '';
    this.calculateFullName();
}
get firstName() {
    return this._firstName;
}
private _firstName: string;

@Input()
set lastName(value: string)
{
    this._lastName = value || '';
    this.calculateFullName();
}
get lastName() {
    return this._lastName;
}
private _lastName: string;

fullName: string = '';

calculateFullName() {
 this.fullName = `${this.firstName} ${this.lastName}`;
}

which is really ugly, error prone, bloated and no fun to use…

So +1 for computed Properties🎉

[marcelcremer]

If you have a hammer, everything looks like a nail…

While this might work, it has so much overhead that I don’t even want to try it… IMHO it’s a workaround for a missing feature in angular, which is the reason why some people think angular is overengineered.

Still props and ❤️ for posting your workaround attempt 😃