How to use angular routing

Angular routing is a feature of the Angular framework which facilitates the control of navigation within a single-page application (SPA). It provides a mechanism for managing navigation between different components or views within an application.

In Angular routing, you can able to configure the different routes for different URL’s or paths, allowing you to navigate between different sections or pages of the application. This approach is particularly advantageous for SPA’s since it permits the loading of content dynamically without requiring a complete page refresh.

1. Creating an angular application and integrating the Syncfusion Grid component:

A simple angular project can be created by following the steps under the getting started section of this documentation by enabling the routing option.

To use Angular routing in your application, you need to create at least two components that can be navigated from one to another. You can create these components using the following command line:

ng generate component component-name

Replace component-name with the desired name for your component. Running this command will generate the necessary files and code for your component, including the TypeScript file, HTML template, CSS styles, and the component’s test file. Repeat the above command for each component you want to create.

2. Defining Routes:

To define the routes create a new file app-routing.module.ts under the app directory. You can define the routes that correspond to different components in this file. Import the components and define an array of route objects that specifies the path and the component to be rendered for each route.

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 links to the components and assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the components to render.

Add <router-outlet> in the root component’s template file which will be replaced with the component corresponding to the current route.

<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>

In this demonstration, Angular routing was utilized to create and define routes for multiple components. By clicking on the links labeled Grid1 and Grid2, you can easily navigate to view the respective grid components. Additionally, the Home link allows you to return 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>