Lazy getter in Angular components

lazy-getter-usage.component.ts

// Avoid useless computations and combine the property and its initialization method
// Live demo at stackblitz.com/edit/angular-lazy-getter
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { LazyGetter } from 'lazy-get-decorator';

@Component({
  selector: 'lazy-getter-usage',
  template: `
    <h1>{{ sayHelloWithLazyGetter }}</h1>
    <h1>{{ sayHelloWithoutLazyGetter() }}</h1>
    <input type="number" [(ngModel)]="counter">
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LazyGetterUsageComponent  {
  message = 'Hello';
  name = 'Jack';
  counter = 0; // Used to trigger changes detection

  @LazyGetter()
  get sayHelloWithLazyGetter(): string {
    console.log('sayHello called with lazy getter!');
    return `${this.message} "${this.name}"`
  }

  sayHelloWithoutLazyGetter(): string {
    console.log('sayHello called without lazy getter!');
    return `${this.message} "${this.name}"`
  }
}