angular service

resource.model.ts

export interface Resource {
    readonly id: number;
}

resource.service.ts

import {Resource} from "./resource.model";

export abstract class ResourceService<T extends Resource> {
    constructor(protected http: HttpClient, protected resourceUrl: string) { }

    find(query: object): Observable<T[]> {
        let options = { params: new HttpParams() };

        for (let key, value of Object.entries(query)) {
            options.params.set(key, value);
        }

        return this.http.get<T[]>(this.resourceUrl, options);
    }

    findById(id: string): Observable<T> {
        return this.http.get<T>(`${this.resourceUrl}/${id}`);
    }

    create(resource: T): Observable<T> {
        let options = {
            headers: new HttpHeaders({ 'Content-Type':  'application/json' })
        };

        return this.http.post<T>(this.resourceUrl, resource, options);
    }

    update(resource: T): Observable<T> {
        let id = resource.id;
        let options = {
            headers: new HttpHeaders({ 'Content-Type':  'application/json' })
        };

        return this.http.put<T>(`${this.resourceUrl}/${id}`, resource, options);
    }

    save(resource: T): Observable<T> {
        if (resource.id) {
            return this.update(resource);
        } else {
            return this.create(resource);
        }
    }
}

widget.component.html

<div class="widgets-list-container">
</div>

widget.component.ts

import { Component, OnInit } from '@angular/core';
import { Widget } from './widget.model';
import { WidgetService } from './widget.service';

@Component({
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.scss'],
})
export class WidgetsComponent implements OnInit {
  constructor(
    widgetService: WidgetService
  ) {}

  public ngOnInit(): void {
    this.widgetService.find({ }).subscribe((widgets) => {
      this.widgets = widgets;
    });
  }

  public createWidget(widget: Widget): {
    this.widgetService.save(widget).subscribe((widget) => {
      this.widgets.unshift(widget);
    });
  }

  public updateWidget(widget: Widget): {
    this.widgetService.save(widget).subscribe((widget) => {
      let index;

      for (let i=0; i<this.widgets.length; i++) {
        if (this.widgets[i].id = widget.id) {
          return index = i;
          break;
        }
      }

      if (index) {
        this.widgets[index] = widget;
      } else {
        this.widgets.unshift(widget);
      }
    });
  }
}

widget.model.ts

import {Resource} from "./resource.model";

export interface Widget extends Resource {
  name: string;
  count: number;
  createdAt: Date;
  updatedAt: Date;
}

widget.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Widget } from './widget.model.ts';
import { ResourceService } from "./resource.service";

@Injectable()
export class WidgetService extends ResourceService<Widget>{
  constructor(http: HttpClient) {
    super(http, '/api/widgets');
  }
}