Exploring Angular5 Navigation through Routing

I have been working with Angular routing and I believe that I may not be using it correctly.

While it is functional, it seems to be causing issues with the HTML navbars - specifically the Info and Skills tabs.

When clicking on Skills, a component popup should appear as I had previously implemented Bootstrap modal for this purpose (which worked fine before introducing routing).

For clicking on Info, it should navigate to:

<div id="info">

Below is the routing configuration:

const routes: Routes =[
        { path: '', redirectTo: '/admin', pathMatch: 'full' },
        { path: 'admin', component: AdminComponent},          
        { path: 'projects', component: ProjectsComponent}        
    ];

Here is the main page's HTML code including the header navbar, which should function properly whether on the projects page or admin page:

<ul class="navbar-nav  mr-auto navbarCustom">
   <li class="nav-item">
      <a class="nav-link" routerLink="" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">
         <skills></skills>
      </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" routerLink="/projects" href="#">Projects</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#info">Info</a>
   </li>
</ul>
angulartypescriptangular-routing

Answer №1

Avoid using href in combination with routerLink.

Simply utilize [routerLink]="''" instead of routerLink="" href="#".

When clicking on the Info link, it should direct you to the corresponding fragment (Your html id). For instance, if your HTML contains a <div id="info">, the URL will look like this:

http://www....com/#/#info. Therefore, the use of #hash-tag will guide you to the intended fragment.

Refer to this StackBlitz demo for more information on Angular routing.

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

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

javascriptreactjstypescriptfirebasefirebase-authentication

Utilize knex.js and TypeScript to create queries with specific conditions

I am trying to create a dynamic query that will include a where clause based on whether the variables name and/or city are passed. While I couldn't find a specific method for this in the documentation, I attempted to add the where clauses directly to ...

typescriptknex.js

Are React component properties enclosed in curly braces?

I have a new component configured like this: type customType = differentType<uniqueType1, uniqueType2, uniqueType3>; function customComponent({q}: customType) When called, it looks like this: <customComponent {...myCustomVar} />, where myCus ...

javascriptreactjstypescript

Avoiding misreading email content with mail-listener2 - Tips for ensuring your function reads the correct emails

My E2E test utilizes the mail-listener2 to fetch emails. Though it generally works well, there is one recurring issue that I am struggling to resolve. Despite my extensive search for solutions online, the fix still eludes me. The problem arises when I use ...

node.jsangularprotractorimap

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Encountering an issue where manipulating/process response and return triggers an error in TypeScript with the message "Not all code paths return a value.". Data is fetched from a backend API using RxJS lastValueFrom operator, along with lodash functions as ...

javascriptangulartypescriptasync-awaitrxjs

Issue: Loading ES Module in MikroOrm and Typescript requires the use of import statement

My attempt to set up a mikrorm configuration for my postgres DB is hitting a snag when I try to run my run-dev script. The issue stems from an ESM compilation error: > yarn dev Error: Must use import to load ES Module: C:\Users\Itay&b ...

node.jstypescriptnpmmikro-orm

Angular2 routing directs me to a different URL path

In my Angular2 web application, I have set up the following routes: '', '/app', '/login', '/signin', '/validate', '/error', '**': I've defined a route configuration in app.router.t ...

angulartypescript

Benefits of Angular Signals - Why is it advantageous?

I'm grappling with the concept of Angular Signals and their benefits. While many examples demonstrate counting, I'm curious about why signals are preferable to using variables like myCount and myCountDouble as shown below? Check out my code on S ...

angularsignalsangular-signals

Issue with ambient contexts error in TypeScript constructor

What is the correct way to create a constructor in TypeScript? I have been researching and trying different approaches, but it seems like the syntax has changed. Here is my latest attempt: car.d.ts declare class Car { constructor(public engine: string ...

syntaxtypescript

Having constant problems with ngModel twoway binding. Any suggestions on how to successfully bind to a property in order to update an api link?

I am attempting to implement two-way binding in order to dynamically change the API endpoint when a button is clicked. The value attribute of the button should be used as part of the API URL string. I tried following an example in the Hero Angular App, bu ...

angulartypescriptdata-binding

Dynamic value for href in div using Angular

Implementing a dynamic submenu using Angular is my current project. At the moment, I have set the href attribute with hardcoding as shown below: <ng-template #preSelectionMenuItem let-preSelections="preSelections"> <div class=' ...

htmlangular

The Scrollable feature in Material2 cdk remains unutilized due to

Trying to implement the new APIs for listening to scroll events in Material2 has proven challenging. I followed the steps of importing the ScrollDispatchModule in my app.module.ts file and marking a container with the cdkScrollable directive: <div cdkS ...

angularangular-material2angular-cdk

Having difficulty installing node-sass in an Angular project

Having downloaded a repository from an existing Angular project, I proceeded to run sudo npm install within the project. While all packages were successfully installed, the node-sass package continued to cause issues. Upon completion of the installation ...

node.jsangularnpmsassnode-sass

What is the best way to accomplish this using typescript/adonis?

While exploring some code examples on Bitbucket, I came across a sample that demonstrated how to paginate query results using JavaScript. However, as I attempted to apply it in my project, I encountered difficulties in declaring the types required for the ...

javascripttypescript

What is the best way to access event.target as an object in Angular 2?

Apologies for my limited English proficiency. . I am trying to write code that will call myFunction() when the user clicks anywhere except on an element with the class .do-not-click-here. Here is the code I have written: document.addEventListener(' ...

javascriptangulartypescript

Struggling to properly interpret and process the latest data being sent from an Angular single page application (SPA

Currently, I am developing a Single Page Application that utilizes Angular 8 on the frontend and Laravel on the backend. The application involves performing CRUD operations, and specifically when dealing with editing functionality, I encounter an issue. Th ...

phpangularlaravelcrudedit

Tab-based Ionic 2 advertising campaign featuring banners

Is there a way to incorporate an advertisement banner image above the tabs in ionic 2? Any suggestions on how I can achieve this or create the banner in that specific position? ...

typescripttabsionic2adsbanner

Prevent all dates from being selected except for the last day of every month in the Angular Material Calendar component

Is it possible to restrict all dates except the final day of each month with Angular Material? I need users to only be able to select this particular date. There is a [matDatepickerFilter] property, but it seems to work only for a specific list of dates. ...

angularuser-interfaceangular-materialcalendar

Encountering issues with Semver while working on building an Angular 4 IMAP client

I am currently working on integrating an Imap Client into my Angular 4 app. I came across a helpful node module for implementing Imap using npm: Repository However, I encountered an issue. After adding the following line in angular-cli.json: "scripts": ...

angularnpmimap

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

javascripthtmlangular