How to use Angular routing

Angular routing is a core feature that manages navigation within a single-page application (SPA), providing seamless transitions between different views or components without refreshing the page.

With routing, you configure different routes mapped to URL paths and specify which component should render for each path—enabling dynamic loading and a responsive user interface.

1. Creating an Angular application and integrating Syncfusion Grid:

Begin by creating a new Angular project and enabling routing during setup. Follow the getting started guide for details. To support routing, create at least two components for navigation using:

ng generate component component-name

Replace component-name with your desired component name. This command generates the TypeScript file, HTML template, styles, and corresponding test file for your component. Repeat for each component you wish to create.

2. Defining routes:

Create an app-routing.module.ts file in the app directory. Import your components and define a Routes array mapping URL paths to components. For example:

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

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

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

3. Configuring the router module:

In the root module (app.module.ts) file import the AppRoutingModule and add it to the imports array.

import { AboutComponent } from './about.component';

4. Setting up navigation:

Add router links to your component template using the routerLink attribute on anchor tags. Use <router-outlet> in the root template where the active component should be rendered.

<nav>
  <ul>
    <li><a routerLink="/">Home</a></li>
    <li><a routerLink="/about">Grid 1</a></li>
    <li><a routerLink="/contact">Grid 2</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

With this approach, clicking “Grid 1” or “Grid 2” loads the respective grid component; the “Home” link returns to the home page.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, FilterService, PageService, GridAllModule} from '@syncfusion/ej2-angular-grids'
import { MultiSelectModule, CheckBoxSelectionService,DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
imports: [
        
        GridAllModule,
        MultiSelectModule,
        DropDownListAllModule,
        CheckBoxModule,
        AppRoutingModule
    ],

providers: [FilterService, PageService,CheckBoxSelectionService],
standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
<nav>
  <ul class="router-list">
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">Grid 1</a></li>
    <li><a routerLink="/contact">Grid 2</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // Optional: Redirect to 'home' for the empty path
  { path: '**', redirectTo: '/home' }, // Optional: Redirect to 'home' for unknown routes 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { data } from '../datasource';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor() { }
  public data!: Object[];
  ngOnInit(): void {
    this.data = data.slice(0,5);
  }

}
<div class="control-section">
  <ejs-grid [dataSource]='data'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
    </e-columns>
    </ejs-grid>
</div>
import { Component, OnInit } from '@angular/core';
import { employeeData } from '../datasource';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  constructor() { }
  public data!: Object[];
  ngOnInit(): void {
    this.data = employeeData.slice(0,5);
  }

}
<div class="control-section">
  <ejs-grid [dataSource]='data' allowReordering='true'>
      <e-columns>
          <e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right'></e-column>
          <e-column field='FirstName' headerText='Name' width='140'></e-column>
          <e-column field='Title' headerText='Title' width='170'></e-column>
          <e-column field='HireDate' headerText='Hired Date' width='120' format='yMd' textAlign='Right'></e-column>
          <e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column>
      </e-columns>
  </ejs-grid>
</div>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
<h2 id="homeDiv">Welcome!</h2>