Static functions in Angular-template

Question

In our project we use the linting-config from AirBnB. The is a rule, that says class methods must use this or be declared as static. In theory this rule makes a lot of sense to me, but in the angular context seems to cause some problems. Imagine a component like this (Stackblitz):

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<p>{{doSomething("hello stack overflow")}}'
})
export class AppComponent  {
  doSomething(string: string): string {
    return string.toLocaleUpperCase();
  }
}

Now, the linter would complain about doSomething not using this. Wen can now make the function static to satisfy it - but than we would not be able to use the function in the template.

One conclusion would be, that doSomething should not be part of AppComponent but another service for example. But than we would have to wrap the static function in non-static one again. In the end the wrapping function is not much smaller than the original one, so the whole outsourcing to service thing seems kind of pointless. Especially since we speak of functions which are explicitly only useful for the template of the component. It seems to be problematic especially with tracking function for trackBy of ngForOf - they tend to not use a this keyword by nature and are only used in template, so they can not be static.

See Call static function from angular2 template

So is there a meaningful pattern how to handle functions which are used in templates together with this rule or is it just not not a useful rule for angular?

I would say that you can use Angular pipes (angular.io/guide/pipes) for those template data transformation functions. In fact you can use them in the trackBy too (bennadel.com/blog/…). But then the linter would complain about the pipes.. So as pipes are an important part of Angular I would say that maybe the rule it´s not a good match for Angular (unless you can exclude pipes from it) — Javi
– Javi, Commented Dec 2, 2020 at 21:18

Eliseo · Accepted Answer · 2020-12-04 12:04:47Z

3

you can also define in a .ts externals functions like:

export function myFunction(name){
   return "Hello "+name;
}

You only need in one component

import {myFunction} from './myfile.ts'

Then you can use in .ts

   myFunction("Me");

If you want to use in the html you need declare in your .ts

  myFunctionI=myFunction;

And use

  {{myFunctionI('me')}}

Other option: your .ts like

export function Util() {
    return new UtilClass()
}
class UtilClass {
   greet(name){
       return "Hello "+name;
   }
}

And you can

import {Util} from './myfile-util.ts' 

console.log(Util.greet("me"))

answered Dec 4, 2020 at 12:04

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paflow Over a year ago

But for using them in the template (the html-part of the component), I would have to wrap them in some member-functions of the component.

Eliseo Over a year ago

@Paflow, in html all the "variables" are refered to a "this". e.g. you can not use directlty in a .html {{Math.round(3.2)}}. But you can declare in your component IMath=Math and then you use {{IMath.round(3.2)}} -I like add an "I" before the "variable", but it's only a personal option-. Equal another "function" or class you want to use.

Paflow · Accepted Answer · 2020-12-04 11:41:10Z

0

I found a satisfying solution myself:

I convert the those function - small, UI-related, used (only) in template, not using the scope (this) as fields, holding arrow functions.

  doSomething = (string: string): string => string.toLocaleUpperCase();

answered Dec 4, 2020 at 11:41

Paflow

2,3975 gold badges34 silver badges58 bronze badges

Comments

KingMario · Accepted Answer · 2021-06-10 07:38:24Z

0

For your case, I think a pipe is better.

answered Jun 10, 2021 at 7:38

KingMario

1912 silver badges12 bronze badges

Collectives™ on Stack Overflow

Static functions in Angular-template

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related