Angular 17 Routing Working Example

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you Angular 17 Routing Working Example.

Guys in this post we will cover below things:

1. Angular17 Routing.
2. Responsive Navigation in Angular17 with Bootstrap 5.
3. Create components in Angular.

Guy’s Angular 17 came and if you are new in Angular 17 then please check the below link:

1. Angular 17 Tutorials

Guy’s here is working code snippet for Angular 17 Routing Tutorial and please follow it carefully to avoid the mistakes:

1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularrouting //Create new Angular Project

cd angularrouting // Go inside the Angular Project Folder

2. Now guy’s, here we need to run below command into our project terminal to install bootstrap 5 module for styling and good looks into our angular application(optional):

npm install bootstrap

npm i @popperjs/core 

3. Now guy’s, here we need to run below commands into our project terminal to create home and about components for routing:

ng g c home

ng g c about

4. Now guy’s, now we need to add below code into our angularrouting/angular.json file to add bootstrap style:

...
 "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              
            ],

5. Now guy’s, now we need to add below code into our angularrouting/src/app/app-routes.ts file to make routes:

import { Routes } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';
export const routes: Routes = [
      {
        path: '', title: 'Home Page', component: HomeComponent,
      },
      {
        path: 'about', title: 'About Page', component: AboutComponent,
      },
];

6. Now guys, now we need to add below code into our angularrouting/src/app/app.component.html file to set the angular frontend and call others components with routing:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" routerLink="/">Therichpost.com</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" routerLink="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/about">About</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<div class="container p-5">
  <router-outlet></router-outlet>
</div>

7. Now guys, now we need to add below code into our angularrouting/src/app/app-component.ts file to make routing works:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular17';
}

Guy’s in the end please run ng serve command to check the out on browser(localhost:4200) and if you will have any query then feel free to comment below.

Guy’s I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks.