How to highlight the selected row in angular js 4

Question

Hi i trying out an example like passing data from parent to child and child to parent by custom component.

Below are the files which i used for example. i attached the both html and ts files of parent and child component.

each employee have button called select record. on click of button entire row should be highlighted.

     Parent component (app.component.ts)

    import { Component } from '@angular/core';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        title = 'app';

    public employeeRecord: any = [
    {eId: 1, eName: "sachin", eCity: "Mumbai", eSalary: 8000},
    {eId: 2, eName: "Yuvi", eCity: "Panjab", eSalary: 9000},
    {eId: 3, eName: "Dhoni", eCity: "Ranchi", eSalary: 800},
    {eId: 4, eName: "Dravid", eCity: "Bangalore", eSalary: 8000},
    {eId: 5, eName: "Anil", eCity: "Delhi", eSalary: 2000}
];
selectedRecordData: any = {
    selectedEmplyoeeName: "",
    selectedEmplyoeeCity: "",
    selectedEmplyoeeSalary: ""
};
getSelectedRecord(data) {
    this.selectedRecordData = data;
}
}

Parent Component html (app.component.html)

    <h1>Employee Record List</h1>


      <h1>Selected Employee</h1>
       <h3>Id : {{selectedRecordData.selectedEmplyoeeId}}</h3>
       <h3>Name : {{selectedRecordData.selectedEmplyoeeName}}</h3>
       <h3>City : {{selectedRecordData.selectedEmplyoeeCity}}</h3>
       <h3>Salary : {{selectedRecordData.selectedEmplyoeeSalary}}</h3>

     <app-custom-component 
    [id] = "employee.eId" 
    [name] = "employee.eName"
    [city] = "employee.eCity"
    [salary] = "employee.eSalary"
     (sendRecord) = "getSelectedRecord($event)"
    *ngFor="let employee of employeeRecord;">
     </app-custom-component>

custom-component (Custom-component.ts).
   import { Component, OnInit, Input, Output, EventEmitter } from 
     '@angular/core';

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

constructor() { }

ngOnInit() {
}
isSelect: false;    
@Input('id') employeeId: number;
@Input('name') employeeName: string;
@Input('city') employeeCity: string;
@Input('salary') employeeSalary: number;

@Output() sendRecord: EventEmitter<any> = new EventEmitter();

public selectedRecord(event) {
    let selectedEmplyoeeRecordDetails: any = {
        selectedEmplyoeeId: this.employeeId,
        selectedEmplyoeeName: this.employeeName,
        selectedEmplyoeeCity: this.employeeCity,
        selectedEmplyoeeSalary: this.employeeSalary,
    };
    this.sendRecord.emit(selectedEmplyoeeRecordDetails);
      isSelect = true;
     }
   }



 **Custom component (custom.component.html)**
<div [ngClass]="{'highlight': isSelect}">
<h3>Id : {{employeeId}}</h3>
<h3>Name : {{employeeName}}</h3>
<h3>City : {{employeeCity}}</h3>
<h3>Salary : {{employeeSalary}}</h3>
<button (click)= "selectedRecord(event)">SelectRecord</button>

---

Answer 1

You can add a css class say 'highlight' and apply it only when selected employee matches with the component's employee. So with modification you custom component should look like this:

Custom-component.ts

export class CustomComponentComponent implements OnInit {

@Input('selected') isSelected:boolean;
@Input('name') employeeName: string;
@Input('city') employeeCity: string;
@Input('salary') employeeSalary: number;

@Output() sendRecord: EventEmitter<any> = new EventEmitter();
count: number = 0;
public selectedRecord(event) {
    let selectedEmplyoeeRecordDetails: any = {
        selectedEmplyoeeName: this.employeeName,
        selectedEmplyoeeCity: this.employeeCity,
        selectedEmplyoeeSalary: this.employeeSalary,
};
this.sendRecord.emit(selectedEmplyoeeRecordDetails);
}

}

custom-component.html

<div [ngClass]="{'highlight': isSelected}">
 <h3>Name : {{employeeName}}</h3>
 <h3>City : {{employeeCity}}</h3>
 <h3>Salary : {{employeeSalary}}</h3>
 <button (click)= "selectedRecord(event)" >SelectRecord</button>
 </div>
<hr>

and finally app.component.html

<h1>Employee Record List</h1>

<hr>

    <h1>Selected Employee</h1>
    <h3>Name : {{selectedRecordData.selectedEmplyoeeName}}</h3>
    <h3>City : {{selectedRecordData.selectedEmplyoeeCity}}</h3>
    <h3>Salary : {{selectedRecordData.selectedEmplyoeeSalary}}</h3>
    <hr>
    <app-custom-component 
    [name] = "employee.eName"
    [selected]= "selectedRecordData.id === employee.id"
    [city] = "employee.eCity"
    [salary] = "employee.eSalary"
    (sendRecord) = "getSelectedRecord($event)"
    *ngFor="let employee of employeeRecord;">
    </app-custom-component>

I have added an extra property id as unique identifier.