Component interaction with services

<div class="mt-3 container">
  <h3>All Users</h3>
  <app-all-users></app-all-users>
</div>

export class AllUsersComponent implements OnInit {
  constructor(private userService: UserService) {}

  users: User[];
  ngOnInit(): void {
    this.users = this.userService.users;
  }

  showDetails(user: User) {
    this.userService.showUserDetails(user);
  }
}

<div class="container">
  <div class="user-container">
    <div class="row">
      <div class="col">
        <div
          class="row mb-3"
          style="border: 1px solid #000; padding: 10px"
          *ngFor="let user of users">

          <div class="col">{{ user.name }}</div>
          <div class="col">{{ user.job }}</div>
          <div class="col">
            <button (click)="showDetails(user)">Details</button>
          </div>

        </div>
      </div>
      <div class="col"><app-user-detail></app-user-detail></div>
    </div>
  </div>
</div>

export class UserDetailComponent implements OnInit {
  constructor(private userService: UserService) {}
  user = {} as any;
  ngOnInit(): void {
    this.userService.onShowDetailsClicked.subscribe(
      (data) => (this.user = data)
    );
  }
}

<div class="card" style="width: 18rem" *ngIf="user.name != undefined">
  <img src="https://via.placeholder.com/150" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">{{ user.name }}</h5>
    <p class="card-text">
      Job: {{ user.job }} <br />
      Gender: {{ user.gender }} <br />
      Country: {{ user.country }} <br />
      Age: {{ user.age }}
    </p>
  </div>
</div>

export class UserService {
  constructor() {}
  users = [
    {
      name: 'John',
      job: 'Teacher',
      gender: 'Male',
      country: 'United States',
      age: 35,
    },
    {
      name: 'Mark',
      job: 'Deginer',
      gender: 'Male',
      country: 'Israel',
      age: 25,
    },
    {
      name: 'Debby',
      job: 'Doctor',
      gender: 'Female',
      country: 'India',
      age: 43,
    },
    {
      name: 'Sara',
      job: 'Seller',
      gender: 'Female',
      country: 'Holand',
      age: 19,
    },
  ];
  
  onShowDetailsClicked = new EventEmitter<User>();

  showUserDetails(user: User) {
    this.onShowDetailsClicked.emit(user);
  }
}