Passing a non static object to static method in angular 4

Question

I am working angular 4 application and trying to pass the current language to the toLocaleString() method. The method mathoround is static method and doesnt understand this.translation.currentLang. How do I pass a non static object to static method.

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class ChartHelperService {


    constructor( private translation: TranslateService) { }

    static prepareChartTooltipRow(name: string, value: string, additionalStyle: string): string {
        return '<tr style="background-color: initial;"><td style="text-align:left;' + additionalStyle + '"><b>' + name +
            '</b></td>' +
            '<td style="text-align: right;' + additionalStyle + '">' +
            value +
            '</td></tr>';
    }

    static showCcorYAxis(id: number): boolean {
        return !(window.innerWidth < 992 && id !== 0);
    }

    static mathRound(input: number): string {
        return Math.round(input).toLocaleString(this.translation.currentLang, { maximumFractionDigits: 0 });
    }

}

The real question should probably be - why make this a static function in the first place? But if you would really want to have statics, you could try using ChartHelperService.translation (instead of this, as you do not have a class instance this available in a static function). Probably the actual correct way to do it is to actually pass the translation service instance from the component you're calling this static function from.. — MikeOne
– MikeOne, Commented Nov 26, 2018 at 14:08

Muhammed Albarmavi · Accepted Answer · 2018-11-27 13:09:57Z

simpliy don't try to mix access to static property like working with class instant.

ChartHelperService as static class

export class ChartHelperService {

    static translation:TranslateService;

    setTranslationService( translation: TranslateService) {
        ChartHelperService.translation = translation;
    }

    static prepareChartTooltipRow(name: string, value: string, additionalStyle: string): string {
        return '<tr style="background-color: initial;"><td style="text-align:left;' + additionalStyle + '"><b>' + name +
            '</b></td>' +
            '<td style="text-align: right;' + additionalStyle + '">' +
            value +
            '</td></tr>';
    }

    static showCcorYAxis(id: number): boolean {
        return !(window.innerWidth < 992 && id !== 0);
    }

    static mathRound(input: number): string {
        return Math.round(input).toLocaleString(ChartHelperService.translation.currentLang, { maximumFractionDigits: 0 });
    }

}

and you can set the translation property on the AppComponent constractor

export class AppComponent  {    
  constructor( private translation: TranslateService ) {
   ChartHelperService.setTranslationService(translation);
  }
}

ChartHelperService in utility class so you don't need to add it to provider list

Updated

ChartHelperService as Service

@Injectable()
export class ChartHelperService {


    constructor( private translation: TranslateService) { }

    public prepareChartTooltipRow (name: string, value: string, additionalStyle: string): string {
        return '<tr style="background-color: initial;"><td style="text-align:left;' + additionalStyle + '"><b>' + name +
            '</b></td>' +
            '<td style="text-align: right;' + additionalStyle + '">' +
            value +
            '</td></tr>';
    }

    public showCcorYAxis(id: number): boolean {
        return !(window.innerWidth < 992 && id !== 0);
    }

    public mathRound(input: number): string {
        return Math.round(input).toLocaleString(this.translation.currentLang, { maximumFractionDigits: 0 });
    }

}

In this case you need to add ChartHelperService to providers list and inject ChartHelperService to any component to get an instant of ChartHelperService.

export class TestComponent  {    
   constructor( private chartHelperService: ChartHelperService) {
     console.log(this.chartHelperService)
   }
 }

The application does not have appcomponent. It only had appmodule
you can add constructor on appmodule and set the translation servcie it 's also posible @Tom

Collectives™ on Stack Overflow

Passing a non static object to static method in angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related