I have a project which has only two parts

1. Header: Having Prev-Home-Next buttons
2. Body: Having Home page (default)

Now, on body there are 10 icons having unique Redirect URLs When user clicks on any icon, its URL should open in place of Home page (with 10 icons).

After that if User clicks on any buttons from header Prev, Home or Next corresponding page should open:

How to implement this with Angular 13 Routing

CodePudding user response：

Many ways to do this. Here's some ideas for you:

For the header get previous url using router history https://stackoverflow.com/a/41039092/15439733. Home is a static link to your home url. Next url is one url after current on your list or urls.

For the body use one single component, let's call it childComponent. Child component could accept url param :id (or call it something else) where the id is the url for the iFrame. https://stackoverflow.com/a/65629022/15439733

So now onInit() we could read queryParam id as the url and give it to the iFrame. https://stackoverflow.com/a/48125257/15439733