Suppose i have two components, `Component1` and `Component2`. Out of which `Component2` takes some parameters to render.

Is it possible to display the contents of `Component2` inside `Component1` only. And trigger those parameters on mere click of buttons?

For example, 
Assume i have `GalleryComponent` and `ArtsComponent`. 

```
  { path: 'gallery', component: GalleryComponent },
  { path: 'arts', 
    children: [
      { path: '', component: ArtsComponent, data :{ name:"all" } },
      { path: 'author/:id', component: ArtsComponent, data :{ name:"author" }},
      { path: 'form/:id', component: ArtsComponent, data :{ name:"form" } },
    ]
  }

```

Currently i am able to view both of these as following `URLS`,

```
localost:4200/gallery
localost:4200/arts
localost:4200/arts/author/1
localost:4200/art/form/1

```

And i am navigating via, 

```
[routerLink]="['/arts/form', '1']"

```

And this will take me to new page, i.e. `localost:4200/art/form/1`, but i dont want that, i want to capture the content of this `URL` at my `GalleryComponent` only, something like, 

```
//gallery.component.html
<a [routerLink]="['/arts/form', '1']">Form1</a>
<a [routerLink]="['/arts/form', '2']">Form1</a>

<app-arts></app-arts>

```