Angular - pipe and elvis operator (?) causes getter to be called sooner

Viewed 74

I have came across a strange case which I don't understand. When I use a pipe and elvis operator, the code is executed in different part of lifecycle.

Having this simplified situation:

@Component({
  selector: 'app-foo',
  template: '<ng-content></ng-content>'
})
export class FooComponent {
  @Input() foo: any;

  get bar() {
    console.log('bar getter called, this.foo:', this.foo);
    return this.foo;
  }
}

If I use it like this:

  <app-foo #fooComponent [foo]="{a:1}">
    <span [title]="(fooComponent.bar | somePipe)?.a"></span>
  </app-foo>

the bar getter is called when foo attribute was not filled yet (it is undefined). Console: bar getter called, this.foo: undefined

In any other usages:

<span [title]="fooComponent.bar?.a"></span>
<span [title]="(fooComponent.bar | somePipe).a"></span>
<span title="{{(fooComponent.bar | somePipe)?.a}}"></span>

it works as expected. Console: bar getter called, this.foo: {a: 1}

Can anyone explain this? Is it intention? Or BUG?

UPDATE:

problem is gone after update from Angular 10.0 to Angular 10.2

0 Answers
Related