Angular 6 output info from the component when another component is clicked

Question

I have 3 components: 1. List of clients 2. Client (name) 3. Client's full info (name, age, address), that must appear when I click on the user item.

And I can't understand, how can I get info (how to show the third component) about a specific client, when I click on this client in clients list.

This is my code:

1) clients-list.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { ClientsService } from '../clients.service';
import { Client } from '../../models/client.model';  

@Component({
  selector: 'app-clients-list',
  templateUrl: './clients-list.component.html',
  styleUrls: ['./clients-list.component.css']
})
export class ClientsListComponent implements OnInit {

  public clients: Client[] = [];
  public selectedClient;
  constructor(private _clientsService: ClientsService) {}
  ngOnInit() {
    this._clientsService.getClient()
      .subscribe(data => this.clients = data);
  }

}

clients-list.component.html:

<app-client-detail *ngFor="let client of clients" [clients]="client" (clientSelected)="selectedClient=client"></app-client-detail>
<app-selected-client-details></app-selected-client-details>

2) client-detail.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-client-detail',
  templateUrl: './client-detail.component.html',
  styleUrls: ['./client-detail.component.css']
})
export class ClientDetailComponent implements OnInit {
  @Input() clients;
  @Output() clientSelected: EventEmitter<any> = new EventEmitter;
  constructor() {}
  ngOnInit() {}
  selectClient() {
    this.clientSelected.emit();
  }
}

client-detail.component.html:

<div (click)="selectClient()">
  <p>{{clients.name}}</p>
</div>

3) selected-client-details.component.ts:

import {Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'app-selected-client-details',
  templateUrl: './selected-client-details.component.html',
  styleUrls: ['./selected-client-details.component.css']
})
export class SelectedClientDetailsComponent implements OnInit {
  @Input() selectedClient;

  constructor() {}
  ngOnInit() {}
}

selected-client-details.component.html:

<div>
  <p>{{selectedClient?.firstName}}</p>
  <p>{{selectedClient?.age}}</p>
  <p>{{selectedClient?.address}}</p>
</div>

---

If my clients-list.component.html looks like this -

<app-client-detail *ngFor="let client of clients" [clients]="client" (clientSelected)="selectedClient=client"></app-client-detail>

<div>
  <p>{{selectedClient?.firstName}}</p>
  <p>{{selectedClient?.age}}</p>
  <p>{{selectedClient?.address}}</p>
</div>

• it works. When I click on user, block whith user's info appear. But user's info must be another component. And there is a problem.

I think I must to do something like this:

(in clients-list.component.html)

<app-client-detail *ngFor="let client of clients" class="client-item" [clients]="client" (clientSelected)="selectedClient=client"></app-client-detail>

<app-selected-client-details [???]></app-selected-client-details>

But I can't understend how can I do it. Help me pleeease...

Answer 1

I did some changes to your code but first on client details selectClient method was emit undefined I fixed to this

this.clientSelected.emit(this.client); // client was clients

clients-list.component.html look like this

<app-client-detail *ngFor="let client of clients" [client]="client" 
(clientSelected)="selectedClientComponent.selectedClient=$event"></app-client-detail>


<app-selected-client-details #selectedClientComponent></app-selected-client-details>

And this how I sent the selected client to selected client component by make a template refrence #selectedClientComponent and assign the $event to selectedClient of selectedClientComponent

selectedClientComponent.selectedClient=$event

$event is the cleint object that was emited

stackblitz example