@angular/common#DatePipe TypeScript Examples

constructor(private ref: ChangeDetectorRef, public datepipe: DatePipe) {
    try {
      setInterval(() => {
        if (!this.ref.hasOwnProperty(enums.DESTROYED)) {
          this.ref.markForCheck();
        }
      }, 2000);
    } catch (error) {
      logger(error);
    }
  }

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    CommonModule,
    FormsModule,
    AppRoutingModule,
    NpMenubarModule,
    NpNotificationsModule,
    NpTranslationsModule,
  ],
  providers: [
    // provider used to create fake backend
    fakeBackendProvider,
    DatePipe,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

transform(value: any, pattern: string = 'mediumDate'): any {
    const date = new Date(value);
    const datePipe: DatePipe = new DatePipe(this.translate.currentLang);

    try {
      return datePipe.transform(date, pattern);
    } catch (e) {
      console.warn(e);
      return value;
    }
  }

constructor(
    private modalController: ModalController,
    private transactionService: TransactionService,
    private datePipe: DatePipe,
    private orgUserSettingsService: OrgUserSettingsService,
    public platform: Platform,
    private elementRef: ElementRef,
    private trackingService: TrackingService,
    private offlineService: OfflineService,
    private authService: AuthService
  ) {}

@Pipe({
  name: 'displayFimsDate',
  pure: true,
})
export class DisplayFimsDate extends DatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(fimsDate: FimsDate, format = 'shortDate'): string {
    return super.transform(toISOString(fimsDate), format);
  }
}

week(event: CalendarEvent): string {
		return `
			<div class="o-calendar__wrapper">
				<div class="o-calendar__info">
					<p class="o-calendar__title">${event.title}</p>
					<p class="o-calendar__user">${event.meta.username}</p>
				</div>
				${!event.meta?.tmpEvent ? `
					<div class="o-calendar__time">
						<span>
							${new DatePipe('en_US').transform(
								event.start,
								'HH:mm',
								'en_US'
							)}
							</span>
							<span>${new DatePipe('en_US').transform(
								event.end,
								'HH:mm',
								'en_US'
							)}
						</span>
					</div>
				` : ''}
			</div>
		`;
	}

constructor(private bluetoothLE: BluetoothLE,
                private databaseService: DatabaseService,
                private authService: AuthService,
                private datePipe: DatePipe,
                private platform: Platform) {


        App.addListener('appStateChange', (state) => {

            this.isActive = state.isActive;
            if (!state.isActive) {
                // The app has become inactive. We should check if we have some work left to do, and, if so,
                // execute a background task that will allow us to finish that work before the OS
                // suspends or terminates our app:
            }
        });

    }

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        AngularFireModule.initializeApp(environment.firebase),
        AngularFirestoreModule,
        AngularFireAuthModule
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
        SQLite,
        BluetoothLE,
        DatePipe,
        FirebaseAuthentication
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

constructor(private router: Router,
              private route: ActivatedRoute,
              private formBuilder: FormBuilder,
              public datepipe: DatePipe) {
                this.nickname = localStorage.getItem('nickname');
                this.roomname = this.route.snapshot.params.roomname;
                firebase.database().ref('chats/').on('value', resp => {
                  this.chats = [];
                  this.chats = snapshotToArray(resp);
                  setTimeout(() => this.scrolltop = this.chatcontent.nativeElement.scrollHeight, 500);
                });
                firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(this.roomname).on('value', (resp2: any) => {
                  const roomusers = snapshotToArray(resp2);
                  this.users = roomusers.filter(x => x.status === 'online');
                });
              }

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RoomlistComponent,
    AddroomComponent,
    ChatroomComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatIconModule,
    MatCardModule,
    MatFormFieldModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatSnackBarModule,
    MatSidenavModule
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [CometChatMessageListComponent],
  imports: [
    CommonModule,
    CometChatSenderTextMessageBubble,
    CometChatSenderFileMessageBubble,
    CometChatReceiverFileMessageBubble,
    CometChatSenderImageMessageBubble,
    CometChatReceiverImageMessageBubble,
    CometChatSenderVideoMessageBubble,
    CometChatReceiverVideoMessageBubble,
    CometChatSenderAudioMessageBubble,
    CometChatReceiverAudioMessageBubble,
    CometChatReceiverTextMessageBubble,
    CometChatDeleteMessageBubble,
    CometChatSenderPollMessageBubble,
    CometChatReceiverPollMessageBubble,
    CometChatSenderStickerMessageBubble,
    CometChatReceiverStickerMessageBubble,
    CometChatActionMessageBubble,
    CometChatSenderDirectCallBubble,
    CometChatReceiverDirectCallBubble
  ],
  exports: [CometChatMessageListComponent],
  providers: [DatePipe],
})
export class CometChatMessageList {}

