title: Activated Route not working in Angular2
body: <p>I am currently working on an angular2 project. I am consuming an API from my Vimeo account.
  I am having some trouble accessing the detail page.
  Here is my json file from vimeo.</p>
  
  <pre class="lang-html prettyprint-override"><code>  {
      "total": 63,
      "page": 1,
      "per_page": 25,
      "paging": {
      "next": "/channels/1021571/videos?access_token=XXXX&amp;sort=manual&amp;page=2",
      "previous": null,
      "first": "/channels/1021571/videos?access_token=XXX&amp;sort=manual&amp;page=1",
      "last": "/channels/1021571/videos?access_token=XXXX&amp;sort=manual&amp;page=3"
    },
    "data": [
      {
        "uri": "/videos/173279622",
        "name": "ladder resume and writing service",
        "description": null,
        "link": "https://vimeo.com/173279622",
        "duration": 97,
        "width": 1920,
        "language": null,
        "height": 1080,
        "embed": {},
        "created_time": "2016-07-03T20:55:54+00:00",
        "modified_time": "2017-01-18T02:07:51+00:00",
        "release_time": "2016-07-03T20:55:54+00:00",
        "content_rating": [],
        "license": null,
        "privacy": {},
        "pictures": {},
        "tags": [],
        "stats": {
        "plays": 11
      },
      "metadata": {},
      "user": {},
      "app": null,
      "status": "available",
      "resource_key": "b12ca3300325ea061355fa46c9cb58d1937e2ef9",
      "embed_presets": {}
    },
  </code></pre>
  
  <p>I retrieve the data in the </p>
  
  <p>"video.service.ts"</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import {Http, Response} from '@angular/http';
  import {Observable} from 'rxjs/Observable';
  import {Video} from './video'
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class VideosService {
  
    constructor(private http: Http) { }
  
  private url = 'https://api.vimeo.com/channels/1021571/videos?access_token=XXXX&amp;sort=manual'
    getVideos(){
      return this.http.get(this.url).map(res =&gt; res.json().data);
    }
  }
  </code></pre>
  
  <p>I have a list page with the data which I retrieve from my "video.component.ts"</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
  import { VideosService} from './videos.service';
  import { DomSanitizer, SafeResourceUrl, SafeUrl, SafeHtml, } from '@angular/platform-browser';
  
  @Pipe({ name: 'safeHtml'})
  export class SafeHtmlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
      return this.sanitized.bypassSecurityTrustHtml(value);
    }
  }
  </code></pre>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>@Pipe({ name: 'safeUrl'})
  export class SafeUrlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
      return this.sanitized.bypassSecurityTrustUrl(value);
    }
  }
  </code></pre>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'app-videos',
    templateUrl: './videos.component.html',
    styleUrls: ['./videos.component.css'],
    providers: [VideosService],
  })
  export class VideosComponent implements OnInit {
    videos
    medium = ''
    lenght = Array(25);
    constructor(private _videosService: VideosService, private sanitizer: DomSanitizer) {
    }
  
    getVideos(){
      this._videosService.getVideos().toArray().subscribe(videos =&gt; this.videos = videos);
    }
  
    ngOnInit() {
      this.getVideos();
    }
  }
  </code></pre>
  
  <p>This is the "video.component.html" code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let item of lenght; let i = index"&gt;
    &lt;div *ngFor="let video of videos"&gt;
      &lt;div class="col-xs-12 col-md-3 centercontent"&gt;
        &lt;h6 id="h6vim"&gt;{{video[i].name}}&lt;/h6&gt;
        &lt;img id="vimimg" [src]="video[i].pictures.sizes[2].link | safeUrl"&gt;
        &lt;a routerLink="/video/{{video[i].resource_key}}"&gt;View&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I get the results here</p>
  
  <p><a href="https://i.stack.imgur.com/rLvHm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rLvHm.jpg" alt="enter image description here"></a></p>
  
  <p>So, when I click view, I want to go to the detail page with all the information about that video. I use "resource_key" as the id to filter.</p>
  
  <p>I have tried many things and I have not been able to make it work.</p>
  
  <p>Here is my "video-detail.component.ts". HERE I NEED TO KNOW WHAT TO PUT. I HAVE TRIED MANY THINGS AND NOTHING WORKS.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
  import { VideosService} from '../videos.service'
  import { DomSanitizer, SafeResourceUrl, SafeUrl, SafeHtml, } from '@angular/platform-browser';
  import { ActivatedRoute } from '@angular/router';
  
  @Pipe({ name: 'safeUrl'})
  export class SafeUrlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
      return this.sanitized.bypassSecurityTrustUrl(value);
    }
  }
  </code></pre>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'app-video-detail',
    templateUrl: './video-detail.component.html',
    styleUrls: ['./video-detail.component.css'],
    providers: [VideosService],
  })
  export class VideoDetailComponent implements OnInit {
    constructor(private _videosService: VideosService, private sanitizer: DomSanitizer, private route: ActivatedRoute) {
    }
  
    ngOnInit() {
      // WHAT CODE SHOULD I USE??
    }
  }
  </code></pre>
  
  <p>the routes</p>
  
  <pre class="lang-ts prettyprint-override"><code>{ path: 'videos', component: VideosComponent}, 
  { path: 'video/:resource_key', component: VideoDetailComponent}
  </code></pre>
  
  <p>And finally, what should I put in the "video.detail.component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;THIS IS THE VIDEO DETAIL PAGE&lt;/h2&gt;
  
  VIDEO RESOURCE_KEY &lt;!-- {{WHAT SHOULD I PUT HERE??}} --&gt;
  
  VIDEO NAME &lt;!-- {{WHAT SHOULD I PUT HERE??}} --&gt;
  
  VIDEO DESCRIPTION 
  
  video
  </code></pre>