esempio per avanade

// app.component
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../../model/user';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'ava-catalog',
  template: `
    <form #f="ngForm" (submit)="addUser(f)">
      <input type="text" ngModel name="name" required>
      <input type="text" ngModel name="phone">
      <button type="submit" [disabled]="f.invalid">ADD</button>
    </form>

    <li *ngFor="let user of users">{{user.name}}</li>
  `,
})
export class CatalogComponent {
  users: User[] = [];

  constructor(private http: HttpClient) {
    http.get<User[]>('https://jsonplaceholder.typicode.com/users')
      .subscribe(res => {
        this.users = res;
      })
  }

  addUser(form: NgForm) {
    console.log(form.value)
    this.users.push(form.value)
  }

}


// model/user.ts

export interface Geo {
  lat: string;
  lng: string;
}

export interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
}

export interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}