-1

In my database time store like 2019-02-14 06:13:03 how to display in formate of 6h ago or 2 day ago . I am using laravel api.

3d ago or 18h ago

Dinesh Vishwakarma
  • 656
  • 3
  • 13
  • 34
  • Possible duplicate of [Angular 2 "time ago" pipe](https://stackoverflow.com/questions/36663148/angular-2-time-ago-pipe) – Jaykant Mar 04 '19 at 05:52

1 Answers1

2

First step Create pipe somewhere and your code will be 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'timeAgo' })
export class TimeAgo implements PipeTransform {
  transform(d: any): string {

    let currentDate = new Date(new Date().toUTCString());
    let date = new Date(d + "Z");

    let year = currentDate.getFullYear() - date.getFullYear();
    let month = currentDate.getMonth() - date.getMonth();
    let day = currentDate.getDate() - date.getDate();
    let hour = currentDate.getHours() - date.getHours();
    let minute = currentDate.getMinutes() - date.getMinutes();
    let second = currentDate.getSeconds() - date.getSeconds();

    let createdSecond = (year * 31556926) + (month * 2629746) + (day * 86400) + (hour * 3600) + (minute * 60) + second;

    if (createdSecond >= 31556926) {
      let yearAgo = Math.floor(createdSecond / 31556926);
      return yearAgo > 1 ? yearAgo + " years ago" : yearAgo + " year ago";
    } else if (createdSecond >= 2629746) {
      let monthAgo = Math.floor(createdSecond / 2629746);
      return monthAgo > 1 ? monthAgo + " months ago" : monthAgo + " month ago";
    } else if (createdSecond >= 86400) {
      let dayAgo = Math.floor(createdSecond / 86400);
      return dayAgo > 1 ? dayAgo + " days ago" : dayAgo + " day ago";
    } else if (createdSecond >= 3600) {
      let hourAgo = Math.floor(createdSecond / 3600);
      return hourAgo > 1 ? hourAgo + " hours ago" : hourAgo + " hour ago";
    } else if (createdSecond >= 60) {
      let minuteAgo = Math.floor(createdSecond / 60);
      return minuteAgo > 1 ? minuteAgo + " minutes ago" : minuteAgo + " minute ago";
    } else if (createdSecond < 60) {
      return createdSecond > 1 ? createdSecond + " seconds ago" : createdSecond + " second ago";
    } else if (createdSecond < 0) {
      return "0 second ago";
    }
  }
}

And after that incluse timeAgo pipe in app.component.ts something like :

declarations: [
      AppComponent,
      TimeAgo,
      ...,
    ],

After that your html code will be something like 

<p>{{timeValue | timeAgo}}</p>

Here i created Stackblitz project for you.

ZearaeZ
  • 899
  • 8
  • 20
  • I am used your code but it is gives error like (The pipe 'timeAgo' could not be found) .How to remove this error please help me. – Dinesh Vishwakarma Mar 04 '19 at 06:12
  • You didnot gave your TS file path correctly. can you please tell me the path like src/app/timeAgo.ts or something like this? na dmake sure that you injected timeAgo pipe in app.module.ts file – ZearaeZ Mar 04 '19 at 06:15
  • my ts path is like src/app/time-ago.pipe.ts – Dinesh Vishwakarma Mar 04 '19 at 06:21
  • Then please import you file `import { TimeAgoPipe } from './time-ago.pipe';` in app.module.ts. Please refer this [link](https://stackblitz.com/edit/time-ago?file=app%2Fapp.module.ts) – ZearaeZ Mar 04 '19 at 06:25
  • i am using like this but its gives error when using in html to display. – Dinesh Vishwakarma Mar 04 '19 at 06:34
  • The pipe 'timeAgo' could not be found (" [ERROR ->] {{getImage.created_at | timeAgo}} – Dinesh Vishwakarma Mar 04 '19 at 06:37
  • Do you have any error on app.component.ts file? If there is no error then please check you time-ago.pipe.ts file pipe name @Pipe({ name: 'timeAgo' }) what is there? You have to use same name from pipe. – ZearaeZ Mar 04 '19 at 06:45
  • name: 'timeAgo' – Dinesh Vishwakarma Mar 04 '19 at 06:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189372/discussion-between-zearaez-and-er-dinesh). – ZearaeZ Mar 04 '19 at 06:48
  • If anyone has trouble The pipe 'timeAgo' could not be found. Easy fix is to remove the import from app.module.ts and add it to the module of the page you're using it in (don't forget to add it to the declarations as well). – Ivan Javorovic Aug 18 '19 at 03:16