Angular pass object reference as input to routerLink component

Question

I am working on Angular and I populate a div with the contents of an array of Objects. I want to pass the object I click on to be passed as a reference to the router link which takes id as input:

<a [routerLink]="['/edit-emp-reactive',employee.id]">Edit</a> This links to an employee editing template that takes the id provided for editing details of the employee.

How do I pass the object as a reference This is the component HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <b>Employees List</b>
    <br>
    <br>

            <div class="form-group">
                <label for="search">Search</label>
                <input type="text" (keyup)="search()" id="search" [ngModel]="searchText"  (ngModelChange)="searchKey($event)"  placeholder="Find by name" ngModel>
            </div>

    <div class="row" *ngFor="let e of filteredEmployees">
        <div class="block" style="width:300px;height:100px;border:1px solid #000;">
            <h4>{{e.name}}</h4>
            <h6>₹ {{e.salary}}</h6>
            <app-employee-info></app-employee-info>
        </div>
        <br>
        <br>
    </div>
    
</body>
</html>

This is the component file:

import { Component, OnInit } from '@angular/core';
import { Employee } from '../Employee';
import {NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


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

  ngOnInit(): void {
    this.filteredEmployees=this.employeeList
    
  }
  
  

  filteredEmployees:Employee[]=[]

  searchText=""

  employeeList:Employee[]=
  [
    {
    id:1,
    name:"abc def",
    salary:20000,
    permanent:true,
    department:{id:1, name:"Payroll"},
    skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
    dateOfBirth:new Date('01/03/2002')
    },
    {
    id:1,
    name:"ssss gggg",
    salary:40000,
    permanent:false,
    department:{id:2, name:"Internal"},
    skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
    dateOfBirth:new Date('21/03/2006')
    },
    {
    id:1,
    name:"asdf zxcv",
    salary:60000,
    permanent:true,
    department:{id:3, name:"HR"},
    skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
    dateOfBirth:new Date('16/05/2010')
    },
    {
      id:1,
      name:"ghji",
      salary:90000,
      permanent:true,
      department:{id:3, name:"HR"},
      skill:[{id:1 , value:"HTML"},{id:2 , value:"CSS"},{id:1 , value:"JS"}],
      dateOfBirth:new Date('1/03/2003')
      }
  ];

  cEmployees = this.employeeList;

  searchKey(data:string)
  {
    this.searchText = data;
    this.search();
  }

  search()
  {
    
    this.filteredEmployees = (this.searchText === ""|| this.searchText===null)? this.employeeList : this.employeeList.filter((element) => {
      return element.name.toLowerCase() == this.searchText.toLowerCase();
    });
  }

}

Where is the link? Inside <app-employee-info></app-employee-info>? — Chrillewoodz
– Chrillewoodz, Commented Apr 30, 2021 at 6:54

Chrillewoodz · Accepted Answer · 2021-04-30 07:05:39Z

1

Simply add this code:

<app-employee-info [employee]="e"></app-employee-info>

And inside your info component add:

@Input() employee: <your-employee-type>;

answered Apr 30, 2021 at 7:05

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sapter Over a year ago

Thanks a lot . Really appreciate it.I am new to Angular and was trying to find the syntax to pass the object but strangely couldn't find it..

Péter Ciprián Oláh · Accepted Answer · 2021-04-30 07:06:30Z

1

In app-employee-info component you should decorate a variable with the @input decorator, that way you will be able to pass input parameter to the component, which you can reach in the component class and the HTML template too. Check the documentation here: https://angular.io/api/core/Input

answered Apr 30, 2021 at 7:06

Péter Ciprián Oláh

593 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular pass object reference as input to routerLink component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related