title: How to get a value from an Object that comes from a ManyToOne relationship in Angular CLI?
body: <p>I'm using Spring Boot, Angular CLI and mySQL.</p>
  
  <p>I have an Employee than can have one Marital Status, and one M Status can be in N Employees.</p>
  
  <p>In localHost:8080 I get the right array json:</p>
  
  <pre><code>[{"id":1,"firstName":"Name","lastName":"surname1","emailAddress":"test@test1.com","status":{"statusId":1,"nameStatus":"Single"}
  </code></pre>
  
  <p>In my angular table(localHost:4200), instead I get every data but in Status column I get "[object Object]".</p>
  
  <p>In have a service for each one.</p>
  
  <p>When I do a registration I have a dropDown w/ all status so I get them.</p>
  
  <p>This is my HTML table:</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th *ngFor="let col of columns"&gt;{{col}}
      &lt;/th&gt;
      &lt;th&gt;Actions&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr *ngFor="let employee of employees | paginate: {itemsPerPage: pageSize,
                                             currentPage: page,
                                             totalItems: employees.length}  | filterAll: searchString : field"&gt;
      &lt;td *ngFor="let col of columns"&gt;{{employee[col]}}&lt;/td&gt;
      &lt;td&gt;
        &lt;button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
                (click)="actionFunc(act, employee)"&gt;{{act.label}}&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here I have an ngFor that gets All employees.</p>
  
  <p>Now I share also my services and my componets.ts:</p>
  
  <p>status.service.ts:</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class StatusService {
  
    private baseUrl = 'http://localhost:8080/api';
  
    constructor(
      private http: HttpClient) { }
  
    getStatus(): Observable&lt;Status[]&gt; {
      return this.http.get&lt;Status[]&gt;(`${this.baseUrl}` + '/status');
    }
  }
  </code></pre>
  
  <p>employee.service.ts</p>
  
  <pre><code>const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class EmployeeService {
  
    columns = COLUMNS;
    actions = ACTIONS;
  
    private baseUrl = 'http://localhost:8080/api/employees';
  
    constructor(private http: HttpClient) {
    }
  
    getColumns() {
      return this.columns;
    }
  
    getActions() {
      return this.actions;
    }
  
    getMetadata() {
      return this.metadata;
    }
  
    /** GET Employees from the server */
    getEmployees(): Observable&lt;Employee[]&gt; {
      return this.http.get&lt;Employee[]&gt;(this.baseUrl);
    }
  
    getEmployee(id: number): Observable&lt;Employee&gt; {
      const url = this.baseUrl + '/' + id;
      return this.http.get&lt;Employee&gt;(url);
    }
  
    /** PUT: update the employee on the server */
    updateEmployee(employee: Employee): Observable&lt;any&gt; {
      return this.http.put(`${this.baseUrl}/${employee.id}`, employee, httpOptions);
    }
  
    deleteEmployee(id: number): Observable&lt;any&gt; {
      return this.http.delete(`${this.baseUrl}/${id}`, {responseType: 'text'});
    }
  
  }
  </code></pre>
  
  <p>Here I have also a const w/ COLUMNS name.
  employee.ts</p>
  
  <pre><code>export const COLUMNS = ['id', 'firstName', 'lastName', 'emailAddress', 'status'];
  
  export class Employee {
    id: number;
    firstName: string;
    lastName: string;
    emailAddress: string;
    status: string;
  }
  </code></pre>
  
  <p>status.ts</p>
  
  <pre><code>export class Status {
    statusId: number;
    nameStatus: string;
  }
  </code></pre>
  
  <p>What do I have to do to get my status.Name?
  Is there something specific?</p>
  
  <p>If you need more documentation ask me.</p>