Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

208
Views
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 answers
Answer question

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 Report

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!