How to map object from API to Angular input text

Question

I am trying to read API response in Angular and display it in the input text field. I am able to call the API and print the response in the console but I am not able to capture response in the object and map it to the input field.

Log API response :

m-fin.services.ts

Service to call external API.

networth-home.component.ts

Trying to capture response in the variable.

networth-home.component.html

<div class = "account">
    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Saving Account</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="input is-primary" type="text" placeholder= {{pages.account_amount}}>
                </div>
            </div>
        </div>
    </div>
</div>

Error :

Error: src/app/networth/networth-home/networth-home.component.html:27:86 - error TS2339: Property 'account_amount' does not exist on type 'string'.

27                     <input class="input is-primary" type="text" placeholder= {{pages.account_amount}}>
                                                                                        ~~~~~~~~~~~~~~

  src/app/networth/networth-home/networth-home.component.ts:6:16
    6   templateUrl: './networth-home.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component NetworthHomeComponent.

Answer 1

You need to define an interface for the response you're getting from API. Currently Typescript infers the type of pages as string since you initialised it with ''.

If the number of keys in the object are dynamic but of same type (number), you can probably do the following :

interface PagesItem {
 [key: string]: number;
}

pages: PagesItem[] = [];

In your html :

<input class="input is-primary" type="text" placeholder= {{pages[0]?.account_amount}}>