> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/js/all/angular/router.md).

# router

The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported RouterModule. It tells the html where to display the routed html.

```markup
<router-outlet></router-outlet>
```

## Create a link

```markup
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>
```

## Create a parameterized link

```markup
<routerLink="/detail/{{hero.id}}">
```

## Routes

```typescript
import {RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
```

```typescript
const routes: Routes = [
  { path: 'heroes', component: HeroesComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'detail/:id', component: HeroDetailComponent },
];
```

* regular
* default route
* parameterized

```typescript
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
})
export class AppRoutingModule {}
```

Detect parameters in component

```typescript
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
```

Inject ActivatedRoute which hold info about route and location interacts with the browser. The `+` turn the string into an integer

```typescript
constructor(
  private route: ActivatedRoute,
  private location: Location
)

ngOnInit() {
  const id = +this.route.snapshot.paramMap.get('id');
}
```

## Going Back

```markup
goBack(): void {
  this.location.back();
}
```