Angular: Format date using pipe with custom string

Question

I am new to angular. I used pipe to format date. I used following but, didn't work.

<tr *ngFor="let item of items; index as i" [attr.data-rel]="'sometext-' + item.startTime | dateFormat ">

If i remove either 'timeslot-' + or | dateFormat it works but, with string concatenation it doesn't work.

Following works.

<tr *ngFor="let item of items; index as i" [attr.data-rel]="'sometext-' + item.startTime">

Or

<tr *ngFor="let item of items; index as i" [attr.data-rel]="item.startTime | dateFormat ">

what is the expected result? someText - (dateformated) or (sometext-date)formated? — cucuru
– cucuru, Commented Mar 28, 2019 at 15:48
<tr *ngFor="let item of items; index as i" [attr.data-rel]="'sometext-' + (item.startTime | dateFormat )"> — Nadhir Falta
– Nadhir Falta, Commented Mar 28, 2019 at 15:51
@NadhirFalta Cool. It works please post it as answer. Thank you. :) — ketan
– ketan, Commented Mar 28, 2019 at 15:52

Nadhir Falta · Accepted Answer · 2019-03-28 16:00:43Z

3

wrap (item.startTime | dateFormat ) between parenthesis

<tr *ngFor="let item of items; index as i" [attr.data-rel]="'sometext-' + (item.startTime | dateFormat )">

answered Mar 28, 2019 at 16:00

Nadhir Falta

5,2872 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abderrahim Soubai-Elidrisi · Accepted Answer · 2019-03-28 15:53:26Z

1

Create a custom pipe

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

@Pipe({ name: 'dateFormat' })
export class DateFormat implements PipeTransform {
  transform(date: Date, text: string): string {
    return text + date.toString();
  }
}

call it like this

<tr *ngFor="let item of items; index as i" [attr.data-rel]="item.startTime | dateFormat : 'sometext'  ">

answered Mar 28, 2019 at 15:53

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

Collectives™ on Stack Overflow

Angular: Format date using pipe with custom string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related