10.a Routing basics Router links

AIM:  Create multiple components and add routing to provide navigation between them.

Install angular client 13.0 globally, if it is not present in your system

COMMAND:

npm install -g @angular/cli@13.0

create a new angular project abc

ng new abc

go into abc folder and create components  

ng generate component home

ng generate component about

ng generate component contact

Open app-routing.module.ts and add routes:

---------------------------

import { NgModule } from '@angular/core';

import { RouterModule, Routes } 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: '', component: HomeComponent },        // default route

  { path: 'about', component: AboutComponent },

  { path: 'contact', component: ContactComponent }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}

-----------------------------------

Open app.component.html:  and replace with below code

------------------------

<h1>My Angular Routing Example</h1>

<nav>

  <a routerLink="">Home</a> |

  <a routerLink="about">About</a> |

  <a routerLink="contact">Contact</a>

</nav>

<hr />

<router-outlet></router-outlet>

----------------------

home.component.html

---------------

<h2>Welcome to Home Page</h2>

<p>This is the home component.</p>

-------------------

about.component.html

-----------------------

<h2>About Us</h2>

<p>This is the about component.</p>

-----------------

contact.component.html

--------------

<h2>Contact Us</h2>

<p>This is the contact component.</p>

-----------------------

start the service and test, -o opens browser automatically 

ng serve -o

output