0

Is it possible to show the state name in the address bar for the specific route in angular 2 and 4. for ex, i have below route configurations,

{
 path:"animals",
 component : AnimalComponent,
 children:[{
   path:"cat",
   component:CatComponent
 },{
  path:"dog",
  component:DogComponent
 }]
}

it loads CatComponent in AnimalComponent router-outlet when address is "animals/cat" and DogComponent in AnimalComponent router-outlet when address is "animals/dog". Is it possible to show only "cat" in the address bar for the "animals/cat" and "dog" in the address bar for the "animals/dog" route.

Ramadurgarao
  • 33
  • 7
  • Sounds like you are looking for something like https://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router/38652281?s=1|3.2069#38652281 or just set the `title` with some other data. – Günter Zöchbauer Jul 17 '17 at 10:09
  • See: [Set the Document Title](https://angular.io/guide/set-document-title) – pzaenger Jul 17 '17 at 10:12

1 Answers1

0

Sure, just remove the path from the parent route: 

{
 path:"",
 component : AnimalComponent,
 children:[{
   path:"cat",
   component:CatComponent
 },{
  path:"dog",
  component:DogComponent
 }]
}

angular will automatically link the children to the closest ancestor (or root if there isn't any)

Siro
  • 3,179
  • 1
  • 10
  • 10
  • Thanks for this. Where can i find documentation about this. – Ramadurgarao Jul 18 '17 at 11:29
  • There's a very long section explaining how Angular router works in their official doc: https://angular.io/guide/router For your concrete case you can take a look to the section called 'Component-less route' in which there's an example quite similar to yours. – Siro Jul 18 '17 at 12:23