I'm starting to get a bit confused with Angular/Typescripting. I originally believed that properties should be kept private to prevent external alteration of their values.
Take this example:
export class Foo{
private _bar: string;
constructor(private bar: string){
this._bar = bar;
}
public get bindBar(): string {
return this._bar;
}
}
And here is some template code:
<span>{{ bindBar }}</span>
However, I have come across information suggesting performance issues when binding to a method in the HTML template, as methods are called on every change detection event on the page.
The options I am considering are either making it a public property or using Pipes.
Pipes seem like a lot of extra work to implement for every property needing binding, and declaring public variables has typically been discouraged.
I haven't found clear guidance on how to implement binding without impacting performance negatively on the Angular website. Using pipes doesn't seem like the best solution either.
Can someone provide clarification?
Thank you to those who shared links to other articles. From them, I discovered an example illustrating method calls being triggered, so I decided to test whether it was component-based or contained within a single component.
In my modified example, it became evident that the events triggering affected multiple components, not just one. Check out My Stackblitz 2 component test