I created a simple angular component to test the usage of a variable that uses a getter/setter style:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
_name = 'Variable Example';
get name(): string {
console.log("GET!!!");
return this._name;
}
set name(value:string): void {
this._name = value;
}
}
Then, I use this variable on the html:
<p>
{{ name }}
</p>
What I noticed is that the get name()
is called 4 times (check live in here)
There is any best practices rules which points out that getter
and setters
shouldn't be used on html components? Will I have performance issues using this approach?
Thank you!
PS: This is not the real scenario, it just a small example of what I'm doing.