Day 4: Routing and Navigation in Angular

🚀 Check Out My YouTube Channel! 🚀

Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel devDive with Dipak. I post practical full-stack development videos that complement my blog posts. Your support means a lot!

In the previous blog posts, we have covered the core concepts of Angular, including components, modules, services, directives, pipes, and dependency injection. Today, we will explore Routing and Navigation in Angular, which is essential for creating dynamic and interactive single-page applications.

What is Routing in Angular?

Routing in Angular is the process of defining how the application responds to different URLs. It allows you to create multiple routes in your application, each with its own component or view. This enables users to navigate between different parts of your application without having to reload the entire application.

How to Set Up Routing in Angular?

To set up routing in Angular, you need to create a routing module and define routes in it. Here's how you can do it:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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

How to Use Routing in Angular?

To use routing in Angular, you need to import the routing module in your application module and configure the routes. Here's how you can do it:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

How to Navigate Between Routes in Angular?

To navigate between routes in Angular, you can use the routerLink directive in your templates or the router.navigate method in your components.

// home.component.html
<nav>
  <a routerLink="/about">About</a>
</nav>

// home.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: '<nav><a routerLink="/about">About</a></nav>'
})
export class HomeComponent {
  constructor(private router: Router) {}

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

Conclusion

In this blog post, we have covered the basics of routing and navigation in Angular. We have seen how to set up routing in Angular, how to use routing in Angular, and how to navigate between routes in Angular. By mastering routing and navigation in Angular, you can create dynamic and interactive single-page applications that provide a better user experience.