# Routing Instructions

**@frrri/ngxs-crud/routing** aims at making it easy to configure your components data layer via the **angular router**. This way, your components are highly reusable and can display different sets of data for different routes easily.

First add `FrrriRoutingModule.forRoot()` to your AppModule:

{% code title="app.module.ts" %}

```typescript
...
import { FrrriRoutingModule } from '@frrri/ngxs-crud/routing';

@NgModule({
    ...
    imports: [
        ...
        FrrriRoutingModule.forRoot()
    ],
})
export class AppModule { }
```

{% endcode %}

With a State setup like shown in [Crud Entities](https://bitflut.gitbook.io/frrri/ngxs-crud/usage/crud-entities), you can configure your routes the following way:

## **Configuring your routes**

**entities.posts** defined in the example below is the corresponding collection's state path. See [States Registry](https://bitflut.gitbook.io/frrri/ngxs-crud/recipes/states-registry) for more information.

{% code title="posts-routing.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { frrriRoutes, instructions, getActive, getMany, reset } from '@frrri/ngxs-crud/routing';

const routes: Routes = [
    {
        path: '',
        data: instructions({
            'entities': reset(), // Reset all entities when entering the route
            'entities.posts': getMany() // Then get posts
        })
    },
    {
        path: ':id',
        data: instructions({
            'entities.posts': getActive() // Get active post (defaults to set param :id active)
        })
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(
            frrriRoutes(routes) // Important so route instructions can be resolved
        )
    ],
    exports: [RouterModule]
})
export class PostsRoutingModule { }
```

{% endcode %}

{% hint style="warning" %}
It's important to wrap the routes provided to **RouterModule** with our **frrriRoutes()** function, so our resolver will run for every route.
{% endhint %}

Have a look at [posts-routing.module.ts](https://github.com/bitflut/frrri/blob/master/apps/ng-integration/src/app/posts/posts-routing.module.ts) in the [ng-intergation](https://github.com/bitflut/frrri/blob/master/apps/ng-integration) on GitHub for more examples.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bitflut.gitbook.io/frrri/ngxs-crud/usage/routing-instructions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.