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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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