find and solve || findandsolve.com
Please wait.....

NGX-TIMEAGO in Angular time-ago-pipe

NGX-TIMEAGO in Angular time-ago-pipe

In the UI part(front-end), we need to display like some seconds ago, days ago, weeks ago, months ago, years ago etc.
We need to import into our angular project  'npm install time-ago-pipe --save'.
In this article we will learn  date pipe in anuglar with create user-friendly (human readable) date pipe in Angular.

Step : 1
Open your project and add 'DateAgoExample.ts' file your project under app folder.Generate Custom Date Pipe inside the pipes folder.
How to add 'DateAgoExample.ts' file under app folder?
  • Right click on your app folder under ClientApp.
  • Open 'Open Windows PowerSheel' 
  • Add  'ng g p pipes/DateAgoExample' and enter Or Create new Folder Pipes and add 'DateAgoExample.ts'under pipes
  
The project structure looks like as given image

Step :2
Open your DateAgoExample.ts and past this code as given below

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

@Pipe({
    name: 'dateAgoExample',
    pure: true
})
export class DateAgoExaple implements PipeTransform {
    transform(value: any, args?: any): any {
        if (value) {
            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
            if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
                return 'Just now';
            const intervals = {
                'year': 31536000,
                'month': 2592000,
                'week': 604800,
                'day': 86400,
                'hour': 3600,
                'minute': 60,
                'second': 1
            };
            let counter;
            for (const i in intervals) {
                counter = Math.floor(seconds / intervals[i]);
                if (counter > 0)
                    if (counter === 1) {
                        return counter + ' ' + i + ' ago'; // singular (1 day ago)
                    } else {
                        return counter + ' ' + i + 's ago'; // plural (2 days ago)
                    }
            }
        }
        return value;
    }
}

Step : 3

Add Your 'DateAgoExaple' class in app.module.ts
Open your app.module.ts and past this code as given below


import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { RouterModule } from '@angular/router'
import { AppComponent } from './app.component'
import { NavMenuComponent } from './nav-menu/nav-menu.component'
import { HomeComponent } from './home/home.component'
import { DateAgoExaple } from './pipes/DateAgoExample'
 @NgModule({ 
 declarations:
 [ 
 AppComponent, 
 NavMenuComponent, 
 HomeComponent,
 DateAgoExaple
//this is your customer class where your have created in DateAgoExaple.ts file
//I have only declared DateAgoExaple in @NgModule
], 
imports: 
 [ 
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule
FormsModule
RouterModule.forRoot([ 
 { path: '', component: HomeComponent, pathMatch: 'full' }
 ]) 
 ],
 providers: [], 
 bootstrap: [AppComponent] })
export class AppModule { }

Step : 4
Open your home.component.ts from ClientApp->src->app->home and past this code as given below

import { Component } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  //this is array list 
  dataList: Array<{ title: string, desc: string, imagePath: string, date: string }> = [
    {
      title: "Add More  Example Razor page using asp.net core with code example step by step",
      desc: "Adding a Add More Property to the AddMoreViewModel Model",
      imagePath: "https://i.ibb.co/yhK3bKn/Project-Description-and-project-structure.png",
      date: "2020-06-13T06:28:53",
    },
    {
      title: "Angular file upload remove or  multiple file upload and remove example",
      desc: "Save image in local folder using angular,angular image upload component",
      imagePath: "https://i.ibb.co/yhK3bKn/Project-Description-and-project-structure.png",
      date: "2020-06-23T06:28:53",
    },
    {
      title: "Globalization and Localization using angular or multi language select using angular i18n Example step by step",
      desc: "What is Internationalization (i18n) and how to use it?Application internationalization is a many-faceted area of development",
      imagePath: "https://i.ibb.co/fSWHC1Z/Multi-language-Example-in-angular.png",
      date: "2020-04-25T06:14:31",
    }
  ];
}
Step : 5
Open your home.component.html under home folder and past this code as given below
<div class="container">
    <h3 style="text-align:center;font-weight:500;">
      DATE TIME AGO EXAMPLE
    </h3>
    <hr />
    <div class="row">
      <div class="col-md-4" *ngFor="let a of dataList">
        <label>{{a.title}}</label>
        <div class="thumbnail">
          <a>
            <span style="color: #282b2963;font-weight:500;">{{a.date | dateAgoExample}}</span>
            <img src="{{a.imagePath}}" alt="{{a.title}}" style="width:100%">
            <div class="caption">
              <p>{{a.desc}}</p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <br />
    <h3 style="text-align:center;font-weight:500;">
      DATE FORMATE EXAMPLE
    </h3>
    <hr />
    <div class="row">
      <div class="col-md-4" *ngFor="let a of dataList">
        <label>{{a.title}}</label>
        <div class="thumbnail">
          <a>
            <span style="color: #282b2963;font-weight:500;">{{a.date | date}}</span>
            <img src="{{a.imagePath}}" alt="{{a.imagePath}}" style="width:100%">
            <div class="caption">
              <p>{{a.desc}}</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response