title: Angular - How to Display Foreign Key Value instead of ID
body: <p>I created two(2) tables </p>
  
  <p><strong>Laravel:</strong> </p>
  
  <p><strong>short_code</strong></p>
  
  <pre><code>class Shortcode extends Model
  {
  protected $table = 'short_code';
  
  protected $fillable = [
      'name', 
      'descriptions',
      'telco_id',
      'created_at', 
  
  public function telco() {
      return $this-&gt;belongsTo('App\Telco');
  }     
  }
  </code></pre>
  
  <p><strong>telco</strong></p>
  
  <pre><code>class Telco extends Model
  {
  protected $table = 'telco';
  
  protected $fillable = [
    'name' ,
    'deascription',
    'country',
    'created_at',
  ];      
  
  public function shortcode()
  {
    return $this-&gt;hasMany('App\ShortCode');
  }     
  }
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>    public function indexShortcode()
  {
      if(Auth::user()-&gt;id == 1)
          $shortcodes = Shortcode::all();
      else 
          $shortcodes = Shortcode::where('user_id',Auth::user()-&gt;id)-&gt;get();       
  } 
  </code></pre>
  
  <p>API Route</p>
  
  <pre><code>Route::get('indexShortcode', 'ApiController@indexShortcode');
  </code></pre>
  
  <p>I am using Angular 7 to get endpoints from Laravel 5.8 API. I want to display name (value and not key) from telco table. short_code is the main table.</p>
  
  <p>I have created the model.ts, service.ts component.ts and component.html</p>
  
  <p><strong>Angular</strong></p>
  
  <p><strong>model:  shortcode</strong></p>
  
  <pre><code> import { User } from '../models/user';
   import { Telco } from '../models/telco';
  
   export class Shortcode {
   id: number;
   name: string;
   description: string;
   telco_id: number;
   telco?: Telco;   
  
  constructor() {}
  }
  </code></pre>
  
  <p><strong>shortcode.service.ts</strong></p>
  
  <pre><code>import { Shortcode } from '../models/shortcode';
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { catchError } from 'rxjs/operators';
  import { environment } from 'src/environments/environment.prod';
  import { HttpErrorHandler, HandleError } from '../shared/_services/http- handle-error.service';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class ShortcodeService {
  
  private readonly apiUrl = environment.apiUrl;
  private shortcodeUrl = this.apiUrl;
  private handleError: HandleError;  
  
  constructor(
  private http: HttpClient,
  httpErrorHandler: HttpErrorHandler ) {
    this.handleError = httpErrorHandler.createHandleError('ShortcodeService');
  }
  
  /** GET shortcodes from shortcodes endpoint */
  getShortcodes (): Observable&lt;Shortcode[]&gt; {
   return this.http.get&lt;Shortcode[]&gt;(this.shortcodeUrl + '/indexShortcode')
  .pipe(
    catchError(this.handleError('getShortcodes', []))
  );
  } 
  }
  </code></pre>
  
  <p><strong>shortcode.component.ts</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
  import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
  
  import {ExcelService} from '../../../services/excel.service';
  import { filter } from 'rxjs/operators';
  import { ShortcodeService } from '../../../services/shortcode.service';
  import { Router } from '@angular/router';
  import { Shortcode } from '../../../models/shortcode';
  
  @Component({
  selector: 'app-sms-shortcode-my',
  templateUrl: './sms-shortcode-my.component.html',
  styleUrls: ['./sms-shortcode-my.component.scss']
  })
  export class SmsShortcodeMyComponent implements OnInit {
  
  shortcodes: Shortcode[];
  isLoading: Boolean = false;
  public searchText: string; 
  public filter: string; 
  shortcodePosts: Shortcode[] = [];
  
  constructor(
      private shortcodeService: ShortcodeService,
      private excelService:ExcelService, 
      private spinnerService: Ng4LoadingSpinnerService,) { }
  
  ngOnInit() {
  
   // Get shortcode detail
   this.getShortcodes();
  }
  
  ngOnDestroy(): void {
  document.body.className = '';
  }
  
  
   getShortcodes(): void {
  // this.isLoading = true;
  this.spinnerService.show();
  this.shortcodeService.getShortcodes()
    .subscribe(
      response =&gt; this.handleResponse(response),
      error =&gt; this.handleError(error),
      ()=&gt;this.spinnerService.hide()
      );
   }
  
  protected handleResponse(response: Shortcode[]) {
    this.isLoading = false,
    this.shortcodes = response;
   }
   protected handleError(error: any) {
  this.isLoading = false,
  console.error(error);
   }  
   }
  </code></pre>
  
  <p><strong>shortcode.component,html</strong></p>
  
  <pre><code>                      &lt;tr  *ngFor="let shortcode of shortcodes; let i = index"&gt;
                      &lt;td&gt;{{i + 1}}&lt;/td&gt;
                    &lt;td&gt;{{shortcode?.name}}&lt;/td&gt;
                    &lt;td&gt;{{shortcode?.description}}&lt;/td&gt;
                    &lt;td&gt;{{shortcode?.telco?.name}}&lt;/td&gt;                               
                &lt;/tr&gt;
  </code></pre>
  
  <p>I used </p>
  
  <blockquote>
    <p>{{shortcode?.telco?.name}}</p>
  </blockquote>
  
  <p>to display the telco name (foreign key value) instead of the </p>
  
  <blockquote>
    <p>{{shortcode?.telco_id}}</p>
  </blockquote>
  
  <p>but nothing is being displayed. I checked console, nothing is there.</p>
  
  <p>Please where have I got it wrong and what do I do?</p>