How to display data from an API into a clickable/highlightable list of buttons Angular

Question

Right now I have a successful API call that shows in the console fine, but I'm not sure now how to display this data in a way like in this picture

At the moment I'm using an array in TS to do so like this:

values = ["Wellbeing","Motivation", "Fitness","Assertiveness", "Productivity",
  "Resilience", "Teamwork","Emotional intelligence","Nutrition","Positivity/Perspective",
  "Communication (verbal)", "Navigating work","Communication (written)","Confidence","Work/Life",]

And called in the HTML:

<div *ngFor="let value of values">
    <button
    #btn
    class= "selection_btn text-center"
    (click)="btn.classList.toggle('selected')"
    (click)="control.setValue(control.value.concat([value])) "
  >{{value}}</button>
    </div>

And these display fine with some CSS styling needed(thats for another question) but how do I replace those values with the API names? The API is set up in JSON like so:

[{"id":16,"categoryId":2,"name":"Culture"},]