Ndtyjky

I've got a search box drop-down that when you type in a query returns a list of results. Clicking on a result takes you off to that component to view. This works as expected when you use the search from say the homepage. As soon as you try and use the search from where the search takes you, the URL in the browser changes however the content doesn't.

I think this is just beginners mistake with how routing works but I can't for the life of me work out what I've done wrong.

search-component.html

<div *ngIf="hasSearchResults">

  <div class="search-results">

    <ul>

      <li *ngFor="let video of searchResults" class="search-results-item">

        <div class="columns" (click)="goToSearch(video.id)">

          <div class="column is-narrow">

            <figure class="image is-32x32">

              <div *ngIf="video.cover;else noThumbnail">

                <img src="http://localhost:8080/videos/t/{{video.cover.id}}" class="rounded">

              </div>

              <ng-template #noThumbnail></ng-template>

            </figure>

          </div>



          <div class="column">

            <p>{{video.name}}</p>

            <p class="metadata">{{video.absolutePath}}</p>

          </div>

        </div>

      </li>

    </ul>

  </div>

</div>

search-component.ts (relivant part)

  public goToSearch(id: string) {

    this.router.navigate([`videos/${id}`]);

  }

Now this all works from anywhere in the site, as long as its not on the video component.

app.routing.ts

const routes: Routes = [

  {path: 'videos', component: VideoListComponent},

  {path: "videos/:id", component: VideoItemComponent}

];

I suspect the issue is I have just one router-outlet on the 'main' html file.

app.component.html

<div class="section">

  <div class="columns">



    <div class="column is-narrow">

      <app-sidebar></app-sidebar>

    </div>



    <div class="column is-main-content">

      <router-outlet></router-outlet>

    </div>

  </div>

</div>

What have I done wrong here?

I am not able to comment, SO I am adding it as an answer.

All your routing setup is correct. The reason why it works when you are on homepage is because the url(videos/:id) is new and its get activated for the first time by angular router.

Since you are using dynamic routing,(i.e only the value of the id changes), the component is gonna remain the same.(i.e this component has been already activated and is not loaded twice). So I believe you have react to url changes and pass/set the values in your VideoItemComponent.