How to Send data through routing paths in Angular
Tags: javascript, webdev, angular, typescript
Published: 2021-02-22 00:50:40


#### Daily Angular Tips, Tricks, and Best Practices: Part 9

As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.

![](https://cdn-images-1.medium.com/max/800/0*dSsBs1Om1ZDFdP7R)

Photo by [Ben White](https://unsplash.com/@benwhitephotography?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

Recently, I was looking for the best techniques to write clean and optimize my angular code. I have gone through a lot of articles, and as we know, it is limitless. Then I thought of consolidating the checklist with different Basic Angular Topics which helped me and might help others too in the future.

These small articles not only help you to write a better and clean Angular Code but also clear the concepts of front-end technologies. This will help you to build your strong base and can help you in the upcoming frontend interviews.

> Let’s move towards our main discussion.

**Passing data between components** is one of the common tasks which we do in frontend development. Sometimes when we don’t have state maintained in our application we can use the angular router feature to pass the data between the components.

We can achieve this like this using `@angular/router`which does support the route state and **navigationExtras**, which takes an object literal similar to `queryParams`

Let’s checkout different approaches to achieve this functions.

#### 1. Using Required Routing Parameters:

![](https://cdn-images-1.medium.com/max/800/1*9VnxfbDm2CDZ8eByqEIYuw.png)

#### 2. Using Route Optional Parameters:

![](https://cdn-images-1.medium.com/max/800/1*WiKZhSjxsuXflAuid3ZEDw.png)

#### 3. Using Route Query Parameters:

![](https://cdn-images-1.medium.com/max/800/1*_BzgoZ2GTzD3dVtDiQcWcA.png)

#### 4. Using Route **NavigationExtras**

![](https://cdn-images-1.medium.com/max/800/1*3w0ZUEoys1TThKHS_GxCDg.png)

It’s always better to see practicals instead of theory. No issue. I have a practical example ready for you. Check out here.

https://stackblitz.com/edit/angular-route-parameters-tu8g9e

**If you missed previous parts checkout below:**

[What is the difference between constructor and ngOnInit?](https://medium.com/dev-basics/angular-daily-tips-and-tricks-cf1574fb67bc)

[Explain how Angular application loads/Initialize.](http://Explain%20how%20Angular%20application%20loads/Initialize.)

[Explain the digest cycle/Change detection Cycle in Angular.](https://medium.com/dev-basics/daily-angular-tips-tricks-and-best-practices-3-239a7b442c7f)

[What is the difference between declarations, providers, and imports?](https://medium.com/javascript-in-plain-english/what-is-the-difference-between-declarations-providers-and-imports-7269e3707920)

[What is the difference between BehaviourSubject, Subject, ReplaySubject and Async Subject?](http://What%20is%20the%20difference%20between%20BehaviourSubject,%20Subject,%20ReplaySubject%20and%20Async%20Subject?)

[How To Detect Changes When An Angular Component Is Using ‘@input’](https://medium.com/javascript-in-plain-english/how-to-detect-changes-when-an-angular-component-is-using-input-d422af6ddd2a)