The functionality of routerLink is not functioning as expected when used on button elements

My dashboard is designed to display information retrieved from Firebase. However, I am facing an issue with a button labeled as (more) that should redirect me to a specific page when clicked. Unfortunately, the button doesn't seem to be working as intended.

Here is the HTML code snippet from my file:

<table class="table table-inverse">
    <thead>
      <tr>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Email </th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        
        <th scope="col">Salary</th>
        <th scope="col">ID</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody >
      <tr *ngFor="let item of employees">
        
        <th >{{item.firstName}}</th>
        <th >{{item.lastName}}</th>
        <th >{{item.email}}</th>
        <th >{{item.country}}</th>
        <th >{{item.city}}</th>
        
        <th >{{item.salary}}</th>
        <th >{{item.key}}</th> 
        <th> <a href="" [routerLink]="['/employee/employee/]" class="btn btn-primary">more <i class="fa fa-info-circle" ></i>
        </a></th>
      </tr>
    </tbody>   
  </table>
  

I have already imported this module in the app.module.ts:

import { RouterModule, Routes} from '@angular/router';

Additionally, I have added the following route configuration:

{path:'employee/:id',component:EmployeeInfoComponent},

Answer №1

[routerLink]="['/employee/employee/]
" The routerLink attribute does not match your defined routes. It should be structured like
{path:'employee/:id', component:EmployeeInfoComponent},
. You also missed closing single quotes. Try using this instead:
[routerLink]="['/employee/, item.key]”

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to aligning a component in the middle of the screen - Angular

As I delve into my project using Angular, I find myself unsure about the best approach to rendering a component within the main component. Check out the repository: https://github.com/jrsbaum/crud-angular See the demo here: Login credentials: Email: [e ...

What is the best way to retrieve the ID of the input element using a jQuery object?

After submitting a form with checkboxes, I retrieve the jQuery object containing the checked input elements. var $form = $(e.currentTarget); var $inputs = $form.find("input.form-check-input:checked") Here is an example of how the inputs are stru ...

`How to Merge Angular Route Parameters?`

In the Angular Material Docs application, path parameters are combined in the following manner: // Combine params from all of the path into a single object. this.params = combineLatest( this._route.pathFromRoot.map(route => route.params) ...

Should I choose Angular with MVC or opt for Vue with MVC?

Exploring options for a fresh web solution utilizing MVC to showcase actual data, what would be the best choice between integrating Vue.js or Angular? Which of these frameworks is more suitable for a MVC project with a focus on scalability and seamless i ...

Toggle the visibility of items based on the user's login status

Below is the code snippet for when the user is logged out: <div class="fusion-secondary-main-menu"> <div class="fusion-row"> <?php avada_main_menu(); ?> <?php avada_mobile_menu_search( ...

Looking to showcase both input and output on a single PHP page?

I am working with a table that fetches rows from a database. I need to display the output of each row next to the table itself. The data for the output is also retrieved from the database. For example, when a user clicks on a particular row, I want to sho ...

Using Typescript and ThreeJS, include new elements to the environment within the loader

Can someone help me with the following code snippet? export class LandingPageComponent implements OnInit { scene: THREE.Scene; (...) ngOnInit() { this.scene = new THREE.Scene(); var loader = new THREE.JSONLoader(); loader.load("../../assets/fire_lion.j ...

What is the best way to adjust the placement of a component to remain in sync with the v-model it is connected to?

I am encountering an issue with 2 sliders in my project. I have set it up so that when the lower slider's value is greater than 0, the top slider should automatically be set to 5. I am using a watcher function for this purpose. However, if I manually ...

Steer clear of Cross-Site Request Forgery through

As someone who is still learning about web security, I am curious about the best practices for using tokens on JavaScript requests to prevent CSRF attacks. Is it possible for someone to provide a code example? I already know how to implement this properly ...

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

In the event that the final calculated total is a negative number, reset it to zero. Inform the user of an error through the use of a prompt dialog box

I'm having trouble getting the grand total to display as 0 when I enter all amounts in positive values and then change the unit prices to negative values. However, it works fine when I only enter negative values throughout. Can someone please help me ...

Docusaurus font loading specifically optimized for body text, excluding headings

I've added the following CSS code to my Docusaurus custom stylesheet: @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"); :root { --ifm-color- ...

Accordion border in Bootstrap should be applied to all items except the first one

I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...

What is the reason for my JSON reference returning as undefined?

Here's my JavaScript code: $.getJSON("/aTest.json", function (jsonObj) { $("#testJSONBtn").click(function () { var val = ""; for (var i = 0; i <= jsonObj.events.length; ++i) { val += jsonObj.events[i].title + ", " + ...

What is the process for adding or modifying attributes in child elements?

I have been experimenting with a simple script that adds the target="_blank" attribute to all the <a> elements. $(function(){ $('a').attr('target', '_blank'); }); While it is functioning perfectly, I am now interested ...

Activating the Submission of a File in a JQuery Form Plugin

Currently, I am using the JQuery Form Plugin to facilitate file uploads on my website. Instead of using a standard submit button, I would prefer to have a div element trigger the submission process. Here is the code I have attempted: $(document).on(&apo ...

Issue with Angular 2 in Visual Studio 2013: Pressing Ctrl+K+D causes formatting to change to lowercase

Please note that while this issue is not directly related to Angular2, anyone who uses Angular2 with Visual Studio 2013 may be able to help. Whenever I use the key combination Ctrl + K + D in Visual Studio 2013, it changes HTML or Angular2 directives/mark ...

Generating dynamic divs in parallel

Despite encountering numerous posts related to the issue at hand, none of them have solved my specific problem. I am aiming for 3 divs to display in each row, but the current code is causing each div to show up on a new line vertically: JQuery ...

Discovering the lengthiest strings in a multi-dimensional array using JavaScript

let lists = ["Grocery", "Clothing", "Furniture"]; let items = [ [ "tomatoes", "cheese", "bread", "ham" ], [ "shirt", "jacket", "jeans" ], [ "sofa", "carpet", "bed" ] ]; These two arrays are connected in ...

Exploring arrays and objects in handlebars: A closer look at iteration

Database Schema Setup var ItemSchema = mongoose.Schema({ username: { type: String, index: true }, path: { type: String }, originalname: { type: String } }); var Item = module.exports = mongoose.model('Item',ItemSchema, 'itemi ...