constructor(
    public fb: FormBuilder,
    public productSandbox: ProductSandbox,
    public categoriessandbox: CategoriesSandbox,
    public brandsandbox: BrandSandbox,
    private popup: NgbModal,
    private route: ActivatedRoute,
    private changeDetectRef: ChangeDetectorRef,
    public stockStatusSandbox: StockSandbox,
    public configService: ConfigService,
    private datePipe: DatePipe
  ) {
    this.mycontent = `<p>My html content</p>`;
    // this.initDropDownList();
    this.route.params.subscribe(data => {
      if (data) {
        this.editId = data['id'];
      }
    });
  }

@NgModule({
  declarations: [
    ProductAddComponent,
    ProductListComponent,
    ProductFilterComponent
  ],
  imports: [
    CommonModule,
    DefaultCommonModule,
    FormsModule,
    ComponentsModule,
    ReactiveFormsModule,
    ProductRoutingModule,
    MaterialModule,
    EffectsModule.forRoot([MediaEffects]),
    CKEditorModule,
    NumberAcceptModule,
    NgbModule,
    PipeModule
  ],
  providers: [
    DatePipe,
    ProductService,
    ProductSandbox,
    CategoriesSandbox,
    CategoriesService,
    BrandApiClient,
    BrandSandbox,
    MediaSandbox,
    MediaService
  ],
  bootstrap: [],
  entryComponents: []
})
export class ProductModule {}

constructor(
    private modalService: NgbModal,
    private modalService2: NgbModal,
    private route: ActivatedRoute,
    public orderSandbox: OrdersSandbox,
    public layoutSandbox: LayoutSandbox,
    public orderStatusSandbox: OrderstatusSandbox,
    public datePipe: DatePipe,
    private configService: ConfigService,
    private pipe: CurrencySymbolPipe,

  ) {
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
  }

constructor(
        private authService: AuthenticationService,
        public snackBar: MatSnackBar,
        private router: Router,
        private appState: ApplicationStateService,
        private apiService: ApiService,
        private datePipe: DatePipe) {

        this.minDate = this.apiService.genesisDate;
        this.maxDate = new Date(); // Set to current date.

        this.accountName = 'main';
    }

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        FormsModule,
        AppSharedModule,
        ReactiveFormsModule,
        MaterialModule,
        AccountRoutingModule,
    ],
    declarations: [
        CreateAccountComponent,
        RecoverAccountComponent,
    ],
    providers: [DatePipe],
    exports: [
        CreateAccountComponent,
        RecoverAccountComponent
    ]
})
export class AccountModule {
}

@NgModule({
  declarations: [
    TrustHtmlPipe,
    SizeDisplayPipe,
    NgxDatePipe,
    RelativeDurationPipe,
    GetAddonListItemFilePropPipe,
    DownloadCountPipe,
    InterfaceFormatPipe,
    InvertBoolPipe,
  ],
  exports: [
    TrustHtmlPipe,
    SizeDisplayPipe,
    NgxDatePipe,
    RelativeDurationPipe,
    GetAddonListItemFilePropPipe,
    DownloadCountPipe,
    InterfaceFormatPipe,
    InvertBoolPipe,
  ],
  providers: [RelativeDurationPipe, GetAddonListItemFilePropPipe, DownloadCountPipe, DatePipe],
})
export class PipesModule {}

constructor(
    public accountSandbox: AccountSandbox,
    public listSandbox: ListsSandbox,
    private route: ActivatedRoute,
    public datePipe: DatePipe,
    public fb: FormBuilder
  ) {
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
    this.regSubscribeEvents();
    this.is_edit = true;
  }

@Pipe({
  name: 'datetime'
})
export class DateTimePipe extends DatePipe implements PipeTransform {
  
  constructor(private i18nService: I18nService) {
    super(i18nService.getCurrentLanguage());
  }
  
  transform(value: any, format?: string, timezone?: string, locale?: string): string {
    return super.transform(value, format || 'dd MMMM yyyy HH:mm', timezone, locale || this.i18nService.getCurrentLanguage());
  }

}

