Call function from different components and pass parameters

user_15286053 0
Viewed 835

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.

angular typescript
3 Answers

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);
       }
}
user_110382450

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

user_106026790

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)
user_166139070
Related