0

Estoy realizando un programa en angular y tengo varios componentes que quiero refactorizar para hacer mas pequeño el codigo, he conseguido usar los *ngfor para algunos de mis componentes al estar repetidos en varias zonas de mi página, sin embargo, estoy bloqueado ante una parte que no llego a resolver, y es que tengo esta estructura html.

<div class="presentacion-cuenta">
  <div class="datos-numericos">
    <div class="saldo">
      <a>SALDO CUENTAS</a>
      <p class="color-numero">153.000 €</p>
    </div>
    <div class="ahorro">
      <a>AHORRO - INVERSIÓN</a>
      <p>100.000 €</p>
    </div>
    <div class="financiacion">
      <a>FINANCIACIÓN</a>
      <p>55.000 €</p>
    </div>
  </div>
</div>

y dentro de mi archivo mockup.ts, tengo precisamente esos datos colocados para que luego los pueda mostrar:

  export interface Summary {
      Total: number;
      Ahorro: number;
      Financiacion: number;
  }

Mi duda es saber como exportar dichos datos en mi summary.component para lograr refactorizar mi codigo html.

import { Component, OnInit } from '@angular/core';
import { Summary } from 'src/app/interfaces/mockap';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
  
  
  constructor() { }

  ngOnInit(): void {
  }

}

1 respuesta 1

1

Esto lo consigues con el uso de @Inputs()

el TS del componente

import { Component, OnInit, Input } from '@angular/core';

export interface SummaryData { 
 titulo: string
 valor: number
}

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
    @Input() data: SummaryData[] = [];
  constructor() { }

  ngOnInit(): void {
  }

}

El Template del componente

<div class="presentacion-cuenta" *ngFor="let dato of data">
  <div class="datos-numericos">
    <div class="saldo">

      <a>{{dato.titulo}}</a>
      <p class="color-numero">{{dato.valor}} €</p>
    </div>
   
  </div>
</div>

En el codigo html del componente padre:

<app-summary [data]="arrayData"></app-summary>

En el codigo Ts del componente padre:

import { Component, OnInit } from '@angular/core';
import { Summary } from 'src/app/interfaces/mockap';

    @Component({
      selector: 'app-padre',
      templateUrl: './padre.component.html',
      styleUrls: ['./padre.component.scss']
    })
    export class PadreComponent implements OnInit {
      public arrayData: SummaryData[] = [
        {titulo: 'SALDO CUENTAS', valor: 153000},
        {titulo: 'AHORRO - INVERSIÓN', valor: 100000 },
        {titulo: 'FINANCIACIÓN', valor: 50000}
      ];

      constructor() { }
    
      ngOnInit(): void {
      }
    
    }

Es importantisimo aprender el uso de @Inputs() y @Outputs() ya que es lo que permite abstraer interfaces completas y reutilizar codigo de lo lindo.

Espero te ayude la solucion.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.