NgShowcase

Ng - Time

Styled byLS Loader

TimeAgo

Through Directive

Locale => en, es, de, ru, tr

4/7/2024, 5:37:32 PM

4/7/2024, 4:52:32 PM

4/7/2024, 4:37:32 PM

4/6/2024, 5:37:32 PM

3/17/2024, 5:37:32 PM

10/10/2023, 5:37:32 PM

4/18/2022, 5:37:32 PM

4/8/2024, 1:37:32 AM

less than a minute ago

45 minutes ago

about an hour ago

a day ago

21 days ago

6 months ago

2 years ago

about 8 hours from now

0 saniye önce

45 dakika önce

1 saat önce

1 gün önce

3 hafta önce

6 ay önce

2 yıl önce

8 saat sonra

меньше минуты назад

45 минут назад

час назад

день назад

21 день назад

6 месяцев назад

2 года назад

через 8 часов

    <div ngFor="let date of dates; let index=index;">
      <span class="Badge Bg-light" TimeAgo [Date]="date" [Live]="index==0" [Locale]="'en'"></span>
    </div>

    const time = new Date().getTime();
    this.dates = [
      new Date(),
      new Date(time - this.minuteInMs * 45),  // 45min ago
      new Date(time - this.hourInMs),         // 1H ago
      new Date(time - this.hourInMs * 24),    // 24H ago
      new Date(time - this.dayInMs * 21),     // 3W ago
      new Date(time - this.monthInMs * 6),    // 6M ago
      new Date(time - this.yearInMs * 2),     // 2Y ago
      new Date(time + this.hourInMs * 8),     // 8H later
    ];

Through Pipe

0 Seconds ago0 saniye önce
less than a minute ago45 minutes agoabout an hour agoa day ago21 days ago6 months ago2 years agoabout 8 hours from now

    <span class="Badge Bg-info ME-2">{/{dates[0] | TimeAgo:true:''}/}</span>
    <span class="Badge Bg-info ME-2">{/{dates[0] | TimeAgo:true:'tr'}/}</span>
    <span class="Badge Bg-light ME-2" *ngFor="let date of dates; let index=index;">{/{date | TimeAgo}/}</span>

Timer

Countdown

      <Countdown ClassName="Border Shadow" [Date]="countdown[0]"></Countdown>
      <Countdown ClassName="Fg-yellow" [Date]="countdown[1]"></Countdown>
      <Countdown ClassName="Fg-green" [Date]="countdown[2]"></Countdown>

  Now = Date.now();
  countdown = [
    new Date(new Date().getTime() + this.minuteInMs * 45),  // 45min later
    new Date(new Date().getTime() + this.hourInMs),         // 1H later
    new Date(new Date().getTime() + this.hourInMs * 24),    // 24H later
  ];

Stopwatch / Chronometer

Press Start

  <Stopwatch></Stopwatch>
  <Chronometer ClassName="Fg-orange"></Chronometer>