In my application currently i have hardcoded the values in an array and binding them to the dropdown list which is working fine, for the dropdown list i am using the control from in-built.

It looks like below currently.

export class UserDetailsComponent implements OnInit {

constructor(private _userManagemement: UserManagementService){
}

userDetails : IUserDetails = {
 selectedValue: 'tim435'
 items: [
  {
    text: 'tim hoppins',
    value: 'tim435',
    id: 12
  },
  {
    text: 'andrew ramos',
    value: 'and71',
    id: 18
  },
  {
    text: 'jay ronne',
    value: 'jr214',
    id: 21
  }
 ]
 };

}

Now i need to fetch the details dynamically from the database instead of hardcoding it in the code, for that i created an API and i have method in service which calls the endpoint as below.

export class UserManagementService {

  public getUserDetails() {
     return this.httpClient.get('endpoint');
  }

}

This Api endpoint returns the data in the below format

[ {
text: ‘tim hoppins’,
value: ‘tim435’,
id: 12 }, {
text: ‘andrew ramos’,
value: ‘and71’,
id: 18 }, {
text: ‘jay ronne’,
value: ‘jr214’,
id: 21 } ]

What i am not sure is how do i bind the data returned by the method getUserDetails() in service to the items array of userDetails