1

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.

Rey
  • 1,393
  • 1
  • 15
  • 24
  • Can you paste the errors for reference? – jpetitte Oct 30 '17 at 17:36
  • 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 Oct 30 '17 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 Oct 30 '17 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 Oct 30 '17 at 21:15

1 Answers1

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}}" />
Ben Richards
  • 3,437
  • 1
  • 14
  • 18
  • 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? – Rey Oct 30 '17 at 15:54
  • You got a plunkr setup somewhere? If you do, I can take a look. – Ben Richards Oct 30 '17 at 17:33
  • 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. – Rey Oct 30 '17 at 18:22