How to print data on Angular coming from Laravel API relationship with one to many Models

I have Angular App connected with Laravel API. In Laravel API there are one to many relationship between Employee and Salary Models. now I need print Salary Model data on Angular app. so, I try in this way

<div class="basic-info">
    <p>Employee Name : {{employee.first_name}}</p>
    <p>Date of Birth :</p>
    <p>Gender :</p>
    <p>Hire Date :</p>
</div> 
 <div class="salary-topic">
    <h4><b>Salary Details</b></h4>
</div>
<div class="salary-details">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">salary {{employee.salary}}</th>
                <th scope="col">From Date{{employee.from_date}}</th>
                <th scope="col">To Date{{employee.to_date}}</th>
            </tr>
        </thead>
</table>
</div>

my data.service.ts is like this

 getEmployeeById(id: string){
    return this.httpClient.get('http://127.0.0.1:8000/api/employee/'+id);
  }

and employee-by-id.ts is

 getData() {
    this.dataService.getEmployeeById(this.id).subscribe(res => {
     // console.log(res);
     this.data = res;
     this.employee = this.data;
    })
  }

my Employee model data is printing well. but relathionship Salary Model is not printing. in browser element printing both model data well in json format. how could I fix this problem?