/**
   * Handles  'onSubmit' event. Calls productSandbox doProductUpdate function if (this.editId) else
   * calls productSandbox doProductAdd function.
   * @param user entire form value
   */
  onSubmit(user) {
    console.log('submit image', this.uploadImage);
    // calling
    this.submittedValues = true;
    this.addSelecctedCategories();

    if (!this.user.valid) {
      this.validateAllFormFields(this.user);
      return;
    }
    this.onetimeEdit = true;
    this.param.productName = user.productName;
    this.param.metaTagTitle = user.metaTagTitle;
    this.param.productDescription = user.productDescription;
    this.param.upc = user.upc;
    this.param.sku = user.sku;
    this.param.image = this.uploadImage;
    this.param.categoryId = this.TotalCategories;
    this.param.model = user.model;
    this.param.location = user.location;
    this.param.price = user.price;
    this.param.outOfStockStatus = user.outOfStockStatus;
    this.param.requiredShipping = user.requiredShipping;
    this.param.dateAvailable = user.dateAvailable;
    const dateSendingToServer = new DatePipe('en-US').transform(
      user.dateAvailable,
      'yyyy-MM-dd'
    );
    this.param.dateAvailable = dateSendingToServer;
    this.param.status = user.status;
    this.param.sortOrder = user.sortOrder;
    this.param.condition = user.condition;
    if (this.editId) {
      this.param.productId = this.editId;
      this.productSandbox.doProductUpdate(this.param);
    } else {
      console.log('params', this.param)
      this.productSandbox.doProductAdd(this.param);
    }
  }

constructor(
    private apiService: ApiService,
    private decimalPipe: DecimalPipe,
    private datePipe: DatePipe,
    private authService: AuthService
  ) {}

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    DashboardComponent,
    OrganizationComponent,
    AssessmentsComponent,
    VulnerabilityComponent,
    OrgFormComponent,
    AssetFormComponent,
    VulnFormComponent,
    FooterComponent,
    AssessmentFormComponent,
    ReportComponent,
    PageNotFoundComponent,
    LoginComponent,
    ForgotPasswordComponent,
    PasswordResetComponent,
    InviteUserComponent,
    AdministrationComponent,
    RegisterComponent,
    UserProfileComponent,
    SettingsComponent,
    EmailValidateComponent,
    UserManagementComponent,
    TeamComponent,
    TeamFormComponent,
    UserFormComponent,
    ApikeyManagementComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MarkdownModule.forRoot(),
    AlertModule,
    NgSelectModule,
    TableModule,
    InputTextModule,
    MultiSelectModule,
    CalendarModule,
    ProgressSpinnerModule,
    ButtonModule,
    CardModule,
    ChartModule,
    PasswordModule,
    SelectButtonModule,
    ListboxModule,
    DialogModule,
  ],
  providers: [
    AppService,
    DatePipe,
    LoaderService,
    { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true },
    AuthGuard,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

constructor(
    public accountSandbox: AccountSandbox,
    public listSandbox: ListsSandbox,
    public datePipe: DatePipe
  ) {
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
    this.regSubscribeEvents();
  }

private setupTableConfig(): TableConfiguration {
        return {
            columnConfig: [
                {
                    columnKey: 'referenceNumber',
                    columnHeader: 'Req Number',
                    columnClass: 'request-number',
                    sortDirection: MatTableSortDirection.desc,
                    cellAction: (cellContent) => {
                        this.performCellAction(cellContent);
                    }
                },
                {
                    columnKey: 'requestType',
                    columnHeader: 'Type',
                    columnClass: 'request-type'
                },
                {
                    columnKey: 'requestStatus',
                    columnHeader: 'Status',
                    columnClass: 'request-status'
                },
                {
                    columnKey: 'requestInfo',
                    columnHeader: 'Info',
                    columnClass: 'request-info'
                },
                {
                    columnKey: 'requestInputter',
                    columnHeader: 'Created By',
                    columnClass: 'request-created-by'
                },
                {
                    columnKey: 'requestCreated',
                    columnHeader: 'Created On',
                    columnClass: 'request-created-on',
                    pipe: {
                        pipe: new DatePipe('en-US'),
                        pipeFormat: 'yyyy-MM-dd HH:mm'
                    }
                },
                {
                    columnKey: 'linkedReferenceNumber',
                    columnHeader: 'External Ref',
                    columnClass: 'request-external-ref'
                }
            ],
            headers: {
                displayedColumns: [
                    'referenceNumber',
                    'requestType',
                    'requestStatus',
                    'requestInfo',
                    'requestInputter',
                    'requestCreated',
                    'linkedReferenceNumber'
                ]
            }
        };
    }

constructor(private datePipe: DatePipe) { }

private datePipe: DatePipe = new DatePipe('en-US');

formatDate = new DatePipe(this.locale);

@Pipe({
  name: 'year'
})
export class YearPipe extends DatePipe implements PipeTransform {
  transform(date: Date): any {
    return super.transform(date, 'y');
  }
}

constructor(private route: ActivatedRoute, private router: Router, public datepipe: DatePipe) {
    this.nickname = localStorage.getItem('nickname');
    firebase.database().ref('rooms/').on('value', resp => {
      this.rooms = [];
      this.rooms = snapshotToArray(resp);
      this.isLoadingResults = false;
    });
  }