title: Angular 2/ASP.NET Core-retrieving id from url
body: <p>I want to retrive a id from a specific product thru the url. This is my code so far:</p>
  
  <p><strong>Imports</strong></p>
  
  <pre><code>//Imports from @Angular
  import { Component, OnInit } from '@angular/core';
  import { RouterModule, Router, Params, RouterLink, ActivatedRoute } from '@angular/router';
  import { Http } from '@angular/http';
  </code></pre>
  
  <p><strong>constructor</strong></p>
  
  <pre><code> constructor(
          private _hatListService: HatListService, private _router: Router, private _params: ActivatedRoute) {
  
      }
  </code></pre>
  
  <p><strong>hat-editor.component ngOnInit</strong></p>
  
  <pre><code>ngOnInit() {
  
             this._params.params.subscribe((params: Params) =&gt; {
          var id = params['id'] * 1;//*1 efter det som man vill parse:s so bilr det som int.parse
  
          this._hatListService.getHat(this.id).subscribe(
  
              foundHats =&gt; this.thisHatModel = foundHats);
          console.log(this.thisHatModel)
      });
  
  }
  </code></pre>
  
  <p><strong>service</strong></p>
  
  <pre><code>public _getHatById: string = '/api/Hats/GetHatById';
  
        getHat(id: number): Observable&lt;Hat&gt; {
              //debugger
              return this._http.get(this._getHatById + '/' + id).map(res =&gt; &lt;Hat&gt;res.json()).catch(this.handleError);
  
  
          }
  </code></pre>
  
  <p><strong>controller</strong></p>
  
  <blockquote>
  <pre><code>    // GET: api/Hats/5
      [HttpGet("GetHatById/{id}")]
      public async Task&lt;IActionResult&gt; GetHat([FromRoute] int id)
      {
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState);
          }
  
          var hat = await _context.Hat.SingleOrDefaultAsync(m =&gt; m.Id == id);
  
          if (hat == null)
          {
              return NotFound();
          }
  
          return Ok(hat);
      }
  </code></pre>
  </blockquote>
  
  <p>When I hover over each product the url is produced:</p>
  
  <p><a href="https://i.stack.imgur.com/e9nBC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e9nBC.png" alt="enter image description here"></a></p>
  
  <p>But when I click the product the id is not caught from the browser:</p>
  
  <p><a href="https://i.stack.imgur.com/EZm5O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZm5O.png" alt="enter image description here"></a></p>
  
  <p>contoller:</p>
  
  <p><a href="https://i.stack.imgur.com/mnymF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mnymF.png" alt="enter image description here"></a></p>
  
  <p>I am guessing the error occurs on this line in my getHat() method. The *1 is for casting the id to a number:</p>
  
  <blockquote>
  <pre><code>&gt;      this._params.params.subscribe((params: Params) =&gt; {
              var id = params['id'] * 1;
  
          });
  </code></pre>
  </blockquote>
  
  <p>I tried the Angualr.io exapmlpe but could not get it to work for me. <strong>Thanx for all the help</strong></p>