populate dropdown from web api rest

[polar ledge]

I received an angular complete project, and I should make a simple task.
there are some defined data, like dropdown menu, and other objects.
I have to "replace" them with dynamic ones, example:

<c-col xs="5">
    <c-input-group>
        <span cInputGroupText>Color</span>
        <select cSelect id="idColor" [(ngModel)]="color">
            <option disabled>Choose...</option>
            <option value='1'>white</option>
            <option value='2'>yellow</option>
            <option value='3'>orange</option>
            <option value='4'>green</option>
            <option value='5'>blue</option>
            <option value='6'>brown</option>
            <option value='7'>black</option>
        </select>
    </c-input-group>
</c-col>

Well, this is pre-defined, and I have to make this working dynamically, using web api rest I have
Someone have hints?

[hexed condor]

That's quite a straightforward task fetching data by HttpClient and passing them to a variable iterated by an *ngFor creating the options.

[polar ledge]

how should I proceed? should I make a sort of cycle or what?

[hexed condor]

I think you should follow official tutorial first.

g!toh @polar ledge

[raven palm]

Hi @polar ledge, welcome to

We recommend you start your Angular journey with the Tour of Heroes tutorial, located here: https://angular.io/tutorial.

[polar ledge]

oh thanks, I'll do it

btw I was able to print all colors using this, now I try to apply it on my statement

          <div *ngFor='let color of colors'>
            <div>{{ color.colorName}}</div>
        </div>

ok I done it using this code but I'll give a look to some tutorial since I really don't understand this, looks like harder than C#

<select cSelect id="idColor" [(ngModel)]="color">
  <option disabled>Choose...</option>
  <option *ngFor="let color of colors" [(ngModel)]="color.idColor">{{color.colorName}}</option>
</select>

I have second last task to do.
Actually, I replaced this:

<c-col xs="5">
    <c-input-group>
        <span cInputGroupText>Color</span>
        <select cSelect id="idColor" [(ngModel)]="color">
            <option disabled>Choose...</option>
            <option value='1'>white</option>
            <option value='2'>yellow</option>
            <option value='3'>orange</option>
            <option value='4'>green</option>
            <option value='5'>blue</option>
            <option value='6'>brown</option>
            <option value='7'>black</option>
        </select>
    </c-input-group>
</c-col>

with a dynamic dropdown using the code I posted before.
in the .ts file I have a struct on the export component that list all colors with its ids, now I have to remove this also, since this should be obtained by calling web api

this is the struct I have to replace in the .ts file

colors = [
  {
    "idColor": "1",
    "colorName": "White"
  },
  {
    "idColor": "2",
    "colorName": "Yellow"
  },
  {
    "idColor": "3",
    "colorName": "Orange"
  }
];

[hexed condor]

Still part of official tutorial
https://angular.io/tutorial/tour-of-heroes/toh-pt6

[polar ledge]

hm, I already have something like that, but I generated it with a command line

npx openapi-typescript-codegen --input http://localhost:5228/swagger/v1/swagger.json -o ./services -c angular

this automatically generated a service.ts file with a similar method

in this case:

    public getColors(): Observable<any> {
        return __request(OpenAPI, this.http, {
            method: 'GET',
            url: '/api/Colors/colors',
        });
    }•