Cacher is the code snippet organizer for pro developers

import { Component, OnInit } from '@angular/core';
//IMPORT CLIENT SERVICE
import { ClientService } from '../../services/client.service';
//IMPORT LIBRERIA DE ALERTAS
import { FlashMessagesService } from 'angular2-flash-messages';
//IMPORT ROUTES
import { Router, ActivatedRoute, Params } from '@angular/router';
//IMPORT CLIENT MODEL
import { Client } from '../../models/Client';

@Component({
  selector: 'app-client-details',
  templateUrl: './client-details.component.html',
  styleUrls: ['./client-details.component.css']
})
export class ClientDetailsComponent implements OnInit {
  id: string;
  //VARIABLE DEL MODELO CLIENT
  client: Client;
  hasBalance: boolean = false;
  showBalanceUpdateInput: boolean = false;
  
  //INYECCION DE LAS DEPENDENCIAS A USAR
  constructor(
    private clientService: ClientService,
    private router: Router,
    private route: ActivatedRoute,
    private flashMessagesService: FlashMessagesService
  ) { }

  ngOnInit() {
    // Get id from url
    this.id = this.route.snapshot.params['id'];
    // Get client, FUNCION CREADA EN EL SERVICE DE CLIENT
    //OBSERVABLE, ES NECESARIO SUBSCRIBE
    this.clientService.getClient(this.id).subscribe(client => {
      if(client.balance > 0){
        this.hasBalance = true;
      }
      //SE PASA A LA VARIABLE CLIENT LO QUE TRAE EL SERVICE
      this.client = client;
      console.log(this.client);
    });
  }

}


################################## ON DETAILS HTML

<div class="row">
    <div class="col-md-6">
      <a routerLink="/" href="#" class="btn btn-link">
        <i class="fa fa-arrow-circle-o-left"></i> Back To Dashboard
      </a>
    </div>
    <div class="col-md-6">
      <div class="btn-group pull-right">
        <a routerLink="['/edit-client/'+id]" class="btn btn-dark">Edit</a>
        <button class="btn btn-danger" (click)="onDeleteClick()">Delete</button>
      </div>
    </div>
  </div>
  
  <hr>
  
  <div *ngIf="client" class="card">
    <h3 class="card-header">{{client.firstName}} {{client.lastName}}</h3>
    <div class="card-body">
      <div class="row">
        <div class="col-md-8">
          <h4>Client ID: {{id}}</h4>
        </div>
        <div class="col-md-4">
          <h3 class="pull-right">
            Balance
          </h3>
        </div>
      </div>

      <hr>
      
      <ul class="list-group">
        <li class="list-group-item">Contact Email: {{client.email}}</li>
        <li class="list-group-item">Contact Phone: {{client.phone}}</li>
      </ul>
    </div>
  </div>
  
########################## SERVICE

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { Client } from '../models/Client';

@Injectable()
export class ClientService {
  clientsRef: AngularFireList<any>;
  clients: Observable<any[]>;
  client: Observable<any>;

  constructor(private db: AngularFireDatabase) { 
    this.clientsRef = this.db.list('clients');
    this.clients = this.clientsRef.snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    });
  }

  getClients(){
    return this.clients;
  }

  newClient(client: Client){
    this.clientsRef.push(client);
  }
  //OBTIENE AL CLIENTE MEDIANTE EL ID
  getClient(id: string){
    this.client = this.db.object('/clients/'+id).valueChanges();
    return this.client;
  }

  updateClient(id: string, client:Client){
    return this.clientsRef.update(id, client);
  }

}