when i use href in angular app demo2 the page refresh
i need to use id navigation to go from navbar to specific section in my home page
so i put in my anchor in navbar href="#about"
and in my section id="about"
but, the page refresh and didn`t go to the section
please support
Replies (2)
In an Angular app, using href="#about" can cause a full page refresh, which is not the intended behavior for single-page applications (SPAs). Instead, you should use Angular's built-in fragment navigation. Here's how you can do it properly:
Solution:
- Use routerLink with a fragment instead of
href:
<a [routerLink]="['/home']" fragment="about">About</a>
- Make sure your section has the corresponding id:
<section >
<h2>About Us</h2>
<p>Some content here...</p>
</section>
- Enable fragment navigation in app.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Explanation:
- routerLink with fragment: This tells Angular to navigate within the same page without refreshing.
anchorScrolling: 'enabled': Ensures smooth scrolling to the section.scrollPositionRestoration: 'enabled': Keeps the scroll position when navigating back.
If you're looking for a refreshing break while coding, you might also want to check out the Starbucks Refreshers Menu for a cool and energizing drink
Hi,
Your question isn't related to Metronic itself. It's more of an Angular question.
Here is some solutions:
Regards,
Keenthemes support
