Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

203
Visualizações
Call function from different components and pass parameters

I have a function Im calling several times when I need to process a date:

  dateFormat(myDate, format) {
    let temp=this.datePipe.transform(myDate, format)
    return(temp)
  }

This just formats a date.

let niceDate=dateFormat(mydate, 'MM/dd/yyyy')

The problem is I need to call it from several components. I was looking at services it looks like its not what Im looking for (I may be wrong). Im wondering if this can be accomplished like in Node.js, but in Angular.

What is the right way to store several functions on one file, import that file and call the functions from other components?

Thanks.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

You can create common utility file in that you can implement those functions which are going to be used across the application. Now you just need to import that file any component and Use that static function.

For ex: Utils.ts file

export class Utils {
    constructor() { }
    
    dateFormat(myDate, format) {
         let temp=this.datePipe.transform(myDate, format)
         return(temp)
    }
}

component.ts file

import { Component, OnInit} from '@angular/core';
import { Utils } from 'src/app/shared/utils/utils';

export class TestComponent implements OnInit{
       
       myDate = new Date();
       format = 'MM/DD/YYYY'
       
       constructor() { }
       
       covnervtDate(){
             return Utils.dateFormat(this.myDate, this.format);
       }
}
over 4 years ago · Santiago Trujillo Relatório

0

If you are just creating utility functions that doesn't depend on the current state of your app, then you can simply export each function from a ts file.

Create a date.util.ts file, and export all your functions

export function dateFormat(myDate, format) {
    let temp=this.datePipe.transform(myDate, format)
    return(temp)
  }

Now you can import the function in your component files:

import * as DateUtil from './utility/date.utils';
...
DateUtil.dateFormat()

For better folder structuring, I usually create a utility folder with an index.ts file that exports all the utility functions. Advantage - Tree shaking. All the unused functions will be not making their way into the final bundle.

When your functions modify the state of the app:

If you need to save the state of the app/component- you should create services and inject them into your component files. Read more about creating services here

over 4 years ago · Santiago Trujillo Relatório

0

The right way to store several functions on one file, import that file and call the functions from other components is simply service.

Suggestions:

  1. Use Angular Service
  2. Use Angular Date Pipe -> It can be customized in a wide variety
  3. If you still insist on using this function, just use a single line: return this.datePipe.transform(myDate, format)
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda