Simple And Basic Angular Routing With Parameter Example

assuming you are starting fresh from a new project, follow these steps to create a component and add the code to be able to have a link and once the link is clicked, it will show the players component with the parameter in the url. This reminds me of $_GET in php.

Create a new component called player

ng g c player

app.module.ts

open file app.module.ts, then add the following lines
import { RouterModule, Routes } from '@angular/router';

insert after HttpModule
,RouterModule.forRoot([{ path: 'player/:playerName', component: PlayerComponent }])

player.component.ts

insert in player.component.ts
import { ActivatedRoute, Params } from '@angular/router';
import 'rxjs/add/operator/switchMap';


insert in PlayerComponent class, replace constructor()
     playerName:string;
  constructor(private route: ActivatedRoute) {
      this.playerName = route.snapshot.params['playerName'];
       }

player.component.ts

add in player.component.ts
<p>playerName = {{playerName}}</p>

app.component.html - add the following HTML at the end of the file

<a routerLink="player/Ryu" routerLinkActive="active">Ryu</a>
<router-outlet></router-outlet>

now test your work, you should shee the value of the variable PlayerName

http://localhost:4200/player/Ryu

This is how it should look like

I found a really good tutorial that also explains how you can do a very simple routing with paramaters on youtube