client/src/app/shared/date/date-toggle.component.ts

   1 import { Component, Input, OnInit, OnChanges } from '@angular/core'
   2 import { DatePipe } from '@angular/common'
   3 import { FromNowPipe } from '../angular/from-now.pipe'
   4
   5 @Component({
   6   selector: 'my-date-toggle',
   7   templateUrl: './date-toggle.component.html',
   8   styleUrls: [ './date-toggle.component.scss' ],
   9   providers: [ DatePipe, FromNowPipe ]
  10 })
  11 export class DateToggleComponent implements OnInit, OnChanges {
  12   @Input() date: Date
  13   @Input() toggled = false
  14
  15   dateRelative: string
  16   dateAbsolute: string
  17
  18   constructor (
  19     private datePipe: DatePipe,
  20     private fromNowPipe: FromNowPipe
  21   ) { }
  22
  23   ngOnInit () {
  24     this.updateDates()
  25   }
  26
  27   ngOnChanges () {
  28     this.updateDates()
  29   }
  30
  31   toggle () {
  32     this.toggled = !this.toggled
  33   }
  34
  35   getTitle () {
  36     return this.toggled ? this.dateRelative : this.dateAbsolute
  37   }
  38
  39   getContent () {
  40     return this.toggled ? this.dateAbsolute : this.dateRelative
  41   }
  42
  43   private updateDates () {
  44     this.dateRelative = this.fromNowPipe.transform(this.date)
  45     this.dateAbsolute = this.datePipe.transform(this.date, 'long')
  46   }
  47 }