CODEWITHSUNDEEP
angularhtmlroutesfrontendangular7
Ziya Arslan
Ziya Arslan

Reputation: 131

Angular 7 routing doesn't work properly it refreshes the page

Here is the problem that I have:

I don't want to refresh my website when I select one of the tabs in my navbar. I'm new to angular and as I understand the router should route to a page without reloading the link.

My code in app-routing-module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BlogComponent } from './blog/blog.component'
import { AboutComponent } from './about/about.component'

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'blog', component: BlogComponent},
  { path: 'about', component: AboutComponent}
];

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

My code in app.component.html

<link href="https://fonts.googleapis.com/css?family=Kotta+One" rel="stylesheet">

<div class="sidenav">
<ul>
  <li><a href="/" class="custom-underline">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/about">About</a></li>

  <iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</ul>
</div>
<router-outlet></router-outlet>

Happy holidays!

Upvotes: 1

Views: 684

Answers (1)

frido
frido

Reputation: 14099

You should use the routerLink directive in your links instead of href.

e.g.

<a routerLink="/blog">Blog</a>

Upvotes: 3

Related Questions