[Fixed] Find Customer information from Child Component using Event Emitter in Angular

Issue

I have two Sibling Component. In One Component I have some customer information, on click of which I am passing the id and some more information to the app component. By finding the id I need to find the complete information of the customer and display it in the sibling component.

Below is the code I am having.

HTML of App Component:

<customer-table [customers]="customers" (setSelectedId)="setSelectedId($event)"></customer-table>
<customer-details [selectedId]="selectedId" [customerDetailsRecords]="customerDetailsRecords"></customer-details>

App Component:

export class AppComponent {
  title = 'Customer Records';
  selectedId = '';

  customers: Customer[] = [{
      id: 'henry-gerard',
      firstName: "Henry",
      lastName: "Gerard",
      age: 21
    },
    {
      id: 'michael-platini',
      firstName: "Michael",
      lastName: "Platini",
      age: 40
    },
    {
      id: 'louis-figo',
      firstName: "Louis",
      lastName: "Figo",
      age: 37
    },
    {
      id: 'cristiana-ronaldinho',
      firstName: "Cristiana",
      lastName: "Ronaldinho",
      age: 15
    },
    {
      id: 'leonardo-messiah',
      firstName: "Leonardo",
      lastName: "Messiah",
      age: 25
    }
  ]

  customerDetailsRecords: CustomerDetail[] = [{
      id: 'henry-gerard',
      city: 'Los Angeles',
      gender: 'Male',
      pin: 3123,
      country: 'USA',
      state: 'CA'
    },
    {
      id: 'michael-platini',
      city: 'Miami',
      gender: 'Male',
      pin: 3176,
      country: 'USA',
      state: 'FL'
    },
    {
      id: 'louis-figo',
      city: 'Seattle',
      gender: 'Male',
      pin: 3176,
      country: 'USA',
      state: 'WA'
    },
    {
      id: 'cristiana-ronaldinho',
      city: 'Denver',
      gender: 'Female',
      pin: 3178,
      country: 'USA',
      state: 'CO'
    },
    {
      id: 'leonardo-messiah',
      city: 'Portland',
      gender: 'Female',
      pin: 3165,
      country: 'USA',
      state: 'OR'
    }
  ];

  setSelectedId(id) {
    //console.log(id);
    this.selectedId = id;
  }
}

Component A:

export class CustomerTable implements OnInit {
  @Input() customers: Customer[];
  @Output() setSelectedId: EventEmitter<string> = new EventEmitter<string>();

  sendCustomerId(customer: string) {
    this.setSelectedId.emit(customer);
  }

  constructor() { }
}

Component B:

export class CustomerDetails implements OnInit {
  @Input() customerDetailsRecords;
  @Input() selectedId;

  constructor() { }

Solution

Try the following –

customer-detail.component.html –

<h2>Customer Detail</h2>
<div>
    {{customerDetail?.id}}
</div>

customer-detail.component.ts –

export class CustomerDetailsComponent {

    @Input() customerDetail: CustomerDetail;

    constructor() { }
}

customer-table.component.html –

<h2>Customer Table</h2>
<div *ngFor="let customer of customers" (click)="sendCustomerId(customer?.id)">
    <p>{{customer.id}}</p>
</div>

customer-table.component.ts –

export class CustomerTableComponent {

    @Input() customers: Customer[];
    @Output() selected: EventEmitter<string> = new EventEmitter<string>();

    constructor() { }

    sendCustomerId(id: string) {
        this.selected.emit(id);
    }
}

app.component.html –

<customer-table [customers]="customers" (selected)="setSelectedId($event)"></customer-table>
<customer-detail [customerDetail]="selectedCustomer"></customer-detail>

app.component.ts –

export class AppComponent {

    customers: Customer[] = // initialize array of Customer
    customerDetailsRecords: CustomerDetail[] = // initialize array of CustomerDetail
    
    selectedCustomer: CustomerDetail;

    constructor() { }   

    setSelectedId(id) {
        this.selectedCustomer = this.customerDetailsRecords.find(p => p.id == id);
    }
}

Here is a working StackBlitz