5

I am using moment v2.22.0 in angular 5, and this is how I have imported it in module -

import * as moment from 'moment';

and using it in component as -

export class ChatComponent {
  .
  .
  .
  public moment: any = moment;
  .
  .
}

and when I am using it in html template -

<div>{{moment(activeTeam.createdAt).format('LL')}}</div>

it is giving me an error message that -

[Angular] Member 'moment' is not callable

can anyone tell me what I am doing wrong !!

samar taj Shaikh
  • 1,165
  • 11
  • 18

5 Answers5

20

cli (run in console)

// install moment js
npm install moment --save

component declaration (ts)

// import and declare moment
import * as moment from 'moment';
moment: any = moment;

template file (html)

// template syntax
<p>{{moment(date_time_variable).format('ll')}}</p>
MaciejLisCK
  • 3,706
  • 5
  • 32
  • 39
Bhaskararao Gummidi
  • 2,513
  • 1
  • 12
  • 15
  • Thanks for the answer. Is there any advantage/ disadvantage of using moment directly in HTML rather than .ts file. – atish Sep 08 '21 at 08:48
4

Try to import moment as :

import  moment from 'moment';

HTML:

<div>{{getFormat(activeTeam)}}</div>

TS:

getFormat(activeTeam){
   return moment(activeTeam.createdAt).format('LL')
}
Akj
  • 7,038
  • 3
  • 28
  • 40
  • Thanks for the answer. Will there be any performance issue if a similar code is used with ngFor. – atish Sep 08 '21 at 08:50
4

Don't use any, declare without it

import * as moment from 'moment';
moment = moment;
Suroor Ahmmad
  • 1,110
  • 4
  • 23
  • 33
0

Instead of declaring moment's type as any, declare it as moment: () => any;

abdullahkady
  • 1,051
  • 1
  • 8
  • 8
0

remove * as form import

For install moment from npm install moment --save

Stackblitz Demo

import  moment from 'moment';

export class ChatComponent {
  moment: any = moment;
}

<div>{{moment(activeTeam.createdAt).format('LL')}}</div>
Krishna Rathore
  • 9,389
  • 5
  • 24
  • 48