Angular routing

[Seagu Sandeep]

I am new angular. I am trying render a single page using angular. Using routing can i add parameters to baseurl meaning ex:http:mywebsite:4200/building_no/floor_no/room_no (building_no, floor_no,room_no are parameters). WIth this url i want to show the details of that room. There are no subsections in my applications to only show part of the page. For each url i need to show the whole app but with different data based on the parameters i give. Please let me know if anyone has answer to this problem.

Thank you,

Sandep Seagu

[manish pamnani]

Can you give a minimal reproduction of your problem on any online platform like gitlab, stackblitz or somewhere else?

[Tushar Narkhede]

You have to define different child states also building_no as parent and floor_no or room_no as child routes or data to be sent for that routes. Check below example which might help you to understand how child routes works and how data can be passed and retrieved.

https://angular-2-training-book.rangle.io/routing/child_routes

[manish pamnani]

Here's a basic example which might help you.Hope it helps. Feel free to ask any questions realted to it.The naviagton goes as follows:

localhost:4200/building-no for showing the building component
localhost:4200/building-no/1 for showing the room component

[manish pamnani]

https://file.io/fAvn6D

[Seagu Sandeep]

Thank you for the response. My project doesnt have a just building url. my project has only one url  i.e localhost:4200/building-no/floor-no/room-no. all the all the three fields in the url are dynamic and should be  required. If even one is missing, it should show the error message saying please check the url. so the three parameters are required. my question is angular has a way to declare home url which is 

{ path: '', component: Appcomponent }.

I want my home url should be

{path:'building-no/floor-no/room-no',appcomponent} as my base url. all the three fields should be present.

[manish pamnani]

Firstly, I won't recommed using your Home URL as 'building-no/floor-no/room-no'. You should have a Home URL such as '' and from there you should give the User a option to Click on a Building Number from which he could select a Room. 
But if your flow requires that you should define your Home Url as '/building-no/room-no/' then you can define your Home Path as '' and make sure to redirect it to /building-no/room-no and in the path '/building-no/room-no/' you should use RoomNoCOmponent like this:

const appRoutes: Routes =[

  { path: '' , redirectTo: '/building-no/room-no', pathMatch: 'full'},

  { path: 'building-no/room-no', component: RoomNoComponent}

]

For Error handling you could use widlcard symbol i.e. ** and load a ErrorComponent when someone hits this URL:

{ path: '**', component: ErrorComponent}

This way if a User hits a URL other than /building-no/room-no he will get a Error which you will specify in ErrorComponent like OOPPSS!!!! You have hit a Invalid URL, please check the URL and try again!!!

[manish pamnani]

Or you could use ngx-toastr service to show the Error on ngOnInit() of Error.component.ts. Refer to the article below for more info on ngx-toastr:

https://blog.jscrambler.com/how-to-create-angular-toastr-notifications/