When you put the username and password in the URL like this

https://${sec_key}:${customer_secret}@exmpl.com

it is behind the scenes just doing Basic Authentication, which is basically just a Authorization header with the following value

Authorization: base64(username:password)

Here, base64 is just some arbitrary function that base-64 encodes username:password; that's the username and password separated with a colon. In Javascript, there is the global btoa function that will base-64 encode the string for you.

So in Angular, you can do

const headers = new Headers({
  'Authorization': btoa(secKey, custSecret)
})
http.get(url, { headers: headers })

But here's the problem. You are exposing (I'm assuming) you secret information to the client, which you should never do. Another thing, you need to make sure that the API even allows to send the is request from Javascript clients. Some APIs, especially ones where there is sensitive information being passed around, won't allow for direct Javascript (client-side) communication. They do this by not allowing Cross Origin requests.

So you need to make sure that the API even accepts Cross Origin requests from client side applications, and secondly you need to consider the implications of using your secret in the client application.

I've never used Woocommerce, and I have no idea what it even is. But if it has to do with commerce, I might assume that it is meant to be connected to server to server. This is something you should consider, or maybe even something that you have to do. So you would basically from your client app communicate with your server app, which would then communicate with the API.