Usage of service in HTML [closed]

My colleagues and I had a discussion while doing an MR yesterday. The question was whether one should call a service directly in the HTML or create a getter calling the service.

• 
  Direct usage:
  
  Component:
  
  constructor(protected readonly yourService: YourService) {}
  
  
  Template:
  
  <div>
  @if (yourService.methodName) {
  <p>Show something</p>
  }
  </div>
• 
  Usage with getter
  
  Component:
  
  constructor(private readonly _yourService: YourService) {}
  
  public get getterName(): boolean {
  return this._yourService.methodName;
  }
  
  
  Template:
  
  <div>
  @if (getterName) {
  <p>Show something</p>
  }
  </div>

What would you use? With what reasonable?

Continue reading...