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