Setting up Params for Angular 4 router

Question

So I have a clone of Google All Access that I am building.

The goal is to have an ArtistsComponent >

Click on an Artist Picture within that component >

Route to that specific artist's page, which has the component of ArtistsPageComponent

Here is the ArtistsComponent HTML and TS

HTML

<div *ngFor='let x of artistData.artists'
      class="artist">
      <img
        src="{{ x.artistsPicture }}"
        routerLink='artistId' // Where I believe I am going wrong 
        >
        <p>{{ x.artistName }}</p>
</div>

Component.TS

import { Component, OnInit } from '@angular/core';
import { DataService } from './../../data.service';

@Component({
  selector: 'artists',
  templateUrl: './artists.component.html',
  styleUrls: ['./artists.component.css']
})
export class ArtistsComponent {

  constructor(private dataService: DataService) { }

  artistData = this.dataService.data;

  ngOnInit() {
  }

}

Here is the ArtistPageComponent

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'artistpage',
  templateUrl: './artistpage.component.html',
  styleUrls: ['./artistpage.component.css']
})

export class ArtistPageComponent implements OnInit{

  artistId:string;

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ){
    this.route.params.subscribe((params: Params) => {
      console.log(params); 
    })
  }

  ngOnInit(){

  }
}

Also, the App Routing Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute} from '@angular/router';

import { LibraryComponent } from './library/library.component';
import { HomeComponent } from './home/home.component';
import { ArtistsComponent } from './library/artists/artists.component';
import { SongsComponent } from './library/songs/songs.component';
import { GenresComponent } from './library/genres/genres.component';
import { PlaylistsComponent } from './library/playlists/playlists.component';
import { StationsComponent } from './library/stations/stations.component';
import { AlbumsComponent } from './library/albums/albums.component';
import { ArtistPageComponent } from './library/artists/artistpage/artistpage.component';


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'library', component: LibraryComponent,
      children: [
        { path: '', redirectTo: 'artists', pathMatch: 'full' },
        { path: 'artists', component: ArtistsComponent },
        { path: 'albums', component: AlbumsComponent },
        { path: 'genres', component: GenresComponent },
        { path: 'playlists', component: PlaylistsComponent },
        { path: 'songs', component: SongsComponent },
        { path: 'stations', component: StationsComponent }
      ]
  },
  {path: 'artists/:artistId', component: ArtistPageComponent }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

Not sure where to put the link/param or where to set the ids for each artist.

JSON data for the hell of it

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

  constructor() { }

  data = {
    "artists": [
      {
        "artistName": "Lupe Fiasco",
        "artistsPicture": "../assets/artists-images/lupe.jpg",
        "genre": "Hip-Hop",
        "albums": [
          { "name": "The Cool",
            "artistName": "Lupe Fiasco",
            "isExplicit": "true",
            "albumCover": "../assets/album-covers/thecool.jpeg",
            "songs": [
              { "name": "Baba Says Cool for Thought",
                "track number" : "1",
                "file": "mp3" },
              { "name": "Free Chilly ft Sarah Green and GemStones",
                "track number" : "2",
                "file": "mp3" },
              { "name": "Go Go Gadget Flow",
                "track number" : "3",
                "file": "mp3" },
              { "name": "The Coolest",
                "track number" : "4",
                "file": "mp3" },
              { "name": "Superstar ft Matthew Santos",
                "track number" : "5",
                "file": "mp3" },  ..............

Answer 1

I have a sample application that is close to what you are trying to do. You can find it here: https://github.com/DeborahK/MovieHunter-routing

Your router link needs to look more like this:

<a [routerLink]="['/movies', movie.id]">{{ movie.title }}</a>

For your route to match your route configuration:

{path: 'artists/:artistId', component: ArtistPageComponent }

The routerLink would need to be:

[routerLink]="['artists', 'artistId']"

That way it will match with your configuration.