Angular navigation is inconsistent in its functionality

Currently, my Angular project consists of four components: home, portfolio, contact, and about. While I can navigate from the home page to any other component using the nav-bar, I am restricted to navigating only back to the home page when on any other page.

https://i.sstatic.net/xZks9.png

The image provided illustrates the issue when attempting to navigate to the about router-link from a component other than the home page, which is located in the app-component.

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

import { HomeComponent } from './home/home.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '' , component: HomeComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the content of my app-routing.module.ts file.

            <nav class="navbar navbar-expand navbar-trans">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img height="250" src="assets/Kaan-Logo-PNG.png" alt="logo">
                </a>
                <div class="pull-xs-right justify-content-end" id="navbarToggler-1">
                    <ul class="nav navbar-nav mt-2 mt-md-0">
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

This section showcases the content within my portfolio.component.html file.

Answer №1

One way to enhance your routerLink entries is by including the forward slash like routerLink="/about"

Answer №2

Make the necessary updates to the portfolio.component.html file as shown below.

<nav class="navbar navbar-expand navbar-trans">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img height="250" src="assets/Kaan-Logo-PNG.png" alt="logo">
                </a>
                <div class="pull-xs-right justify-content-end" id="navbarToggler-1">
                    <ul class="nav navbar-nav mt-2 mt-md-0">
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="/portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="/about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="/contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

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

Ways to position two images in the center

A website has been created by me and now I am looking to center text on the two images in the header. Here is the relevant code snippet: <div class="header"> <img src="css/title578145459.png" class="headerImage left&qu ...

Version 4.6.4 of TypeScript is flagging the code as invalid

How can I fix this Typescript problem? const userInformation: { email: string; id: string; _token: string; _tokenExpirationDate: string; } = JSON.parse(localStorage.getItem('userData')); https://i.sstatic.net/xMh9P.pn ...

How is it possible for Typescript to let me create an object without explicitly defining all mandatory fields?

After creating a class and instantiating an object from it through the constructor, I expected to receive an error message indicating missing properties. However, despite the fact that the class description specified required fields, I was able to create a ...

Updating an array of key/value pairs in Mongoose: A step-by-step guide

Context: I am dealing with an array of objects retrieved from Vue Axios. These objects contain key-value pairs and are stored in the req.body. Request Body: keyValue: [{key:"some key", value:"some value"}, {key:"some key2", value:"some value2"}] Import ...

The Angular Date Pipe is displaying an incorrect date after processing the initial date value

Utilizing Angular's date pipe within my Angular 2 application has been beneficial for formatting dates in a user-friendly manner. I have successfully integrated API dates, edited them, and saved the changes back to the API with ease. However, an issue ...

Creating an if statement based on the currently chosen option

My angular JS page includes a drop-down list: <div class="col-md-4 fieldMargin"> <div class="dropdownIcon"> <select name="actions" id="actions" ...

Encountering numerous TypeScript errors due to a JavaScript file in Visual Studio 2017

Kindly review the update below I utilized the following package as a foundation for my VS Project -> https://github.com/AngularClass/angular2-webpack-starter Everything ran smoothly in Visual Studio Code, but when I attempted to convert it into a Visu ...

Ensure that the string functions as the primary interface

I'm working with an interface that looks like this interface Cat { color: string, weight: number, cute: Boolean, // even though all cats are cute! } Currently, I need to accomplish something similar to this const kitten: Cat = ... Object. ...

Exploring Angular: Unraveling the Mystery of Accessing Nested Arrays in Objects

Looking into an Angular-14 application, a JSON response is retrieved: { "data": { "pageItems": [ { "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6", "merchantId": "3fa85f64-5717 ...

async.series: flexible number of functions

Hello everyone, I'm currently working with Node.js (Express) and MongoDB (mongooseJS). My goal is to create a series of async functions that query the database in the right order. Here is my question: How do I go about creating a variable number of a ...

The AJAX request was successful, however, the PHP script did not return any

When using an Ajax success function to alert data in JavaScript, there may be occasions where the PHP side shows that the GET array is empty. <script type="text/javascript"> var myArray={ name:"amr", age:22 } myArray =JSON.stringify(myA ...

Encountering an error of undefined upon submission of a form while utilizing ng

Sorry if this question has been asked before, but I've searched extensively online and still can't find a solution. I'm new to Angular and TypeScript and I may be overlooking something simple, but I can't get it to work. Any help would ...

Postpone reloading automatically if a division is in view

I endeavored to develop a small project aimed at monitoring flights passing over my vicinity. Utilizing the flight-radar24 API python package, I managed to extract the necessary data. Subsequently, I designed a systemd service to execute my python script ...

Problem with CSS layout on Internet Explorer 9

I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 ...

Eliminating the GWT Window Padding in LibGDX

Explanation: I am currently in the process of deploying a LibGDX GWT application to the browser. Challenge: In the image below, you can see the top left portion of my GWT application showcased by the large black rectangle. The issue here is the unwanted ...

Tips for deleting the drop-down arrow from Mozilla Firefox

Is there a way to eliminate the dropdown arrow that FireFox usually displays? I have included an image below showing what I am referring to: This is the CSS code I'm using: @-moz-document url-prefix(){ .class select { width: 110%; } } .class > ...

Exporting Data and Utilizing a Steady Data Table

I have incorporated the Fixed Data Grid into my latest project. https://facebook.github.io/fixed-data-table/example-sort.html My goal is to generate csv and pdf reports from the data displayed on the grid. Could you please advise me on how to export gri ...

Retrieve the computed value of a cell in an Excel spreadsheet using Node.js

Utilizing node.js in tandem with the exceljs module to process my Excel sheets. Writing values into specific cells while others already contain formulas. Seeking a method to trigger those formulas and programmatically store the resultant values in the she ...

Having trouble loading events on Fullcalendar.io?

Our team is utilizing fullcalendar.io and aiming to retrieve an event from our API controller. The Controller [Route("api/Bookings")] public class BookingApiController { // GET [HttpGet] public string Get() { ...

Transforming Angular 2 quickstart application for deployment on Google Cloud infrastructure

Attempting to deploy a basic project on Google Cloud platform has proven to be more challenging than expected. The simple quickstart project can be accessed here, and functions flawlessly locally. While there are other providers like Heroku that offer one ...