person.component.ts

import { Component, OnInit } from '@angular/core';
import { Person } from './person.model';
import { PersonService } from './person.service';

@Component({
  selector: 'app-person',
  template: `
    <div>Selected Person: <span *ngIf="selected$ | async as person">{{person.name}}</span></div>
    <div *ngFor="let per of people$ | async" (click)="select(per)">
      <div>Name:  {{per.name}}</div>
      <div>Username:  {{per.username}}</div>
    </div>
  `,
  styles: [
  ]
})
export class PersonComponent implements OnInit {
  people$ = this.personService.items$;
  selected$ = this.personService.selected$;

  constructor(private personService: PersonService) { }

  ngOnInit(): void {
    // Load the data
    this.personService.load();

    // Examples of using the success observables
    // Try to avoid subscribing directly in a component like this. Unsubscribe if you have to!
    this.personService.updateSuccess$.subscribe((per) => alert('Update Success!'));
    this.personService.deleteSuccess$.subscribe((per) => alert('Delete Success!'))
  }

  select(per: Person) {
    // To select an item, you can call select it with select or get(id)
    // Using get will hit the api to get the latest from the DB
    this.personService.select(per);
    // OR
    // this.personService.get(per.id);
  }
}