Angular: Use function of another module in HTML / template

Question

I have the following module:

// in module app/util/utils.ts
export function isNullOrUndefined(obj: any) {
  return obj === undefined || obj === null || obj === 'undefined' || obj === '';
}

I want to use the function in my component:

// in module app/component/component.ts
@Component({
  selector: 'app-component',
  template: `
    <span *ngIf="!isNullOrUndefined(value)">Should not be there</span>
`
})
export class Component {
 value = null;
}

However, I am getting the following error message when the component is loaded:

Component.html:2 ERROR 
TypeError: _co.isNullOrUndefined is not a function
    at Object.View_Component_1._co [as updateDirectives] (Component.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
    at checkAndUpdateView (core.es5.js:12245)
    at callViewAction (core.es5.js:12610)
    at execEmbeddedViewsAction (core.es5.js:12568)
    at checkAndUpdateView (core.es5.js:12246)
    at callViewAction (core.es5.js:12610)
    at execComponentViewsAction (core.es5.js:12542)
    at checkAndUpdateView (core.es5.js:12251)
    at callViewAction (core.es5.js:12610)

Importing the function like this doesn't help either:

import {isNullOrUndefined} from '../util/util';

How can this be solved?

Günter Zöchbauer · Accepted Answer · 2017-08-29 17:33:50Z

13

The scope for template bindings is the compoennt instance and you can only use what the component instance provides.

If you add

class MyComponent {
  myIsNullOrUndefined = isNullOrUndefined;

then you can use

 <span *ngIf="!myIsNullOrUndefined(value)">Should not be there</span>

answered Aug 29, 2017 at 17:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

SilverJan Over a year ago

Alright, works! However, this is not really a nice solution isn't it (criticizing Angular not you)..

Günter Zöchbauer Over a year ago

AFAIK there were discussions to make this experience better, but I don't know about the status.

mohsenmadi Over a year ago

It doesn't have to be a different name BTY, could do isNullOrUndefined = isNullOrUndefined; RHS is valued to be the reference.

jadc · Accepted Answer · 2020-06-27 01:47:31Z

0

Slightly nicer is

class MyComponent {
   get isNullOrUndefined() {
     return isNullOrUndefined;
   }

Also can be used to make any imported thing visible, eg Enum types.

edited Jun 27, 2020 at 1:47

answered Jun 27, 2020 at 1:41

jadc

4124 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular: Use function of another module in HTML / template

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related