consumir API en Angular

[Beginner Web]

Hola como hago para consumir est API en Angular?



Esto es lo que hice yo.

Código (html4strict) [Seleccionar] Expandir

<section class="row">
            <div class="col-md-8 d-md-block d-lg-block d-none">
                <div class="card-header text-center">
                    <h5 class="card-title">Conversor de divisas</h5>
                    <div class="card-body">

                        <table class="table table-hover" cellpadding="3">
                            <thead class="bg-primary">
                                <th></th>
                                <th>USD</th>
                                <th>EUR</th>
                                <th>GBP</th>
                                <th>BTC</th>
                                <th>ARS</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <p>USD</p>
                                        <p>Inverse</p>
                                    </td>
                                    <td>
                                        <p>1.0000</p>
                                        <p>1.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>EUR</p>
                                        <p>Inverse</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>1.0000</p>
                                        <p>1.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>ARS</p>
                                        <p>Inverse</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>0.0000</p>
                                        <p>0.0000</p>
                                    </td>
                                    <td>
                                        <p>1.0000</p>
                                        <p>1.0000</p>
                                    </td>
                                </tr>
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>

            <!-- d-lg-block no oculta el compenente en tamaños grandes, d-none oculta en todos los demas tamaños <div class="col-md-4 d-md-block d-lg-block d-none">-->
            <div class="col-md-4 col-sm-12">
                <div class="card">
                    <div class="card-header text-center conversor">
                        Conversor de divisas
                    </div>
                    <div class="card-body bg-primary">

                        <form>
                            <div class="form-group">
                                <label for="txtCantidad">Cantidad</label>
                                <input type="number" class="form-control form-control-sm" id="txtCantidad"
                                    aria-describedby="emailHelp">
                            </div>
                            <div class="form-group">
                                <label for="txtDe">De</label>
                                <select class="form-control form-control-sm">
                                    <option>Peso Argentino</option>
                                    <option>Dolar US</option>
                                    <option>Euro</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="txtA">A</label>
                                <select class="form-control form-control-sm">
                                    <option>Peso Argentino</option>
                                    <option>Dolar US</option>
                                    <option>Euro</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" readonly id="txtA">
                            </div>
                            <button type="submit" class=" col-sm-12 btn btn-warning btn-sm">Convertir</button>
                        </form>

                    </div>
                </div>
            </div>
        </section>

gracias

[[u]nsigned]

Hola, la verdad que nunca sue Angular, pero supongo que es tal simple como hacer una peticion HTTP 1.1 GET a la api en cuestion. En otros frameworks como React o Vue es tan simple como usar fetch (api nativa nativo) o axios (libreria externa y mi forma preferida de trabajar en Vue.)

Pero en Angular la cosa se complica, porque tenes que usar un services y el modulo especifico del framework.

https://angular.io/guide/http

Una pregunta, esto es una trabajo para la escuela/intituto o es por iniciativa propia? Si es el segundo caso, yo te recomendaria empezar primero con el framework Vue que es JS y esta exelentemente documentado, en dos o 3 dias lo aprendes en su totalidad y solo con la documentacion oficial.

Angular tiene la curva de aprendizaje mas elevada de todos, primero porque solo usa typescript y en segundo lugar porque no te da libertad, siempre tenes que hacer las cosas como el framework te lo impone, la famosa "angular way".