Angular Dynamic Properties Decorator

angular-dynamic-property-decorator.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

function getData(url) {
  return function (target, key) {
    const privateKey = `_${key}`

     function getter() {
       if (this[privateKey]) {
         return this[privateKey];
       }
       this[privateKey] = this.http.get(`https://jsonplaceholder.typicode.com${url}`);
       return this[privateKey]
    }

    function setter(newVal) {
      if (this[privateKey] !== newVal) {
        this[privateKey] = newVal;
      }
    }

    Object.defineProperty(target, key, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true
    })

  }
}



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @getData('/users') users;
  constructor(private http: HttpClient) {
  }
}


<div *ngFor="let user of users | async">{{ user.name }}</div>