Make pipe refresh it self in angular

Question

I have static timestamp from backend and I want to refresh the pipe every 1 second to get date from now and this my pipe

    import { Pipe, PipeTransform } from '@angular/core';
import moment from 'moment';
@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {

  transform(date: string): string {

    return moment.utc(date, 'X').local().format('DD-MM-YYYY h:mm:ss a');
  }

}

in this case it just convert time stamp to this format , I want to keep date updated how can I do this ?

score 6 · Answer 1 · answered Sep 21 '21 at 19:52

You should return an observable and use asyncPipe as well.

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {

  transform(date: string): Observable<string> {
    return interval(1000).pipe(map(() => { return moment().format('DD-MM-YYYY h:mm:ss a') }));
  }

}

And you should use it like: {{ 'param' | dateFormat | async}}

Use `timer(0, 1000)` instead of `interval(1000)` if you want the pipe to return immediately! https://stackoverflow.com/a/44166071/2966288 — AvahW, Jul 23 '23 at 20:34

score 0 · Answer 2 · answered Sep 21 '21 at 19:00

0

I think you just have to refresh your time that is passed into the pipe every second?

Like

currentTime$ = Observable.interval(1000).pipe(map(() => { return new Date() } ))

answered Sep 21 '21 at 19:00

Peter Bucher

48
1
5

I have tried it but it doesn't work – mustafa abdelbadea Sep 21 '21 at 19:15
You use it in html like (currentTime$ | async) | dateFormat – Peter Bucher Sep 21 '21 at 19:21
`return interval(1000).pipe(map(() => { return moment.utc(date, 'X').local().format('DD-MM-YYYY h:mm:ss a')} )) ` – mustafa abdelbadea Sep 21 '21 at 19:30
**error** Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction'. Type 'unknown[]' provides no match for the signature '(source: Observable): Observable' – mustafa abdelbadea Sep 21 '21 at 19:30

Make pipe refresh it self in angular

2 Answers2

Linked