RouterLink and RouterLinkActive in Angular

The routerLink directive in Angular is used to define navigation links, while the routerLinkActive directive is used to add classes to the active links. This tutorial covers the basics of using routerLink and routerLinkActive effectively in your Angular applications.

Setting Up RouterLink and RouterLinkActive

To set up routerLink and routerLinkActive, you need to import the necessary modules and define your application routes:

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

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

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

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

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '
About Component
',
})
export class AboutComponent { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Using RouterLink

Use the routerLink directive to define navigation links. The routerLink directive accepts an array or a string as input:

// app.component.html

Using RouterLinkActive

Use the routerLinkActive directive to add classes to the active links. The routerLinkActive directive accepts a string of class names:

// app.component.html

Handling Navigation

To handle navigation in Angular, you can use the Router service. Here’s an example of navigating programmatically:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {}

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

// app.component.html
Go to About

Key Points

Conclusion

The routerLink and routerLinkActive directives are essential for managing navigation and active link styling in your Angular applications. By understanding and using these directives effectively, you can create dynamic and user-friendly applications with smooth navigation. Happy coding!