Using Angular's Date Pipe on Input with 2-Way Binding

Question

I am aware of how to use Angular's date pipe with typical string interpolation examples and/or for loops. However, I have a situation that's different than both these scenarios - where I've created a kind of custom two-way binding in my Angular 2 app.

This is what my template code looks like:

<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None" 
    [field-status]="getPropertyStatus('profile.hireDate')"/>

Is there a way I can pass the date pipe in here? I've tried passing it in like this:

<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None" 
    [field-status]="getPropertyStatus('profile.hireDate') | date"/>

... but that doesn't work. It doesn't throw an error, it just doesn't modify the date formatting. I also tried wrapping the whole expression in brackets - and that through an error.

Is there a way I can pass the date pipe here in the view, or do I need to handle this differently - for instance as part of a function in my component? Looking for the simplest solution here.

If you read my post you'll see there are no errors. It just doesn't work -- it doesn't transform the data displayed in the view. — Rey
– Rey, Commented Oct 30, 2017 at 17:59
Sorry about that. Was reading on my phone. Thought it said it throws an error for you. edit - you said wrapping the whole expression in brackets through an error for you. That's what I was asking for. — jpetitte
– jpetitte, Commented Oct 30, 2017 at 21:07
Can you try it without the function providing the value to the date pipe? I pipe values using the async pipe all the time, but I'ver never attempted it from a function. Can you output field-status to the console and provide more information regarding "getPropertyStatus"? I'm just probing for more info here to see if something jumps out at me. — jpetitte
– jpetitte, Commented Oct 30, 2017 at 21:15

Ben Richards · Accepted Answer · 2017-10-30 17:29:55Z

1

One way to use the interpolated value instead of the binding:

<input class="app-input [(inputModel)]="staff.profile.hireDate" placeholder="None" 
    field-status="{{getPropertyStatus('profile.hireDate') | date}}" />

edited Oct 30, 2017 at 17:29

answered Oct 28, 2017 at 8:41

Ben Richards

3,5861 gold badge18 silver badges19 bronze badges

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

3 Comments

Rey Over a year ago

Turns out, as is, this doesn't work. I doesn't produce errors, but it also doesn't transform the date formatting in the view. Any ideas?

Ben Richards Over a year ago

You got a plunkr setup somewhere? If you do, I can take a look.

Rey Over a year ago

I don't have a plunk for this. And it would be difficult to replicate in a plunk, because there are multiple levels of abstraction going on.

Collectives™ on Stack Overflow

Using Angular's Date Pipe on Input with 2-Way Binding

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related