Angular 11 Router Tutorial With Example

Angular 11 Router Tutorial With Example

Today, we will discuss with you how to configure routing manually using a Router Module and outlet(Angular 11 Router Tutorial With Example). now we will create an application and add routing and navigation for our applications.

You can easily Add Routing to your angular application by using our example. we are creating a Simple Route application. so you can see our angular 11 router tutorial with an example.

Create new angular app

We will create a new angular app using the following command.

when you create your application at that time Angular CLI asks you Would you like to add Angular routing? (y/N). If you enter with y for Yes. then the angular router will be automatically configured.

Create a component in angular

Now we need to create three-component such as home, about, and contact. So let’s run the following command to create components.

Update view file in angular

src/app/app.component.html
In this example, we will create a simple navigation menu using bootstrap. we need a router link to redirect the different routes and also add a router-outlet.

src/app/home/home.component.html

src/app/about/about.component.html

src/app/contact/contact.component.html

Adding Routing to your Angular 10

src/app/app-routing.module.ts

Run Our Angular Application

Now we will run our Angular application using the below command.

Read Also
Angular 11 CRUD Application Example Tutorial
Angular 11 Bootstrap 4 Datepicker Example
Install Bootstrap 4 In Angular 11 With Example
Angular 11 Custom Validation Tutorial With Example

Please follow and like us: