I have a button and on clicking the button, I want to show a new component. While invoking the component, I want to also pass an argument

Eg. `UserDetailComponent` should be invoked and should be passed an `id`. First `UserDetailComponent` should fetch user's information using the `id` from the database and then become visible.

I created the UserDetailComponent as follows:

```
export class UserDetailsComponent implements OnInit {

  @Input()
  id:number //TODOM change to UUID
  constructor() { }

  ngOnInit() {
    console.log("will query db here")
  }
}

```

and create an entry in Routes as follows:

```
{
    path:'user-details/:id',
    component:UserDetailsComponent
}

```

But I don't know how to invoke this component from the button. I have written the following HTML but I get the `error DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name`

`<td> <button [routerLink]="[userDetailRouterLink,1]", id="show-more-button" class="btn content-div__button--blue btn-sm">Show more</button></td>`

`userDetailRouterLink` is defined in the `.ts` file as `userDetailRouterLink = '/user-details'`