How to Implement Angular 11 Routing?

I am sure you might be visiting many websites in your daily life, but have you ever noticed how you are constantly redirected to the home page and not about us page while you click the home page link. This process is known as routing.

Routing is a mechanism that decides what is to be displayed on the screen when you do any activity. If you know front-end frameworks, then you might be very well aware of them.

But if you are new here, don't worry because this blog will help you and give you proper guidance on the steps you should implement during Angular Routing to quickly come out of the beginner's zone.

Goal

The 1st step is to set your goal before you start to build anything. You should be aware of what you are making.

Install Angular CLI

You should have installed Angular CLI when you want to work with Angular 11. If the system is already installed, it will make your work more effortless and swift. There are two types of code used for installing, and they are

Globally:

Locally:

For verifying the installation, you should run the below-mentioned command.

This command will show you the installed version of Angular.

Something like this will be seen

Create & Configure Angular project:

Now it is time to create a whole new Angular project and add the configuration accordingly.

Create angular project

Configure your project

You can generate components for home, marvel movies, and DC movies by generating the command mentioned above. After you run the command successfully, you should check the src/app.

This is how your project structure will look. Every project structure is different depending upon the demo.

Install ng-bootstrap:

The next step that you should follow is to install ng-bootstrap

Once the commands are implemented, you will see that the library's components will be automatically imported and declared by themselves.

Now the main step is to implement basic Angular Routing in Angular 11

First of all, we will need to change the below-mentioned files.

In the app-routing.module.ts file, the routes will be declared with the help of their respective components so that the application will get to know quickly which route the component of the route is rendered.

Let me explain you in simple words

The site will be redirected directly to the home page due to the code as mentioned above snippet when your application is launched, and the component will render it as your default page.

As mentioned above, this code shows that the home component is displayed in the URL '/home.'

app.component.html

These components are always performed with the help of a parent component called Router-Outlet, and due to this, all the components will have home page links in them.

The coding process for Marvel movies and DC movies will be nearly same. The step-by-step procedure is mentioned below

1. Modifying the existing components: We will be adding some lines of code in these file as the Angular UI needs to be changed.
2. Modifying the file of movie detail component
3. Modifying the file related to routing

Conclusion

to conclude, when you want to implement an Angular app router in Angular 11 routing for your next big project, you might need help even after developing and learning from various demos. So we can say that these code snippets helped us in understanding some of the processes. This explanation highlights Basic Angular Routing and Nested Angular Routing and Angular Routing with params. However, if you need to understand the whole process and want to know the in more detail, you need to click the link mentioned in this blog.