HelpBot Assistant

How can I help you?

Routing sample in Angular Grid Component

19 Mar 20269 minutes to read

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, different routes are configured to URL paths and the component that should render for each path is specified 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 a desired component name. This command generates the TypeScript file, HTML template, styles, and corresponding test file for the component. Repeat for each component to create.

2. Defining routes:

Create an app-routing.module.ts file in the app directory. Import the 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 the 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';
import { AppRoutingModule } from './app-routing.module'

@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';
// Removed internal Syncfusion imports from routing module; feature modules should import GridModule in AppModule.

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: [],
  exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { data } from '../datasource';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [CommonModule, GridModule],
  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 { CommonModule } from '@angular/common';
import { employeeData } from '../datasource';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule, GridModule],
  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';
import { CommonModule } from '@angular/common';

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

  constructor() { }

  ngOnInit(): void {
  }

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