title: Get $key object realtime database Firebase
body: <p>I am implementing dynamic routes in Realtime Database of Firebase based on the ID or <code>$key</code> of each object. What I want is to get the ID and I can not find the way, I get the value <code>undefinied</code>. Any ideas?</p>
  
  <p><a href="https://i.stack.imgur.com/IUwxJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IUwxJ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/K0de3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K0de3.png" alt="enter image description here"></a></p>
  
  <p><strong>portafolio.component.html</strong></p>
  
  <pre><code>&lt;div class="container my-5"&gt;
  &lt;h1&gt;Portafolio&lt;/h1&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4" *ngFor="let proyecto of proyectos | async"&gt;
          &lt;div class="card my-3"&gt;
              &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;{{ proyecto.titulo }}&lt;/h4&gt;
                  &lt;a class="btn btn-primary" [routerLink]="['/portafolio', proyecto.$key]"&gt;Ver detalles&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>portafolio.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
  
  
  @Component({
    selector: 'app-portafolio',
    templateUrl: './portafolio.component.html',
    styleUrls: ['./portafolio.component.scss']
  })
  export class PortafolioComponent implements OnInit {
  
    proyectos: any;
  
    constructor(private db: AngularFireDatabase) { }
  
    ngOnInit() {
  
        this.proyectos = this.db.list('proyectos').valueChanges();
  
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>proyecto.ts</p>
  
  <pre><code>export interface Proyecto {
  $key?: string;
  titulo?: string;
  destacado?: string;
  descripcion?: string;}
  </code></pre>