ng-moment-pipes

Tested for angular16

Installation

npm install ng-moment-pipes

How to use

imports

import { MomentPipesModule } from 'ng-moment-pipes';
@NgModule({
    imports: [ MomentPipesModule ]
})

Pipes

moment

시간을 입력 받아서 다양한 포맷으로 변경한다.

• Input : Date 및 Moment Format

{{datetime | moment : 'YYYY-MM-DD HH:mm'}}

momentUnix

유닉스타임(숫자)을 입력 받아서 다양한 포맷으로 변경한다.

• Input: number(UnixTime)

{{datetime | momentUnix : 'YYYY-MM-DD HH:mm'}}

momentLocal

UTC 시간을 로컬 시간으로 변경한다.

• Input : Date 및 Moment Format

{{datetime | momentLocal : 'YYYY-MM-DD HH:mm'}}

momentRelative

시간을 입력 받아서 SNS 에 사용되는 시간(몇초전, 몇분전..) 으로 변경하여 출력한다.

• Input : Date 및 Moment Format

{{msg.created_at | momentRelative}}<!--out put will be a hour ago like that -->

제작 후기

moment는 일반적인 angular project에서 사용하는 방식과 배포형 package 형태의 pipe 로 제작 하는 방식이 약간 다릅니다.
제작시 주의 할 점에 대해서 아래와 같이 설명드립니다.

일반적인 angular project시 사용법

import * as  moment from 'moment'; // 일반적인 angular project시 삽입법
.....
public transform(date: momnet.Moment, ...args: any[]): any { // 형타입 선언시 momnet.Moment
  const [format] = args;
  return moment(date).format(format);
}

package 용 사용법

먼저 tsconfig.lib.json의 compilerOptions 에 아래와 같이 두가지를 추가한다.

{
  ..........
  "compilerOptions": {
    ..........
    "esModuleInterop":true,
    "allowSyntheticDefaultImports": true
  }
  ..........
}

import moment, {Moment} from 'moment'; // 
....
public transform(date: Date | Moment, ...args: any[]): any { // 형타입 선언시 바로 Moment 사용
  const [format] = args;
  return moment(date).format(format);
}